Table of Contents

Heard about this new Google Core Web Vitals project but not sure how it connects to your WordPress site? Or maybe you have no idea what the Core Web Vitals project is and why it matters for WordPress?

Either way, this post is going to cover everything you need to know about Core Web Vitals and WordPress. I’ll tell you what they are, how to test them, and how to improve your site’s scores to create a better user experience and maybe even boost your search rankings in 2021 and beyond.

There’s a lot to cover, so let’s get started…

What Are Google Core Web Vitals?

Core Web Vitals are a new initiative from Google designed to improve user experience on the web. Instead of focusing on generic metrics like how long it takes your entire website to load, Core Web Vitals are more focused on how your site’s performance connects to user experience.

For example, how long does it take for your site’s most important content to load? How long it takes your entire site to load isn’t necessarily the most important metric for user experience. Instead, most users care about how soon they can start consuming your content, which is part of what the Core Web Vitals metrics try to measure.

Currently, there are three different metrics that go into Core Web Vitals (some of which have already been promoted by Google under different branding). I’ll cover each metric in more detail below, but here’s a quick summary of what they are:

  • Largest Contentful Paint (LCP) – how long it takes for the most meaningful content on your site to load. Usually, this will be your site’s hero section or featured image. More on how to find what your LCP element is later on.
  • Cumulative Layout Shift (CLS) – how much your site’s content “shifts” as it loads (which is bad for user experience). For example, if you have late-loading ads that “push” your content down after your content has already loaded, that’s a layout shift.
  • First Input Delay (FID) – the time between when a user interacts with something on your page (e.g. clicking a button) and when their browser is able to begin processing that event.

As you can see, “load time” is not one of the metrics that Google has chosen to include.

Why is that? Again, Google is more concerned with how your site’s performance connects to user experience. And the Google team believes these metrics are a big part of what captures the “user experience” parts of web performance.

Do Core Web Vitals Affect Search Engine Optimization (SEO)?

Yes. In May 2021, Google will start using Core Web Vitals as an SEO ranking factor. Core Web Vitals will be part of the new page experience signals, together with HTTPS-security, safe-browsing, mobile-friendliness, and intrusive interstitial guidelines.

Google has also said that Core Web Vitals will affect both mobile and desktop results, as well as whether or not your site appears in Top Stories. Previously, your site needed to use AMP to appear in Top Stories. That will no longer be the case when Google rolls out the change, but your site will need to meet certain minimum Core Web Vitals scores to appear in Top Stories.

Basically, you have some time to adjust your site to Core Web Vitals, but it’s not something you can ignore because it will have a real impact on your site’s search performance, especially if you’re trying to get your content to appear in Top Stories.

Explaining Core Web Vitals & How to Test Them

Now, let’s get into a deeper explanation of the three Core Web Vitals metrics and how you can test your site against them. I’ll start by sharing where to test your site before getting into the metrics. This is important because the test tool ties directly to understanding the metrics. For example, to discover what your site’s “Largest Contentful Paint” element is, you need to use the testing tool.

How to Test Core Web Vitals on WordPress

The easiest way to test your site against Core Web Vitals is via Google PageSpeed Insights, which provides data on all three metrics.

Other speed test tools have also started incorporating Core Web Vitals into their results. Currently, WebPageTest also supports Core Web Vitals and GTmetrix plans to add support soon. Other speed test tools might also add support in the future.

At PageSpeed Insights, all you do is plug in your site’s URL and you’ll see Core Web Vitals metrics in both the Field Data (if your site has enough data) and the Lab Data. The Core Web Vitals metrics are marked with a blue flag.

For lower-traffic sites, you might only have Lab Data for LCP and CLS because Google doesn’t have enough data from actual visitors. That’s totally fine! However, you’ll only see the FID times if your site has enough field data.

One other important note is that you should check both the mobile and desktop results, as your Core Web Vitals metrics will be different between the two:

Core Web Vitals Metrics results - Google PageSpeed Insights
Core Web Vitals Metrics results – Google PageSpeed Insights

If you’re using Google Search Console, you can also view a sitewide Core Web Vitals report that helps you quickly catch sitewide issues:

Core Web Vitals report - Google Search Console
Core Web Vitals report – Google Search Console

This is more helpful later on when you’re trying to diagnose issues with your site as a whole.

Now, let’s go through what the three metrics mean.

Explaining Largest Contentful Paint (LCP)

Largest Contentful Paint

Largest Contentful Paint (LCP) measures when a page’s main content has loaded, which Google says is what affects how quickly visitors perceive your site to load.

LCP is very similar to another metric – First Contentful Paint (FCP). The key difference is that LCP is focused on when the “main” content loads, while FCP is focused on just when the “first” content loads (which could be a splash screen or loading indicator).

What the LCP “element” is will be different for each site and it will also be different between the mobile and desktop versions of your site. Sometimes the LCP element could be an image, while other times it could just be text.

To discover your site’s Largest Contentful Paint element, you can use PageSpeed Insights. Scroll down to the Diagnostics section and expand the Largest Contentful Paint element tab. There, Google will display the HTML for the element that it’s using to measure LCP.

For example, on the desktop version of the homepage, the LCP element is an image:

Largest Contentful Paint example - Desktop version
of the homepage

Largest Contentful Paint example – Desktop version
of the homepage

However, on the mobile version of the site, the LCP element is the subheading text:

Largest Contentful Paint example for mobile
Largest Contentful Paint example – Mobile version
of the homepage

Basically, LCP is just measuring how long it takes for these elements to become visible to your visitors.

So what’s a good LCP time? Here’s how Google defines things:

  • Good – Under 2.5 seconds
  • Needs Improvement – Between 2.5 seconds and 4.0 seconds
  • Poor – More than 4.0 seconds

Explaining Cumulative Layout Shift (CLS)

Cumulative Layout Shift

Cumulative Layout Shift (CLS) deals with how your site loads and whether or not your content “moves around” as new content is loaded.

For example, have you ever been on a news website where the content in the article kept shifting around as the site loaded ads? That’s CLS. 

Or, it could be an even more frustrating situation where late-loading content causes a button to shift and makes the visitor accidentally click the wrong button. 

You probably don’t need me to tell you that this is super annoying for visitors – too much layout shift and your visitors are going to have a really poor experience.

To measure your CLS score, you can use both the Lab Data and Field Data in PageSpeed Insights. Here’s how Google defines the different scores:

  • Good – Under 0.1
  • Needs Improvement – Between 0.1 and 0.25
  • Poor – More than 0.25

If you go to the Avoid large layout shifts section in the Diagnostics area of PageSpeed Insights, you can also see the individual elements on your site that are “shifting” and affecting your score:

Cumulative Layout Shift section
Cumulative Layout Shift section

Explaining First Input Delay (FID)

First Input Delay

First Input Delay (FID) is probably the most complicated metric to understand (and to optimize for).

Essentially, it’s how long it takes for your site to become interactive after a user clicks a link/button or interacts with a JavaScript-powered control. For example, if someone clicks on a button to expand an accordion section, how long does it take for your site to respond to that?

FID is heavily affected by JavaScript. For example, if a mobile visitor’s phone is busy processing a large JavaScript file from your site, it might not be interactive if a user tries to click on an element.

Here’s how Google defines FID times:

  • Good – Under 100 ms
  • Needs Improvement – Between 100 ms and 300 ms
  • Poor – More than 300 ms

Unlike LCP and CLS, FID is based on actual user data, so you can’t easily test it “in the lab” so to speak. This is why you’ll only see FID times in the Field Data section of PageSpeed Insights. Unfortunately, if your site doesn’t have enough data to populate the Field Data section, there’s not any easy way to measure your site’s FID times.

How to Improve Core Web Vitals on WordPress

Now for the important question – if you aren’t currently meeting Google’s recommendations for the three Core Web Vitals metrics, how can you optimize your WordPress site to improve your scores?

Well, the strategies are slightly different for each metric. But in general, most of the optimizations just involve implementing WordPress performance best practices, though with a few points of emphasis.

How to Improve Largest Contentful Paint on WordPress

Optimizing for Largest Contentful Paint is the most straightforward metric as it’s pretty much entirely WordPress performance best practices:

  • Choose fast hosting – hosting affects server responsiveness, which plays a big role in LCP.
  • Set up page caching page caching also speeds up how quickly your server can respond. WP Rocket enables this automatically.
  • Optimize your images – a lot of times, your LCP element will be an image, so optimizing your images will speed up your time. You can use Imagify to automatically optimize WordPress images.
  • Optimize your code – if you load unnecessary CSS or JavaScript before your main content, it will slow down your time. You can fix this by eliminating render-blocking JavaScript and inlining critical CSS. You can set these optimizations up in the File Optimization tab in WP Rocket.
  • Use server-level compression – using Gzip or Brotli compression will reduce the file size of your site, which speeds up LCP. WP Rocket automatically enables Gzip compression.
  • Use preconnect for important resources – preconnect lets you establish important third-party connections early – you can learn more in our tutorial here.
  • Use a content delivery network (CDN) for global audiences – if you have a global audience, a CDN can speed up your LCP time for visitors around the world. You can use our own RocketCDN service or a tool like Cloudflare.

For the easiest way to implement most of these best practices, you can use WP Rocket. WP Rocket will automatically apply page caching and server-level compression as soon as you activate it, and it also includes other features to help you optimize your site’s code and performance, all of which improve your LCP time.

How to Improve Cumulative Layout Shift on WordPress

Optimizing for Cumulative Layout Shift is a little more technical because it deals more with your site’s code.

Some of the most common problems and fixes are:

  • Images without dimensions – if you add images via the WordPress editor, WordPress automatically adds dimensions for you. However, make sure to add dimensions if you’re manually adding images anywhere using your own code.
  • Ads, embeds, and iframes without dimensions – just as with images, loading embeds without dimensions can also cause problems. Make sure to always specify sizes when using these embeds. Or, if placing ads, make sure to “reserve” space for each ad.
  • Web fonts (FOIT/FOUT) – if you’re using custom web fonts, a late-loading font can cause issues such as Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT). One strategy to fix this is web font preloading.
  • Injected content – don’t dynamically inject any content above existing content unless it’s in response to a user’s action.

How to Improve First Input Delay on WordPress

Finally, optimizing for First Input Delay is the most complicated because it entirely deals with code. Specifically, you’ll want to limit heavy JavaScript execution so that the browser can still respond to user interactions quickly.

You should start by eliminating unnecessary JavaScript if possible. If you still have heavy tasks that need to be done, you can break them up into smaller tasks or use something like a web worker. Google has a good explainer on the more technical parts of optimizing FID.

Again, this is difficult to do if you’re not a developer. So if you’re a non-technical user, you might need to hire a developer to help you improve your times. One task that non-technical users can still accomplish would be to remove JavaScript-heavy plugins (and replace them with a more lightweight alternative if the feature is still needed).

Start Optimizing Core Web Vitals on WordPress Today

Core Web Vitals are Google’s newest push to shape the web and improve user experience on websites.

While Core Web Vitals aren’t currently an SEO ranking factor as of November 2020, Google will be adding them as a ranking factor sometime in 2021, so you’ll want to start getting your site ready in advance.

To test your site’s Core Web Vitals times/scores, you can use PageSpeed Insights or the Core Web Vitals report in Google Search Console.

WP Rocket, along with fast hosting, offers everything you need to improve your WordPress site’s Largest Contentful Paint time. For the other metrics, you’ll need to pay special attention to your site’s code and, in some cases (such as a poor First Input Delay time), you might need the help of a developer.

Still have any questions about Core Web Vitals and WordPress? Ask away in the comments!

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Latest Articles of Page speed and caching
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat
Get WP Rocket Now