Core Web Vitals are instrumental to the performance of a webpage on Google. And despite the myriad and maze-like network of all web metrics – how they’re measured, how to improve them, and which ones are more important than others – there is a lot of content and insight into the inner workings of them.
Google has told us that, in terms of SEO, when there are 2 pages of equally great standing of quality content, it will break the balance by using a page’s user experience to choose a winner. And so while optimizing a page’s Core Web Vitals, the initial quality of the content should not be underestimated.
There are many websites and digital tools to help measure important site metrics, such as Google’s Lighthouse, for example, which is an open-source online tool for exactly that: to improve the performance and quality of web apps. And it gives insight into the weight of Core Web Vitals as well as the weight of importance of other web metrics that accompany the broader workings of a webpage’s performance.
Core Web Vitals
The most important metrics – in the eyes of Google anyway and their search engine – consist of the three Core Web Vitals: Cumulative Layout Shift, First Input Delay, and Largest Contentful Paint. These three metrics, however, are actually weighed unequally.
The metrics that weighs the heaviest, and is thus the most influential when it comes to a page’s overall performance, is First Input Delay – however, it’s not as plain and simple as that, because we need to talk about another metric, Total Blocking Time.
First Input Delay and Total Blocking Time
Okay, so the reactivity of a page can be measured by the page’s First Input Delay (FID) or Total Blocking Time (TBT), and so both represent the same thing.
The difference between them is that FID is a field metric, which analyzes data that comes from real page visitors, and TBT is a lab metric, which analyzes data in a controlled environment with set variables. And so the difference being that FID needs user interaction to be measured and so can’t be analyzed by tools like Lighthouse. And so you can consider TBT a proxy for FID.
So with that detour complete, let’s move on.
30% First Input Delay
The heaviest Core Web Vitals metric is First Input Delay (via its proxy of Total Blocking Time). It takes 30% of the Lighthouse’s total metric environment. This puts a lot of emphasis on quickening the interactivity of a page – ideally under 100 milliseconds.
There are many things that a team can do to suppress the time of a page’s First Input Delay. For example, using a browser cache can alleviate the pressure by storing pieces of a page on the visitor’s computer, such as logos, images, vidoes, etc.; things that can be kept for when the visitor next returns.
Then there are things like keeping JavaScript to a minimum (also known as minifying) by removing any unnecessary aspects of the source code. Another measure that a team could make is to consider minimizing third-party scripts, such as social media buttons, links to external sources, and embedded videos.
25% Largest Contentful Paint
The second heaviest Core Web Vitals metric is Largest Contentful Paint. It takes 25% of Lighthouse’s total metric environment. That means that teams are going to seriously look at their LCP scores as it still makes a big contribution to a page’s performance.
Boosting your performance of Largest Contentful Paint means considering things like implementing lazy loading, which is when images only load once a site user scrolls down the page. And also, size matters to speed: eliminate large page elements that are on the page, which could be anything from headlines and tables to buttons and paragraph length.
15% Cumulative Layout Shift
The third heaviest Core Web Vitals metric is Cumulative Layout Shift. It takes up 15% of Lighthouse’s total metric environment. This means that CLS is the lightest of the Core Web Vitals yet it nevertheless part of the core and should still need some nurturing.
There are things you can do to accelerate the CLS speed, such as adding UI elements below the fold so that content at the top doesn’t suffer from moving around the screen before the page becomes interactive. In addition, setting a size for media dimensions ensures that images and videos are set in a certain place, as the user’s browser will realize the amount of space that is needed for these elements so that it won’t then resize and move around.
Non-Core metrics
As part of the wider metric environment of Google and of its Lighthouse analytical tool, there are 3 additional metrics that round out the digital experience on a page. So let’s look at these now.
10% First Contentful Paint
These 3 other metrics actually hold exactly the same weight of 10%. First Contentful Paint measures the time it takes for the page to render the first bit of content, representing the first feedback to the site visitor that the page is loading.
10% Speed Index
The Speed Index measures how fast it takes for content to visually be displayed during the loading time.
10% Time to Interactive
And finally there is Time to Interactive, which measures the time it takes for a page to be fully interactive. Some webpages may optimize the visibility of their content over the interactivity, creating an experience where a site visitor looks loaded but when they try to interact with it nothing happens. This is an indicator of a slow Time to Interactive.
PS: ArganoUV is one of the world’s leading Core Web Vitals consultancies. Contact us to see how we can work together.
