To start, what are Core Web Vitals? It is a score on 3 criteria that Google assigns you, using tools like Google PageSpeed Insights for example. The score given is a Core Web Vitals score only. Even if it influences your loading speed to a certain extent, it is not entirely dedicated to speed: your site could display in under a second but could still have a catastrophic score like 10.
Take the recommendation to remove render-blocking JavaScript that we will see just below. If you fix this problem, your score will improve greatly. However, if you measure your loading time with Pingdom, you will not see a huge improvement. This is even more concrete if you reduce your CLS — you could increase your score by +15 but see absolutely no reduction in loading time.
It is not black or white: if your score goes from 10 to 90, your loading time will improve — let us say it will go from 2.5s to 1.9s for example.
It is also not linear: if your Google score goes from 80 to 90, it is possible you will see no loading speed improvement at all.
This is because the Google PageSpeed score is primarily a global user experience score according to Google. Moreover, loading time is at least as impactful in terms of user experience. You should therefore not neglect your loading time — you risk losing users and important conversions.
You should nonetheless improve your Core Web Vitals to further optimise your user experience and loading speed. Moreover, improving these metrics improves your SEO — a ranking criterion since May 2021. You can learn more by consulting our Complete guide to optimising your SEO.
A small clarification for what follows: the Google PageSpeed score is partly a UX (user experience) score, granted — but Google recently shared that they use “page experience” in their ranking systems since mid-June 2021. However, I just said that Core Web Vitals are linked to user experience, so what is the difference?
Core Web Vitals and “page experience” are more or less linked ranking criteria. Page experience partly groups together Core Web Vitals, responsiveness, HTTPS and security.
Understanding Google PageSpeed Insights metrics
After an analysis on their Google PageSpeed tool, you will find just below your score on six criteria.
Core Web Vitals are these three criteria:
- LCP → The “Largest Contentful Paint” statistic indicates the time needed for the longest text or largest image to display.
- FID → The moment from which you can interact with page elements (for example a button)
- CLS → Cumulative Layout Shift measures the movement of visible elements in the display window. Example: “I was about to click on it! Why did it move?”
There are several factors that change your Google PageSpeed score and FID is not one of them. Yes, it is unclear, and you have certainly read before that you only need to improve these three factors. Google is clear on this: “Google’s page experience ranking evaluates each Core Web Vital individually as a ranking signal.” Knowing that “other Core Web Vitals” could lead to a different ranking.
As you will have understood, ideally you should improve all Google PageSpeed metrics.
The score is therefore important to correct, but you must not rely on this score for actual loading speed.
Lighthouse Scoring Calculator to understand how the Google PageSpeed score works
Lighthouse, Google PageSpeed’s analysis measurement service, now explains how your score is measured:
You can visit their dedicated page here:
You can see that surprisingly CLS is not very important for your score — by reducing it to the maximum you get 95 (85 since the last update):
However as mentioned above, it takes Total Blocking Time very seriously:
Could this help you reprioritise? In any case I advise you to not neglect any metric.
Edit (early 2022): Here are the new scores:
TBT (Total Blocking Time) = 30%
LCP (Largest Contentful Paint) = 25%
CLS (Cumulative Layout Shift) = 15%
FCP (First Contentful Paint) = 10%
TTI (Time to Interactive) = 10%
SI (Speed Index) = 10%
I invite you to visit their page yourself to make sure you have the correct data.
Field data and lab data
But above all, trust Google Search Console — all tools give you so-called “lab” data but these are not representative of reality. For example, GPSI will not analyse your site based on the countries from which you receive traffic (which makes a big difference). Google Search Console, on the other hand, collects so-called “field” data — so it is this data that should be considered and prioritised most. It also allows you to prioritise your tasks since the console informs you of all pages presenting problems, which saves you from having to test all your pages one by one. The console also allows you to see the name of the problematic metric per page (FID or CLS or both etc.).
Now, what probably interests you most: let us focus on improving your Core Web Vitals!
Here is a list that will help you improve your metrics. This list will directly or indirectly optimise your Core Web Vitals: FCP & TTI & SI & TBT & LCP — that is, “all” except CLS.
Is Google PageSpeed really essential?
Difficult to say — the benefits are mostly felt in managing to push through the real recommendations by adding GPSI to make audits look good. It is most important to improve a site’s loading speed to avoid users going to your competitors, but given that GPSI is a “Core Web Vitals” analysis tool, that does not apply. Overall, Core Web Vitals optimisation does not have much SEO impact in the grand scheme of things. Prioritise accordingly.
0. Analysing Core Web Vitals with the right tools
: Essential for understanding which elements consume the most on your pages.
If your images consume 50% of your page, it means you need to make changes to this page (here, remove images). You will then indirectly increase your Google Page Speed score (FCP & TTI & SI & LCP).
Use Google Chrome to understand your CWV: Right-click → Inspect → Performance → Click the reload button.
You also have access to Lighthouse from the interface and therefore the ability to generate a GPSI report.
1. Optimise on the hosting side
- Cache directly on the server side
- NGINX & Expires headers
- Cloud server
- Premium DNS
2. Use these optimisation techniques
- Caching
- GZIP compression
- Preloading cache, links, DNS requests and fonts
- Minify CSS & JS & HTML files
- Combine CSS and JavaScript files
- Eliminate render-blocking resources (CSS & JS)
- Defer JavaScript execution
- Optimise fonts
- Implement a CDN
3. Optimise images, videos and iFrames
- Optimise image weight by compressing them.
- Do not use images that are too large if it adds no value — if you upload an image at 3000×3000 but display it at 800×800 in CSS, upload it directly at 800×800.
- Serve your images in .webp format, an image format adapted for the web. You could also use the .svg format for your images.
- Use the right video formats: Lottie and/or WebM are ideal for serving your videos.
- Use a CDN to serve your images, videos, fonts and other assets
- Defer loading of your images, videos and iFrames with LazyLoad
(4. If you use WordPress)
- Sort and delete plugins
- Disable specific plugins for certain pages
- Use a lightweight WordPress theme like GeneratePress
- Clean content, comments, database transients
- Disable Heartbeat and/or Heartbeat Frequency
- Disable Google Fonts
- Disable comments
- Autosave interval
- Disable scripts
- Disable cart fragmentation
- Disable status meta box
- Disable widgets
- Disable Google Maps
- Disable emojis
- Disable embeds
- Disable XML-RPC
- Remove jQuery Migrate
Consult our Complete guide to improving WordPress site speed.
5. Reduce CLS (cumulative layout shift)
On the other hand, as seen previously, this list will not improve your CLS. Let us look in detail at how to specifically resolve this metric.
To improve CLS, make sure you understand what it corresponds to. CLS is simply a “disruptive” element — for example text that shifts, an advert that shifts text, an overly intrusive pop-up, etc.
Google PageSpeed will mostly give you problems related to this, such as the section “Image elements do not have explicit width and height”.
However I strongly recommend using the Google Chrome browser, which has incredible developer tools. For CLS, enable “screenshots” then hover with your mouse to see frame by frame what is actually happening in image form — you will then see the shifts yourself. By selecting a CLS block, you will also get the name of the offending element (div, class…) and additional resources in “Summary” such as the total CLS score for that element, how it moves, etc.
Let us now look at what could be the general causes of CLS and how to improve them:
1. Define exact dimensions for images, videos, iFrames, etc.
For example, most WordPress themes do not allocate a defined space for your images and use this CSS:
your-image {
width: 100%;
height: auto;
}
Instead of the “classic method”:
<img src=”your-image.webp” width=”800″ height=”400″ alt=”integrate webp format”>
You must therefore give an explicit value so that your images, iFrames, videos and other elements are correctly defined and no element shifts. Otherwise these elements will load and organise themselves based on their appearance on screen — which is, let us be honest, terrible.
To address this problem you can also define a ratio so that the image loads right at the beginning of the calculation:
your-image {
aspect-ratio: attr(width) / attr(height);
}
2. External dynamic content
As you probably suspect, adverts are important shifting factors and a cause of high CLS.
To solve this problem, as just mentioned, you need to allocate dedicated space for them. And in all cases — whether they display or not — you must reserve static space for them. For example, if the user uses Adblock (an ad blocker), your elements could shift because the advert would not display, but there can also be other causes.
You should also check how you make your newsletter signup appear and any form of pop-up, GDPR module, etc.
3. Fonts
You need to check these elements:
- Your font is being replaced by your fallback font (“FOUT”: unstyled text)
- The font encounters a problem and is invisible until resolved
To address these problems you can use these methods:
- Display fonts using optional: font-display: optional
- Preload fonts: <link rel=”preload”>
4. Animations
Certain animations are no longer recommended and could create layout shifts. For example, it is better to use transform or opacity rather than box-shadow or box-sizing.
You can consult these webpages for more information: and .
Summary: core web vitals & Google PageSpeed
I hope this guide has helped you see more clearly about Core Web Vitals and has helped you improve your score!
Do not aim for a score of 100 — it is useless and practically impossible, especially since with algorithm changes you could be disappointed. A score like 90 is more than sufficient (on Google Search Console).
Feel free to share your experience in the comments and tell us how this article helped you and whether it taught you something!