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:
If you’re using Google Search Console, you can also view a sitewide Core Web Vitals report that helps you quickly catch sitewide issues:
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 (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 WordPress.org homepage, the LCP element is an image:
However, on the mobile version of the site, the LCP element is the subheading text:
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 (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:
Explaining First Input Delay (FID)
First Input Delay (FID) is probably the most complicated metric to understand (and to optimize for).
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.
- 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
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!