The Core Web Vitals metrics are a part of the Page Experience Google ranking factor. It’s an effort from Google to improve the page experience of websites. To come up with the metrics and their thresholds, Google used a bunch of heuristics and studies to reach the numbers.
Core Web Vitals may still be complex, but you can grasp the concepts pretty easily and understand the impact of it in SEO on this post.
An important reminder is that Core Web Vitals isn’t Pagespeed(Lighthouse) and vice-versa. Loosely optimizing for Pagespeed by addressing some recommendations can harm your Core Web Vitals metrics.
This guide covers how to interpret and improve the Core Web Vitals, including popular Wordpress plugins such as Woocommerce and Elementor, with tips for fixing LCP, CLS, and INP issues.
What are Core Web Vitals
The Core Web Vitals is an effort from Google to improve the page experience of websites. It’s part of the Page Experience update. The 3 current metrics are CLS(Cumulative Layout Shift), which measures the visual stability experience of the website. LCP(Largest Contentful Paint) measures the loading experience of the website. FID(First Input Delay) measures the interactivity experience.
Alongside Mobile-friendly, HTTPS, and No intrusive interstitials, they form what Google calls Search Signals for Page Experience, which is to be used as a ranking algorithm factor in Google’s Search.
Google said it intends to update the Page Experience Signals on an annual basis, with INP (Interaction to Next Paint) which measures responsiveness, replacing FID in 2024.
The Core Web Vitals metrics are ranked as “Good”, “Needs Improvement”, or “Poor” labels, followed by green, yellow, and red colors.
- To get the LCP “Good” label, the metric should have a load within 2.5 seconds of when the page first starts loading.
- To get the FID “Good” label, pages should have an FID of 100 milliseconds or less.
- To get the CLS “Good” label, pages should maintain a CLS of 0.1 seconds or less.
Google Search Console marks your site with either “Poor” or “Needs Improvements” when you don’t hit the “Good” threshold for any current metrics, LCP, CLS, or FID(INP in the future). The metrics are based on 75% of visits(page navigation) to all URLs in the group.
You can get Core Web Vitals data for origin(aggregate of all pages) or a page if it has enough data(enough traffic).
Currently, Core Web Vitals are only supported by Chrome browsers, with Chrome IOS excluded due to limitations.
Core Web Vitals vs Pagespeed (or Lighthouse)
Google’s Pagespeed Insights isn’t a direct ranking factor. It was a tool primarily meant to help with the page speed of the site, as Google announced in 2018 that its algorithms would begin to consider the ‘page speed’ of sites as a ranking factor for mobile. In the same year, Google started to use Lighthouse as the Pagespeed engine. Speed has been an algorithm factor for desktops since 2010
As of today, Pagespeed still runs on Lighthouse, and now it doesn’t only report Performance metrics but other 3 other Lighthouse categories: Best Practices, Accessibility, and SEO.
Lighthouse(used as Pagespeed engine)score may evolve in each major new release. In the version 10 update, it had a breaking change, removing TTI from the calculation and giving CLS a larger score weight, now representing 25% of the total.
Lighthouse used to be able to only compute lab data during the initial page load, making it hard to analyze user interaction. But now it currently supports INP(Interaction to Next Paint) testing in the “Timespan” mode. This mode isn’t available on Pagespeed Insights.
Google also updated the Pagespeed interface and now the Core Web Vitals metrics field data metrics have more prominence than the Pagespeed score, showing the importance of having good field data metrics, and the difference between field and lab data.
Is 100 a good Pagespeed score for Core Web Vitals?
Lighthouse is a tool that flags and offers opportunities and diagnostics for optimizations. It runs default on mobile device settings.
Having a 100 score won’t guarantee passing field data on the Core Web Vitals(Page Experience), which is a real Google search algorithm. Lighthouse “Navigation” mode, the default when testing, only checks for the initial page load or above-the-fold page load, which means it may differ a lot from the real user experience from users who navigate the page beyond that.
Serving users with a good initial loading is primordial but you may find that optimizing beyond it and “X metrics” will have a net positive impact.
Lighthouse addressed this and added “Snapshot” which offers a page test without a reload, and Timespan which tests recording the user flow. Both of these options go beyond the initial page loading, offering insights into your website closer to real user experience.
With Lighthouse Snapshot you can scroll to an important section of the website and run a test. You will get performance insights from the top till the section you’ve scrolled. In Lighthouse Timespan you’re able to test INP, which is to become a Core Web Vitals in 2024. You can also test INP with Web Vitals Extension.
Lab data(Lighthouse) vs field data
Field data from Core Web Vitals is a historical report about how a particular URL has performed and represents anonymized performance data from users in the real world on a variety of devices and network conditions.
The Core Web Vitals field data comes from users who have opted-in to send anonymous data about usage statistic reporting, have synced their browsing history, and haven’t set up a Sync passphrase*. Field data is the one used for Google ranking.
The data is then compiled in the Chrome User Experience Report(CruX) database. Core Web Vitals are only compatible with Chrome browsers.
Core Web Vitals lab data is data based on a simulated load of a page on a single device and a fixed set of network conditions. When running Pagespeed or Gtmetrix, you’re getting lab data.
As a result, the values between lab data and field data may differ. Lab data doesn’t compounds to the Google Core Web Vitals algorithm, only field data is used.
How to check LCP and CLS
Always strive to check for Core Web Vitals field data as they are the only valid data for the algorithm. Field data is data collected anonymously from Chrome real users. The Search Console Core Web Vitals data report may take a while or be delayed. To get instant field data, use Web Analytics by Cloudflare.
For historical field data, you can use Treo. It offers a visualization of your field data for the last 28-day average aggregate by month. It also offers filtering metrics per country.
Lab data is a set of conditions of device and speed connection meant to aid testing closely to your user. For testing Core Web Vitals lab data use WebPagetest, Pagespeed, or Web Vitals for CLS. For accurate lab data, you should test simulating closely to the device and speed connection of your user base.
How to fix Core Web Vitals in WordPress
Perfmatters and Wp Rocket plugins have multiple features to improve LCP and CLS metrics. Nitropack is also a plugin to improve Core Web Vitals that offers better results for higher pricing. FlyingPress has been adding many features to fix Core Web Vitals. Other plugins:
- Bunny CDN
- Jetpack Boost (freemium)
- Free image CDNs or fastest CDNs
- Cloudflare APO or fastest hosting
How to fix LCP in Wordpress
Consider the following solutions for solving or improving LCP issues:
- Set the Fetch Priority High of the LCP. Setting the priority of your LCP image, including background images, as “high” can make it appear early, improving the metric.
- Delay, Defer, or inline render-blocking JavaScript. Delaying JS that appears before LCP will improve it. Do a test to find if there are non-essential Js loading before the LCP.
- Setup Critical CSS. Critical CSS can make the page render faster, including the LCP.
- Remove unused CSS. Removing unused CSS files that load before the LCP will lead to better LCP metrics.
- Host Google Fonts locally. Loading Google Fonts does have an impact on performance. Consider running them locally.
- Avoid Combine CSS or JS. Combining CSS or JS can have a negative impact on low-speed internet connections.
- Switch to leaner HTML elements
- Use CDN for images and SVGs
- Use Cloudflare APO
- Improve icon font loading or switch icons to SVG
- Limit access from users with bad Core Web Vitals. Core Web Vitals are global, even as country page-level data exists. This means if you’re serving with bad metrics in a specific country, it will have an impact on the overall metrics.
How to fix CLS in Wordpress
Consider the following solutions for solving or improving CLS issues:
- Edit the element layout
- Unload Large Unused CSS in between the loading of elements
- Use Critical CSS or Remove Unused CSS
- Avoid Sliders plugins
- Apply correct image and div sizing
- Move CSS from theme editor to child theme style.css
- Prefer themes and plugins that use transform animations
How to fix INP in Wordpress
Consider the following solutions for solving or improving INP issues:
- Choose plugin or theme features wisely
- Run third-party scripts off the main thread in Web workers
- Choose Iframes wisely
Get your Core Web Vitals optimized and an SEO boost