Essential Guide to Core Web Vitals: Part 1

What are Core Web Vitals?

Web Vitals, and particularly Core Web Vitals, are a set of metrics developed by Google to measure and improve user experience on the web. Business or site owners can view overall user experience from these vitals without hiring performance experts. Currently, there are three aspects consisting of the Core Web Vitals. These are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLP).

• LCP measures the loading performance of a page. To provide a good user experience having < 2.5 seconds when the page starts loading would be ideal.
• INP measures the interactivity of the page. The ideal score to have a good user experience is < 200 milliseconds.
• CLS measures the visual stability of the page. Maintaining a score of < 0.1 would result in a good user experience.

We know what each metric measures but really, what are they? Let’s explore each metric. Let’s start with the LCP. LCP reports the render time of the largest content (like image, video, or text block) that is visible in the initial viewport, relative to the first second the user loaded the page. Let’s take a look at a simple example.

In the illustration above, let’s just say we have 4 major components in the initial viewport. These are the company logo, medium image element (with red background), text block element, and the large image element (with blue background). At initial load of the page, it loads these elements, all elements can be considered LCP elements (since they are image, text block or block elements) but LCP will only consider the largest element visible in the viewport. This means that the “Large Image Element” (with blue background) will be the LCP element. LCP will be the time it takes to load and render the element in the page relative to the initial load of the page. Knowing these about LCP, one important thing to know is how it is measured. LCP can be measured using field and lab data. For field data, which are actual data from users who are loading and interacting with the page, we can use Chrome User Experience Report (CrUX), PageSpeed Insights, Google Search Console, and web-vitals JavaScript library. And for lab data, which utilizes simulated and controlled environments, we can use Chrome DevTools, Lighthouse, PageSpeed Insights, and WebPageTest. But for now, in this article, we’ll just focus on the LCP metric.

For now let’s see why it’s important to have a good LCP on our website, as well as some ways to improve the score. Imagine you are visiting a website you are excited to explore, then, after pressing the enter key in your keyboard, you just see a white screen for a few seconds and slowly load the components even though you have a blazingly fast computer and internet connection. Most likely as a user, you will be frustrated and disappointed, just like the meme below, right?

This kind of experience will impact your user’s experience on the website. They might decide to close their tab and check other competitors that have better user experience and you just lost a viable customer. Having an LCP score of less than 2.5 seconds creates a positive initial impression for the users, which may result in users staying and engaging in the website, and even completing a transaction, whatever your service is. Before we proceed on ways to improve your LCP score, let’s see what are the factors affecting the overall score of it.

Let’s discuss some general ideas to improve overall LCP score. From the waterfall diagram, we can see that there are two delays affecting the score, Resource load and Element render delays. We want these delays to be as close as zero as possible.

Eliminate resource load delay

From the waterfall diagram we can see that Image resource only loads once Stylesheet (purple) is loaded. To reduce or eliminate resource load delay we want to ensure that Image resource also loads once the first resource starts loading. Some examples are the following:

1. Make sure that the LCP element (image element) should have src/srcset attributes present in the initial HTML markup.
2. If the LCP element requires css background, preload it using <link> in the HTML markup.

Another important thing to remember is to not lazy load LCP image. Lazy loading may result in unnecessary resource load delay since the element will only appear once the layout confirms that image is in the viewport. Instead of lazy loading, utilize the fetchpriority attribute of the image element and set it to high. Just make sure that you set this attribute to the most probable LCP element. This will put the fetch priority of the element relative to other images. 

Eliminate element render delay

So once the LCP resource is loaded together with first resources, it needs to be rendered as soon as possible. But, sometimes a stylesheet is much larger in size and may take more time to load, see sample illustration. This will block the rendering of the LCP element.

The best way to resolve this problem is to reduce the size of the stylesheet. This can be done by removing unused CSS, deferring non-critical CSS, and minifying/compressing CSS. Also, it's also best to defer or inline render-block scripts. Another option is to utilize server-side rendering (or even static site generation). With this technique, image resources will be discoverable from the HTML source and page content won’t require JavaScript requests to finish before it can render. Lastly, is to break up long tasks into smaller bits. Because even if the resource is loaded but the main thread is still working, it will still not render the LCP element.

Reduce resource load duration

Now, let’s move on how to optimize the load duration. The main goal in this step is to reduce the size of the LCP resource without sacrificing quality. What we can do with the resource itself is to serve its optimal size, use modern image formats, compressing images, and reducing web font size. Another way is to reduce the distance the resource has to travel using image content delivery network (CDN). With CDN, we can reduce the load times by getting the servers as geographically near to your users as possible. This may add cost depending on the service you may need in your business. Lastly, proper caching will also improve the LCP by reducing network latency upon subsequent requests. One last thing for improvement is reducing time to first byte (TTFB). TTFB is primarily a measure of the server’s responsiveness. It reflects how long it takes for the server to receive the initial request and send back the first byte of HTML. This means that optimization should be done on the server-side and is largely a backend domain.

Conclusion

Making your website blazingly fast is quite complex and tricky. It involves the server sending the page quickly, images loading fast, unblocking the main thread to render content, etc. But it's worth the effort because a fast and snappy website results in a good user experience, keeping visitors engaged, reducing bounce rates, and encouraging them to explore more of your content. We’ll take a look at INP in the next article.