Core Web Vitals For Wordpress: How To Test And Fix

Boost your website speed & performance.

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 lots 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.

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(Lighthouse)

Google’s Pagespeed 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. Speed has been a ranking factor for desktops since 2010.

As of today, Pagespeed runs on Lighthouse, and now it not only reports Performance metrics but 3 other Lighthouse categories: Best Practices, Accessibility, and SEO.

Google 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.

What is Core Web Vitals field data and why it matters

TL:DR: Field data is data collected anonymously from Chrome real users. Lab data is a set of conditions of device and speed connection meant to aid testing closely to your user.

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.

Google prompt when downloading Google Chrome

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 compound to the Google Core Web Vitals algorithm, only field data is used.

Is 100 a good Pagespeed score for Core Web Vitals?

Pagespeed(Lighthouse) is a tool that flags and offers opportunities and diagnostics for optimizations in the lab(lab data).

Having a 100 score won’t guarantee passing field data on the Core Web Vitals(Page Experience), which is the Google search algorithm.

Pagespeed, which runs on Lighthouse “Navigation” mode, 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 of users who navigate pages beyond that.

Lighthouse has “Snapshot” mode 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 the real user experience, but they aren’t available on Pagespeed.

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 set to become a Core Web Vitals in 2024.

inp lighthouse dev tools testing — Lighthouse DevTools Timespan mode offers INP testing

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.

How to check LCP and CLS

Always strive to use field data as they are the only valid data for the Core Web Vitals.

The Search Console Core Web Vitals field data report may take a while or be delayed. To get instant field data, use Web Analytics by Cloudflare, or another RUM(Real User Monitoring).

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.

treo report — Core Web Vitals results – Treo

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. Nitropack is also a plugin to improve LCP that offers better results for higher pricing. FlyingPress is a new plugin that has been adding many features to fix LCP.

Other plugins to fix LCP:

The CLS and INP(upcoming) are metrics that don’t have much room for low-hanging fruit optimizations that can be done with plugins.

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 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.