How to Improve Your Core Web Vitals

Core Web Vitals

Of all possible website metrics, Google singles out three so-called Core Web Vitals. These are the metrics Google plans to focus on in the coming year. Google may add to or change these metrics yearly, as they measure them over a long period of time.

Core Web Vitals are a subset of Web Vitals that apply to all web pages, must be rated by all site owners, and will appear in all Google tools. Each of the Core Web Vitals represents a different aspect of the user experience that can be measured in the field and reflects the real-world experience of a mission-critical user-centric outcome.

Three pillars of the webpage experience

At the moment, there are three main principles of working with a page:

• Loading performance (How quickly does something appear on the screen?)
• Responsiveness (How quickly does the page respond to user input?)
• Visual stability (Does something move across the screen while loading?)

To measure these important aspects of the user experience, Google has selected three relevant metrics, also known as Core Web Vitals:

• LCP, or Largest Contentful Paint. This measures how long it takes for the largest piece of content to appear on the screen. It can be an image or a text block. A good LCP rating gives users the feeling of a fast loading site. A slow site can be frustrating.
• FID, or First Input Delay. This measures how long it takes for the site to respond to the first interaction, such as a button press. A good FID rating gives the user the feeling that the site is responsive. Slowness again leads to disappointment.
• CLS, or Cumulative Layout Shift. This measures the visual stability of your site — in other words, whether something moves across the screen during loading and how often it happens. There is nothing more frustrating than trying to click a button when a slow-loading ad appears at that location..

Google’s John Mueller has said that all three metrics should be displayed in green if you want your site to rank high in search results. Keep in mind that you certainly shouldn’t be optimizing your site for green dots, but having green dots will be beneficial to your visitors. It’s all about happy visitors and, of course, great content!

While the Page Experience update is coming soon, it probably won’t have much of an impact at first. Google’s Danny Sullivan has said it will roll out gradually and may become more important over time.

Different tools use different metrics

Each page interaction tool uses several Web Vitals collected from various sources. Since each tool has a different purpose, the metrics used are different for each instrument. However, the common denominator is Core Web Vitals, as Google uses them in all of its page tools.

But what do all these numbers mean? What should you be looking for on your site? When will your site be fast enough? When will it get a good rating? There are a million questions to ask about these metrics. And while Google is trying to close the gap between understanding and improving, the topic is still complex. Website speed and user experience are difficult to measure, as there are many factors to consider.

What are the Core Web Vitals?

Core Web Vitals do not work in isolation, as there are many other metrics. Some are based on controlled laboratory testing, while others are based on field data only. After doing a lot of research, Google discovered a new package called Web Vitals. It combines existing metrics with a set of new ones. The three Core Web Vitals are the most important, and Google specifically asks site owners to track these metrics and improve them where possible.

LCP: Largest Contentful Paint

Largest Contentful Paint measures the point at which the largest content item appears on the screen. Keep in mind that it doesn’t measure the time it takes to fully load the page. It just keeps track of when the most important part loads.

If you have a simple web page with a snippet of text and a large image, that large image will be considered the largest content item. Since this is the largest piece of content, it is meant to impress. So sometimes optimizing your LCP is as easy as optimizing an image.

There used to be a metric called First Meaningful Content (FMC), which measured the time when the first piece of content appeared on the screen that meant something to the user. But contrary to its name, the FMC metric often failed to identify the most important thing that appeared on the screen. 

Largest Contentful Paint is easy to understand: it’s just the time it takes for the largest element to appear on the screen. Elements can include images, videos, or other types of content.

What you need to know

Now that you know what LCP is, you can start optimizing it. According to Google, you should aim for LCP within the first 2.5 seconds of page loading. Anything between 2.5 seconds and 4 seconds should be improved, and you can assume that anything that takes longer than 4 seconds isn’t working very well.

LCP is also dynamic, as the first thing that doesn’t load right away might be a large image. The LCP jumps to this large image when it appears on the screen.

According to Google, LCP is influenced by a number of factors:

FID: First Input Delay

First Input Delay measures the time it takes for the browser to respond to the first user interaction. The faster the browser responds, the more responsive the page will appear. If you want to offer your users a positive experience — who wouldn’t? — then you should work on the responsiveness of your pages.

Delays occur when the browser is still doing other work in the background. The page has loaded and everything looks fine. But when you press a button, nothing happens! This is a frustrating user experience. Even if there is a slight delay, your site may stop responding.

The browser needs to do a lot of work, and sometimes it needs to park certain requests in order to come back to them later.

The browser cannot do everything at once. As we build more and more complex sites — often JavaScript-based — we ask a lot of browsers. To decrease the delay between displaying content on the screen and being able to interact with it, we need to focus on FID.

FID measures all interactions that occur during page loading. These include input actions such as taps, clicks, and keystrokes, but not interactions such as zooming and scrolling. Google’s new metrics require FID to be less than 100ms for a site to appear responsive. Anything in the 100ms to 300ms range needs improvement, and you can assume that anything above this value is performing poorly.

What you need to know

You cannot measure FID without user interactions. This means that Google cannot simply predict the FID based on data from the lab — they need data from real users, or so-called field data. It also means that this data is less manageable than lab data because it collects data from users of all types of devices and those who use it in different ways and in different environments. This is one of the reasons why you sometimes see data change.

You will often find that JavaScript is the cause of your bad ratings. JavaScript helps us create great interactions, but it can also slow down websites with complex code. Often, the browser is unable to respond to input during JavaScript execution. If you improve your JavaScript code and the way the browser handles it, you will improve the website experience.

Most sites can gain a lot by reducing the time it takes to execute JavaScript, breaking down complex tasks, or removing unused JavaScript.

CLS: Cumulative Layout Shift

The third Core Web Vital is brand-new: Cumulative Layout Shift. This metric tries to determine how stable material is when loading on the user’s screen. To measure Cumulative Layout Shift, see how often something jumps when loading and by how much. Imagine that a button loads on the screen, prompting users to click on it. However, most of the content is still loading in the background. When the content is finally fully loaded, the button slides down a bit — just as you want to click on it. 

These layout shifts often happen as a result of ads. Ads are a lifeline for many sites, but they often load so poorly that they frustrate users. Also, there is so much happening on many complex sites that they are difficult to load and the content is loaded when it’s ready. It can also cause content or CTAs to bounce around the screen, making room for slower-loading content.

What you need to know

Cumulative Layout Shift compares frames to determine the movement of elements. It takes all the points at which the layout moves and calculates the severity of those movements. Google believes that a value less than 0.1 is good, while a value between 0.1 and 0.25 needs some work. Anything above 0.25 can be considered bad.

CLS scores

Of course, only unexpected shifts are taken into account. If the user clicks on a menu button and a dropdown menu appears, this is not considered a layout shift. But if this button is indeed causing major design changes, then you should make it user-friendly.

We’ve already mentioned that advertising is one of the main culprits behind layout shifts. Ads are often written in JavaScript, poorly optimized, and served from an external server. Slowness is added at every stage, and you need to work hard to ensure ads always appear in the right place. But there is another element responsible for big shifts in layout: images.

Developers do not always specify the width and height of an image in code and leave it to the browser to determine how the image should be displayed on the screen.

On a page with images and text, text appears first, then images.

Unless the developer has reserved space for the images, the top of the page will first be filled with text, prompting the user to start reading. However, the images will then be loaded and appear where the text was at first. This pushes the text down, causing anxiety for the user. Always specify the width and height of CSS images to reserve space for images that have yet to load.

Tools to measure Web Vitals

There are many tools to help you monitor Web Vitals and improve the performance of your site. Here, I would like to highlight the most important:

• PageSpeed Insights. PageSpeed Insights has evolved into a full-featured measurement tool for both field and laboratory data. In addition, it offers advice on what needs to be improved.
• Lighthouse. Google created Lighthouse as a PWA auditing tool, but it’s now a great performance monitoring tool. It has a few audits that PageSpeed Insights doesn’t have, and even has some SEO checks.
• Search Console Core Web Vitals report. Now you can get information about your site directly from Search Console! This report is great for understanding how your site works.
• Chrome comes with several developer tools: the Core Web Vitals report (from Chrome 88) and the Core Web Vitals overlay (from Chrome 90). Many more will surely be developed.

5 tips to improve your Core Web Vitals

1. Reduce JavaScript execution

If your report shows a poor FID score, it means your page has been engaging with users for over 300 milliseconds. You should consider shortening and optimizing your JavaScript execution to reduce the time between the execution of JavaScript code and the page in your browser.

It’s also important to use as little memory as possible. Why? Every time your site code asks the browser, the browser reserves new memory, which stops JavaScript and can slow down the page. According to Google, one way to reduce execution is to defer unused JavaScript.

2. Implement lazy loading

If you’re displaying images on your site, it’s important to implement lazy loading so it doesn’t impact your site’s user experience and online vital signs. Lazy loading allows images to load as the user scrolls down the page, without slowing down the website loading speed and achieving the highest LCP rating.

Other benefits of lazy loading:

• Improve site performance
• Limit bandwidth use
• Improve SEO
• Keep visitors on the page and lower the bounce rate

Will lazy loading benefit your site? According to HubSpot, for pages containing many images, animations, or videos (also called heavy elements), lazy loading is considered mandatory. However, there is no set rule for which lazy page loading should be implemented. If your site has a low LCP rating, you should try delaying loading and then comparing the results before and after doing so.

3. Optimize and compress images

Sounds pretty obvious, doesn’t it? However, for many websites, images are the largest elements. Therefore, it’s imperative to optimize them because doing so can make your page significantly lighter, thereby improving the loading speed, LCP score, UX, and search engine rankings.

You can reduce the overall page size by compressing images into tiny JPG files and improving the LCP results. You might think that compressing images will degrade their quality or resolution. In fact, you can only see the difference when you zoom in or if you save the image in the wrong format. Always try to use JPG for landscape images and PNG for graphics. You can also use next-generation formats like JPEG 2000, JPEG XR, or WebP, but we recommend doing some research beforehand.

4. Provide proper dimensions for images and embeds

A CLS score above 0.1 is considered poor and is usually caused by elements such as images, ads, or size mismatches embedded in the CSS file. If you want to improve your CLS score, size matters. Setting the correct width and height of images and other elements helps the browser allocate the correct amount of space on the page while those elements are loading.

For example, if an image is out of size, it usually appears later on the page. While the user is consuming content, they can suddenly crash because an image without the proper size cannot load fast enough. In this case, the browser does not understand how much space is required for an image.

So that an image is not shifted, you can reserve in advance the place where it should be displayed. This will avoid displacement of the layout if the image is loaded off-screen.

5. Improve your server response time

Google says that “the longer it takes a browser to receive content from the server, the longer it takes to render anything on the screen. A faster server response time directly improves every single page-load metric, including LCP.”

Most importantly, long server response times can harm not only your SEO but also your UX.

To measure server response time, use the Time To First Byte (TTFB) metric, which determines the time it takes for the user’s web browser to receive the first byte of your page’s content. However, before you start, collect data on the current performance of your server to understand how you’re doing. After you create your report, here are some tips to help you:

• Check how fast your web hosting is
• Use a CDN for your site
• Review your plugins 

Why review plugins? Because each plugin adds additional weight to your page, which can affect your site’s performance. Leave only what is needed.

Google suggests that the server response time should be less than 600 milliseconds.

Final thoughts

Remember that the back end of your website works hand in hand with the front end, so make sure you optimize the back end to provide the best user experience in terms of loading speed, visual stability, and interactivity. It’s also helpful to not forget about Google’s existing search signals: mobile usability, safe browsing, HTTPS, and interstitial intrusiveness.

If you have any questions regarding Core Web Vitals but don’t know where to start, contact Mobindustry for a free consultation.