Core Web Vitals Explained

For some time we have heard about measures like Time To First Byte (TTFB), Load Time, Page Weight, etc. We have also heard about the adverse impact that poor performance has on users, conversions, and ultimately, sales.

Core Web Vitals goes a lot further.  It is not just about speed of delivery. It’s also about how responsive a page is, how fast the content is readable, or usable, and how jarring the progressive rendering of the page is.

Brought into the limelight by the talented boffins at Google, Core Web Vitals is set to take front and centre stage, because it will not only affect how your users interact with your site, but also how they find it, because it will affect your search rankings too.

Core Web Vitals consist of three things:

1. Largest Contentful Paint (how fast does it load?)
2. First Input Delay (how long before I can use it?)
3. Visual Stability (is it all nasty and jerky as it loads?)

Those who wish to learn more about this complex topic can go as deep as they like at https://web.dev/vitals/. 

Largest Contentful Paint

Largest Contentful Paint (LCP) is the measure of how long it takes for the bulk of the content to arrive. It is not the first content, nor necessarily all the content, but the biggest chunk of content. As of day one of The Internet, content is still king. That is why people come to your site, and they want it quickly.

First Input Delay

First Input Delay (FID) is the measure of time between the point where a user might attempt to interact with a page and the time when it will actually react. Often when a page is loading, the content is rendered, then fonts are downloaded, then more CSS, and the browser is busy re-drawing the page as assets load.

Often the JavaScript, that which enables interactivity, is last to the party, and once loaded, often has plenty of work to do before the page can work. It is this delay in interactivity, where users poke at their phones, generating nothing but frustration which the FID Core Web Vital measures. Lower time leads to less frustration, and happier users.

Cumulative Layout Shift 

Cumulative Layout Shift (CLS) measures the amount of unexpected shifts in the layout of the page. For example, when some CSS kicks in and headings get bigger, or a web font loads and all the text jerks as it is re-rendered. Images can often make a page jump when loaded, if the placeholder for the image has not already claimed the space the image needs. 

In conclusion

These three measures are quickly becoming the essential measure of web performance. There are tools to measure them built right into your browser, or you can use veteran services such as https://www.webpagetest.org/webvitals, so there's no reason not to see where you stand.

You can’t get good scores on them without having already done your homework and made sure that you are already employing good practice. Their impact will be felt in the war for the top ranking search spots in the coming months, so now is the time to act. Your users will thank you.