Why you should care about your Core Web Vitals
Core Web Vitals are a huge part of Google's strategy to a better, faster and more usable internet. But what are these Core Web Vitals and why should you care?
Core Web Vitals
The Core Web Vitals are a subset of the Google Web Vitals and which, according to Google, apply to all pages and should be measured by all site owners. Multiple studies have shown that the Core Web Vitals have a direct correlation to your business metrics. Moreover, Google even started using the Core Web Vitals as a deciding factor when ranking your website.
Currently the Core Web Vitals include the following metrics (This will likely change over time):
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Largest Contentful Paint (LCP)
The Largest Contentful Paint metric measures the time it takes for the largest image or text block to be visible in the main viewport. Whether an element is the largest or not is determined based on the size of the element that is visible to the user within the viewport (Above the fold).
The LCP gives a good indication of the point in time when the main content of the page was loaded.
If we measure (On a mobile device) the LCP of the page you are currently reading, we see that the hero image is considered to be the largest element and it took 2.1s to load.
So what is a good value for LCP? According to Google it should be within 2.5 seconds from when the page first starts loading.
First Input Delay (FID)
First Input Delay measures the time it takes for the page to start processing the users first interaction. For example, when the user first clicks on a button or link.
The FID is important because it gives a good impression of the page's load responsiveness.
A bad FID score is usually caused by excessive JavaScript processing during page load, blocking any JavaScript code that should handle the user interaction.
Unlike the LCP, the FID can only be measured in the field by using tools like Google Search Console or PageSpeed Insights. If you don't have field data, the Total Blocking Time (TBT) metric can be measured using Google Lighthouse, which correlates with FID in the field.
Unlike the LCP, the FID can only be measured in the field by using tools like Google Search Console or PageSpeed Insights. If you don't have field data, the Total Blocking Time (TBT) metric can be measured using Google Lighthouse, which correlates with FID in the field.
According to Google, a good value fo the FID score is 100 milliseconds or less.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures visual stability and according to Google a visual stable page is a delightful page.
A bad CLS score however, results in an undelightful experience. Everyone has experienced the following when visiting a web page: you try to click on a button or link, but in the meantime the button moves and you end up clicking on something else. This is not the experience you want to give to your visitors.
Simplified, the CLS metric measures the cumulation of layout shift during the lifespan of a page. Layout shift happens when an element is moved or it's size is changed in a rendered frame.
The exact implementation of the CLS metric is more complex. For the exact details I advice you to read this detailed description by Google.
As an example, I also measured the CLS for this page in Google Lighthouse and the score is 0.019. Google Lighthouse also shows the different frames and as you can see the elements on this page don't seem to move or change size from one frame to the other. This is a great tool to track down CLS issues.
A good score for the CLS metric is 0.1 or less, which basically means that no elements should move during page load.
How to measure
Google Lighthouse is a great tool to measure the Web Vitals of your site. You can run it by using the Google Chrome Developer Tools or by using web.dev. To find out how your visitors are really experiencing your web pages, and the only way to actually measure FID, is by using field data. This can be measured using the Core Web Vitals report in Google Search Console or Google Page Speed Insights.
Need help improving your Core Web Vitals?
At Aviva Solutions we are experts in web technology, with a relentless focus on Core Web Vitals and performance. Use our contact form or drop us a mail to book a free Core Web Vitals audit: info@unplatform.io.
