What are core web vitals

Web Vitals are metrics, created by Google, with the aim of quantifying the user experience of a web site. So Google found a way to measure not only the performance of your site, but also good experiences in general.

Core Web Vitals

Core Web Vitals are a subset of Web Vitals, that Google believes should be measured and kept optimal for each web page of your site.

Currently 3 has been identified, and each one measure a different aspect of the user experience:

• LCP (Largest Contenful Paint): Load performance
• FID (First Input Delay): Interactivity
• CLS (Cumulative Layout Shift): Layout stability

How do I measure them?

Thanks to Google, there are several tools to measure these metrics.

PageSpeed Insights is a web site can measure core web vitals, and others metrics, moreover it provides you with guidance to improve them. You’ll just need to write the url of the page and press “Analyze”. The only thing you should care about is to write the correct url, and not one with a redirect that will slow down the loading.

Lighthouse is a tool available in a web version and also as a local tool in the chrome devtools. It is helpful to test changes, without making a deploy in a remote environment. It can also measure other aspect, like Accessibility, SEO, Best Practices, and PWA abilities.

Both of them measure core web vitals simulating a mid tier device (Moto G4), with slow network (Fast 3G), but PageSpeed will also show you anonymous data collected from real user experiences, if their are available.

Largest Contenful Paint

This metric measure loading speed og a web page. To do so, it doesn’t take into account the server response time, nor the time your web page show the first conent (First Contentful Paint). What it measure, instead, is the time necessary to show the largest content.

For content is intended only what as a meaning for the user, so images, videos, or blocks of text.

Largest, instead, means… very large. But notice:

• If the content overflow viewport dimensions, the excess it’s not considered.
• Margins, paddings, borders applied by css, are not considered.
• For resized images it counts the minimun between the effective image size (intrinsic size) and the visible image size.

Thanks to these rules, it is not enough to have a super fast server, or a CDN, but your web page should show the most important contents fast as possible.

For example, if our web page load in 0.5s, but then it shows a spinner and make users wait another 4 seconds to show the interesting part, then this metric will catch us, and we will get a bad looking red score 🔴

First Input Delay

This metric, instead, measure the time that pass between first interaction by the user and the start of the processing by the browser.

For example, a user open your web site and as a first thing he clicks on a link/button. To have a good score you should handle that interaction within 100ms.

It does not mean you should complete the entire operation in under 100ms, but that the event handler should start in less than that time. So the browser, who handle these event handlers, should be free enough from others sync operations.

Furthermore this metric consider only the first interaction, not because the others are not important, but because the first is the most important to make a good impression, and it is also the most complex to handle considering that the browser could still be loading parts of the website.

Note that FID cannot be measured on Lighthouse nor on Pagespeed, because real users interactions are needed. But, you can use another metric, Total Blocking Time or TBT. This is easily measured on both the tools, and improving it, usually improve FID also.

Cumulative Layout Shift

Last but not least, the metric that measure layout stability, CLS. This one, with a complex formula, sums up all the singles unexpected layout shift.

Another example: A user load a website, it then sees a beautiful, reddish button. He’s going to click, but unexpectedly an advertising loads and makes the button shift. The user ends clicking nothing, or worse it clicks on the ad. Seems familiar?

CLS is an important metric, and sometimes it’s also difficult to optimize, given that it can be caused by many causes. Some of most common are:

• Images without a fixed dimension, that after loading make the layout move.
• Custom fonts, that make the text shift.
• Ads/iframes/embeds without fixed dimensions
• Dinamically loaded contents, like this post 😊

In general, every unexpected movement, that the user has not asked for. For example if the layout shift happen after a user click, this is not annoying.

CLS measure shifts relative to the viewport, so if a change happen in a not visible area it’s unaccounted.

To measure it you can simply use Lighthouse, that will also give you some advices to improve and debug.

Hurry Up!

Google announced that these core web vitals will affect ranking starting from may 2021, and will become part of the already existing signals for the page experience (like https use and mobile friendliness). Google is working on a visible indicator for pages that respect all these metrics.

So if you have website, I advice you to start using some of the tools (Lighthouse or PagesSpeed) to improve the core web vitals, so you are ready for may!