What Are Core Web Vitals?

#webdev #beginners #webperf #seo

What are core web vitals you ask? core web vitals are Google's new metrics for ranking performance. These numbers should matter to you if your business relies on discoverability by Search Engines, the most important of which being Google.

The folks at Google decided that, starting June 2021, they would start taking into account these performance metrics when they rank websites to show the user on Google search. That's not to say content doesn't matter. Content has and probably always will be king when it comes to search engines. However, we need to also start taking into account how our web pages perform with regards to speed and overall user experience.

Now, what are these metrics we need to focus on? Well, we have 3 that are considered the core pillars of performance: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. Let's look at what each one means individually!

Largest Contentful Paint (LCP) (measured in seconds):

It's the time it takes to load the largest element on the page. In most cases, if your website loads an image in the viewport then, it's likely to be the LCP element. Let's look at dev.to as an example on mobile.

Here you can see that the image takes up most of the space in the viewport so that's what we consider the LCP element.

_{Note: This is not the full device size. I cropped the image so that dev.to doesn't shrink it.}

A few caveats:

LCP elements don't have to be an image, they can be text elements as well. As a result, the optimization techniques differ based on what the LCP element is.
From my experience, LCP elements are usually distinct elements that load on the page and not a group of elements on the page.
The LCP element is recalculated multiple times if the DOM elements change i.e. if an element loads early and then a massive image loads afterwards, a recalculation happens and now, the LCP element is the massive image rather than the element that loaded earlier.

First Input Delay (FID) (measured in seconds):

This is one of the simplest metrics to explain. It's basically the time it takes for your website to respond to user input after they click. In more technical terms, it's the time between the user interaction with the website (onClick event) and the main thread being idle and available to respond to that user-triggered event.

Cumulative Layout Shift (CLS) (measured using a score from 0 - 1)

This is very simply the amount of unexpected movements your webpage makes across its lifetime. Basically, how much your webpage jumps around.

If we take a look at this video[1], you can see that the there is a large advertisement banner that loads well after the page's initial load causing an unexpected shift of the content underneath it giving the user the impression that the page is unstable.

A few caveats:

CLS is calculated using an equation you can find here. This equation produces a number from 0 - 1, 0 being a perfect score and 1 means that your page is moving all over the place.
Click events that result in content moving do not result in layout shifts since there is a 0.5s grace period between the user click and the content moving during that time without making your CLS score worse as you can see here
CLS is calculated across the lifetime of the page, meaning that the length of time after which the content shifted does not matter, the only factor is that it shifted.
If the content shifts outside the viewport, it probably won't contribute towards your CLS score since the user didn't see it. Keep in mind that what's shown on the viewport is different for every user owing to the fact the user can scroll and move around the page which means that CLS can affect users differently.

We'll be looking more into each metric individually and the different optimization techniques we can use for each one in upcoming articles.

[1] all credit goes to https://web.dev/cls/ for the video.