Core Web Vitals are the 3 KPIs put forward by Google to evaluate the quality of the user experience.
A study by the Mountain View firm shows that when Core Web Vitals are good, Internet users are 24% less likely to leave a web page before it finishes loading. You’ve certainly worked hard to attract customers, so pamper them with a user experience that makes them want to go to the end of the conversion funnel thanks to fast pages!
To improve Core Web Vitals, the first step is to test them. With which tools? How do you know if they are good, and what are the techniques to optimize them? What is the link with the PageSpeed score? We answer all these questions, follow the guide.
Core Web Vitals, Google PageSpeed score: understanding Google’s KPIs
If loading speed has an indisputable impact on the quality of the user experience, let’s see what it means in concrete terms for SEO.
Do Core Web Vitals impact SEO?
Core Web Vitals allow you to evaluate 3 aspects of the user experience:
- the speed of rendering the largest element in terms of size, with the Largest Contentful Paint (LCP) which must occur within 2.5 seconds after the page starts loading;
- interactivity with First Input Delay (FID ) , the time when a page can first respond to a user’s interactions, which must be less than 100 ms;
- visual stability of pages using the Cumulative Layout Shift (CLS) score which must be less than 0.1.
These webperf KPIs have been part of Google’s ranking algorithm since the Page Experience update , in other words, they are a signal for natural referencing.
More precisely, although the quality of the content is always the most important criterion, loading speed can become an element to stand out from competing sites whose content quality is equivalent.
Impact of loading speed on page ranking in search results for a competitive query
In addition to the role Core Web Vitals can play in ranking on Google’s SERP, they also account for 70% of the PageSpeed score calculation .
What is the PageSpeed score? It is a score from 0 to 100 that Google assigns to evaluate web performance. This performance score is itself calculated based on different webperf metrics that each have a different weight, including the Core Web Vitals – to which are added the Speed Index , the First Contentful Paint and the Time To Interactive ; and for the evaluation of interactivity, the FID is replaced by the Total Blocking Time .
While Core Web Vitals do matter for SEO and are part of the PageSpeed score, the PageSpeed score does not matter for SEO .
Now that you understand the connection between Core Web Vitals and PageSpeed Insights score, you may be wondering if there is also a connection with one of Google’s other web performance measurement tools: Lighthouse.
What is the relationship between Core Web Vitals, PageSpeed Insights and Lighthouse?
We have just seen that Core Web Vitals count in the calculation of the Google PageSpeed score. And Lighthouse in all this? To establish its performance score, you should know that PageSpeed takes the Lighthouse score by emulating a slow 4G connection. In both cases, these are performance measurements in a synthetic environment , but in slightly different test conditions, and in all cases, defined by Google.
Now let’s go back to Core Web Vitals, and detail a selection of testing tools.
Tools to measure Core Web Vitals
Google Search Console
You can track your performance from the Core Web Vitals tab in Google Search Console .
The tool collects data from real users, and groups pages based on their similarities, for which it diagnoses performance issues:
Testing Core Web Vitals with WebPageTest
WebPageTest is a reference tool for webperf experts . It provides a lot of information, from the most basic to the most detailed, to evaluate loading speed and diagnose performance problems.
From the home page, a drop-down menu allows you to select the Core Web Vitals to test a URL.
In addition to the scores for each metric, WebPageTest provides details on the LCP image, allows you to visualize the page load as a filmstrip or video, and also shows details on the browser’s main thread blocking times during loading (as seen in the image below, FID is replaced by TBT since this is data collected in a synthetic environment, and FID can only be collected with real data since it requires user interaction).
Testing Core Web Vitals with PageSpeed Insights Field Data
On its results page, PageSpeed Insights displays Core Web Vitals for mobile and desktop devices , for the page tested and for the domain (Origin tab).
This data comes from its Chrome User eXperience Report (CrUX) panel, which collects browsing data from real Chrome users around the world (Real User Monitoring, or field data). A box mentions the testing conditions, and in case your site has a small audience and is not part of Google’s CrUX panel, you will only have access to a portion of the Field data.
You will notice that the results for Field data are different from those in the following Lab data section . Why? Because the data is not collected under the same conditions. Indeed, as we mentioned earlier, Field data is field data (Real User Monitoring) while Lab data is synthetic data.
Field data section of Google PageSpeed Insights results page
Testing Core Web Vitals with the Web Vitals Chrome Extension
You can also create reports on Core Web Vitals using the Web Vitals Chrome extension .
This extension allows you to monitor the performance of your own sites, your competitors’ sites, or any web page in general.
Measuring Core Web Vitals in JavaScript
Finally, for the more technical profiles, Core Web Vitals can be measured in JavaScript using the web-vitals library . Measuring each metric is as simple as a function call as explained in this article ; and Google provides documentation for a complete and detailed usage of the API.
To track these metrics directly via native web APIs, here are implementation details:
- Measuring LCP in JavaScript
- Measuring FID in JavaScript
- Measuring CLS in JavaScript
After this overview of Core Web Vitals testing methods, let’s see how to analyze the results.
Identify what is slowing down the loading of your web pages
With Google Search Console
From the Core Web Vitals tab of Google Search Console, select one of the issues reported by Google from the “ Why URLs aren’t considered good ” list.
Google then indicates examples of pages on which it has noticed slowness, and you can then concentrate your efforts on providing the appropriate solutions.
Note that Google provides data for groups of similar pages, not individual pages, based on the assumption that if pages look similar, they are likely to have the same issues. You can still see the details of the URLs that make up the group by clicking on the example URL.
Note that if in the same group you notice many pages for which Google has not retrieved enough data, you can always test the URLs with synthetic monitoring tools (Lab Data section of PageSpeed Insights, or WebPageTest, for example).
With WebPageTest
As we mentioned earlier, WebPageTest is a real goldmine for deciphering your performance.
The tool offers different options to visualize the loading of a web page in filmstrip format ( frame by frame ), video, but also in waterfall form .
What is a waterfall ? It is a detailed view of the loading of all the elements that make up a page: images, fonts , scripts, etc. with details on the time required. The fact that each resource is represented by a separate line allows you to immediately see which ones are causing problems for loading speed.
The goal: to have as few lines as possible, and for them to be as short and as far to the left as possible!
Example of a waterfall with the time needed for each resource to load. The more lines there are, the more resources there are to load; and the longer the colored lines are, the slower they are displayed.
With PageSpeed Insights
On the PageSpeed results page, Google provides tips for optimizing the tested pages to make them load faster.
These tips are very interesting, but be careful, they remain general good practices which are not always adapted to your technical context or your business needs – and the estimated gains are often much too optimistic.
We advise you to call on web performance experts before applying them, otherwise you could have unpleasant surprises regarding your loading speed if you follow these recommendations to the letter without adapting them or putting them together.
One of the great classics of counterproductive optimization: indiscriminate lazyloading. Yes! Lazyloading is very interesting, but if you lazyload your main image, you risk degrading your LCP. Too bad, right?
Also, delaying the loading of scripts is a good practice, but if you are doing A/B testing, since this script is used to define the content of the page, you should prioritize its execution.
Google recommendations on the PageSpeed Insights results page to optimize loading speed
Set a Performance Budget
Once you have measured your performance, based on your business and professional priorities, define the KPIs to improve, the only ones to achieve and those not to exceed.
Observing your competitors is an interesting point of reference to situate yourself and assess the thresholds that you must set. Each market has its constraints, and the average scores and performance indicators can vary greatly from one to another. For example, to challenge yourself in the e-commerce, media or travel sectors, we recommend that you consult the webperf ranking that we publish each month with the JDN.
In absolute terms, establishing a Performance Budget for Core Web Vitals is “pretty simple”, Google has set the rules.
But you could also focus on other KPIs, or more specific aspects about your overall performance. For example, setting a maximum page weight not to be exceeded, a Speed Index to reach for all your pages, or for certain categories…
The Performance Budget aims to define common objectives for all teams, technical, marketing, product, design, etc. in order to align all stakeholders on the performances to be achieved, and also to have safeguards.
Coming back to Core Web Vitals, you should focus primarily on:
- the pages that are most important to your business,
- those with the highest traffic,
- and those where the competition is strongest with your competitors in Google search results.
How to identify webperf optimizations that will have the greatest impact on Core Web Vitals
As we have highlighted, each site has its own business challenges and technical constraints, which is why optimizations must be deployed intelligently to be effective.
For example, a site whose business model is based on advertising cannot afford to drastically defer all third-party scripts linked to advertising, at the risk of upsetting its advertisers; and although the weight of pages must be limited, an e-commerce site cannot do without visuals and features with added value for its users. Web performance is the art of compromise!
So, to help you sort through and correctly prioritize your projects to optimize your Core Web Vitals and your web performance in general, let’s look at the main levers for each metric.
Tips for optimizing Largest Contentful Paint
- Compress, resize and crop images to display quickly and at the right dimensions on all screens
- Preload important resources
- Cache your resources
- Use a CDN
- Optimize your assets – especially fonts , CSS and JavaScript files to reduce their blocking time (defer non-critical files, compress and minify)
Tips for optimizing Cumulative Layout Shift
- Reserve a location with the correct dimensions for the images
- Reserve a space of the right dimensions for widgets and third-party features, or any embedded content
- Allow enough space for your text content if it is initially displayed in a default font, or if it is not displayed until the font file is loaded ( FOUT / FOIT )
Tips for optimizing First Input Delay
- Split Long Tasks (tasks that take more than 50ms for your browser)
- Compress, minify and concatenate JavaScript files
- Defer loading of non-essential scripts until the beginning of page load
- Remove scripts that are not used to avoid loading them unnecessarily
Test optimizations locally before taking action
With WebPageTest or Chrome DevTools’ Local Override tool , test the impact of optimizations locally, without modifying your source code.
On particularly slow pages, this is a good way to identify the levers to prioritize: for example, delaying the loading of scripts, optimizing images, optimizing CSS, etc. before applying the modifications.
On sites with many pages, such as e-commerce sites, it is obviously out of the question to test and optimize the pages one by one, it would be much too tedious. In addition, as we have seen, some optimizations involve making compromises on the technical or business level.
The configuration and intelligent articulation of webperf optimizations are therefore essential to obtain the best performances.
Automate the application of webperf optimization techniques
For optimal and stable performance over time without the need for maintenance, there is only one solution: automation!
This allows all pages of a website to be processed instantly, for all devices and all browsers.
All resources – images, fonts, HTML code, CSS, JavaScript… – are optimized, and you no longer need to choose between rich interface and content and loading speed.
Take advantage of all your value-added features on a site that remains responsive and loads quickly, save time, relieve your technical teams… and enrich your content while maintaining your performance.
Your Core Web Vitals are thus always green, you meet Google’s requirements to support your SEO, and you also increase your PageSpeed score effortlessly!
Wondering what Fasterize actually does to optimize your performance? Find out in this infographic: