Google is constantly updating its algorithm and if you don’t keep up with each Google “Core Update,” you will be faced with a situation where you are on the outside looking in, and you’ll fail to understand why even with a well-researched SEO strategy your site was bumped from the first page of the search results.
There is a good probability that you have been doing everything right up until now — your SEO may be solid to get high-quality search results, Google will often update its algorithm. The good thing is that these changes are usually transparent.
Google has come up with what they refer to as Web Vitals, which are the core metrics that they use to classify a healthy website. The Web Vitals are key to offering a good user experience.
They include — loading, interactivity, and visual stability. In this post, you will learn how Google measures these metrics as numbers.
Loading: Largest Contentful Paint (LCP)
What is it: To put it simply, largest contentful paint or LCP is a metric that measures how fast your largest page element for example an image or a video renders. Webmasters or admins should aim for a time that’s under 2.5 seconds. Anything above 4 seconds is poor.
Why it’s important: In general, users consider the largest element on your web page to be the core content — or in other words, it’s the main content that they were searching for. It’s the visual confirmation that they are going to get useful information from that page.
How it’s measured: LCP is measured by accounting for the visible portion of a web page. Interactions such as keystrokes, scrolling, or clicking are not taken into account.
How to improve: Google’s PageSpeed Insights tool can be used to pinpoint slow-loading pages. This information can then be used to optimize for fast server response times as well as resource load times, or even deferring render-blocking CSS and JavaScript scripts without affecting what’s rendered above the fold.
Interactivity: First Input Delay (FID)
What it is: First input delay (FID) is a metric that measures the time that it takes for specific user input, for example, a click or a keypress, and the time it takes for a browser’s event handler to process it. A good score is anything that is below 100 milliseconds while a poor score is anything that is more than 300 milliseconds.
Why it’s important: It’s frustrating to users when they come across unresponsive pages. First Input Delay came to be a core web vital due to the fact that many delays or glitches in interactivity occur when pages are loading.
How it’s measured: A good analogy for understanding First Input Delay is to think of it from the perspective of a child (in this case, the user) requesting their parent (in this case, the main task thread) for a candy bar while they parent is on a call. Now if the parent is engrossed in a deep conversation with the person on the other end of the line (or network requests), they’ll signal to the child to wait — which will result in a larger First Input Delay. But if they pause the conversation, the parent can be in a position to promptly begin to respond to the child’s request — a shorter First Input Delay.
How to improve: Because First Input Delay relies on whether the main thread is busy or not, you will encounter discrepancies between the results because if there is no user input, there won’t be any value recorded.
For more consistent results, Google recommends targeting a related metric that is known as total blocking time or TBT. TBT refers to the amount of time the main thread cannot be interrupted because it’s stuck on a task because it’s taken more than 50 milliseconds. You can provide some relief to the main thread by minimizing the request counts as well as the transfer size, and also limiting third-party code that burdens the main thread.
Visual Stability: Cumulative Layout Shift (CLS)
What it is: Cumulative layout shift is a metric that is used to measure how often page elements move around as a page is loading. This largely happens due to freshly loaded elements rendering above the already rendered elements, which shifts them further down the page. A good CLS score is smaller than 0.1 while a poor one is greater than 0.25.
Why it’s important: It’s annoying for users when they inadvertently click on an unintended link, or shift to a different paragraph, or even clicking on an empty space due to a page shift.
How it’s measured: Cumulative layout shift score is measured using a mathematical formula: i.e, Impact Fraction X Distance Fraction. The two values are expressed as decimals.
The Impact Fraction is the percentage of the viewport that the unstable page elements occupy between each frame. The Distance Fraction refers to the distance that an unstable element shifts in relation to the viewport’s width or height.
How to improve?
You should account for and plan for the space images and videos take up to keep all elements proportional as the page loads. It’s also important that you avoid inserting new content above the previously rendered content — unless the user triggers it. You should also use the CSS transform property when creating animations and transitions to maintain an intact layout.