How to Improve Google Core Web Vitals on WordPress

If you have a WordPress site, you understand the value of a top-notch user experience. It impacts your conversion rate, your subscriber count, your ad views, your search engine rankings, and more.

And poor core web vitals can negatively impact that user experience.

But what exactly are core web vitals? Why are they so important? And how can you improve WordPress core web vitals? Let’s take a look.

What are core web vitals?

Core web vitals are a set of metrics used by Google to determine how websites perform. Unlike other performance measurements, they use real world data to examine how specific aspects of load time impact your user experience. There are currently three core web vitals metrics:

  1. Largest Contentful Paint (LCP), which relates to loading performance
  2. First Input Delay (FID), which relates to interactivity
  3. Cumulative Layout Shift (CLS), which relates to visual stability

Why are core web vitals important for a WordPress site?

Why do they matter? Well, first of all, because they measure how your visitors interact with your website, they’re tied to your user experience. The happier your visitors are, the more likely they are to subscribe to your newsletter, purchase your products, or inquire about your services. And if they have to wait and wait for your website to load, they might leave and visit a competitor.

But Google also uses core web vitals as a ranking factor. This means that they consider them when determining where your website shows up on search engines for your target keywords. After all, Google wants to provide the best quality results for searchers, so it’s no surprise that they value these user experience metrics.

Which metrics make up core web vitals?

Without further explanation, the list of core web vitals might seem confusing or overwhelming. So let’s take a closer look at each one.

Largest Contentful Paint (LCP)

LCP relates to the perceived load speed of your website, reporting the time it takes for the largest element to fully load on the page. In many cases, this is a large hero image or video at the top of the page, though this can vary from site to site. In some cases, it might even just be a block of text. This can also be different on desktop and mobile devices. 

Largest contentful paint only applies to elements that render and are visible to a visitor. So scripts loading in the background wouldn’t impact this metric. 

Ideally, you’d like your LCP to be as low as possible. Google considers less than 2.5 seconds to be a “good” score, less than or equal to 4.0 seconds to “need improvement,” and more than 4.0 seconds to be a “low” score. 

Learn more about largest contentful paint on WordPress.

First Input Delay (FID)

FID relates to how interactive your website is, measuring the time between when a visitor takes an action on a page to when their browser actually reacts to that action. Let’s break this down a little more.

When someone clicks a button on your site that opens a pop-up, their browser has to process the request. If it gets stuck trying to process a large JavaScript file, then it will take longer for the pop-up to open. Not good. 

The faster your site reacts to an action, the lower your FID score is, and the happier your visitors (and search engines!) are.

Those actions, by the way, are things like taps, clicks, and key presses. Scrolling and zooming are considered separately from first input delay, as they’re continuous actions.

The interesting consideration here, however, is that some people will visit your website and never take a specific action. They might read through your content, then go elsewhere without clicking or opening anything. Because of this, some visitors will have absolutely no FID value, which can make measuring first input delay perhaps a bit inaccurate.

Regardless, it’s still a valuable metric to understand and work on improving if necessary. Google considers a good FID score to be less than 100 ms. A score that needs improvement is between 100 ms and 300 ms. Anything over 300 ms is poor.

Learn more about first input delay in WordPress.

Cumulative Layout Shift (CLS)

CLS measures how often site visitors experience unexpected shifts in the layout of a page. What does that mean exactly?

Let’s say that a follower is reading a recipe on your food blog. They’re about to click on a link to an ingredient when, suddenly, the entire page shifts and they end up accidentally clicking on an ad for insurance instead. They’re taken off-site to the advertiser’s landing page and, frustrated, decide not to come back to your blog at all.

This is a perfect example of why CLS is so important. If your page suddenly moves, it can cause visitors to have trouble reading your content or click on something by mistake. In the worst case scenario, they may even end up purchasing something they didn’t intend to. That’s a surefire way to lose fans, readers, and customers. 

Google defines a layout shift as “any time an element that is visible within the viewport changes its start position…between two frames.” But what exactly causes this to happen? A poor CLS score is typically caused by elements on the page loading at different times — an image without a defined size, an ad without set dimensions, custom fonts, or other third-party embeds.

CLS score is measured as the difference between the original loading site and the final place that an element ends up. A good score is anything less than 0.1. Scores between 0.1 and 0.25 need improvement, while anything above 0.25 is considered poor.

Learn more about cumulative layout shift in WordPress.

How to measure core web vitals on WordPress

Now that you know what WordPress core web vitals are and why they matter, let’s find out how you can test your site. There are several tools you can use to do this:

1. PageSpeed Insights 

PageSpeed Insights is a tool directly from Google that provides a wealth of information about your website’s performance, including your core web vitals. All you have to do is enter your URL, and in a few seconds, you’ll see a speed report for both desktop and mobile. 

core web vitals shown in Google PageSpeed

At the very top, you’ll see your core web vitals, with scores for LCP, FID, and CLS. They’re presented very visually, so you’ll know right away if your site is good to go or if it needs improvement. You’ll also get related speed metrics that aren’t part of Core Web Vitals, like Time to First Byte (TTFB) and Time to Interactive. You can click Expand View to see more information about each one.

If you keep scrolling, you’ll see a list of opportunities for improvement, which you can filter based on the core web vital that each suggestion applies to. 

improvement suggestions from Google PageSpeed

Click the arrow to the right of each one to see more details. Finally, at the bottom, there is a list of Passed Audits, which are all the things your site is doing well. 

2. Google Search Console

Google Search Console is another Google-owned tool that’s chock full of information about SEO. There’s a lot you can do here, from submitting your sitemap to viewing and fixing indexing issues. And, of course, since core web vitals are related to SEO, there’s an entire section dedicated to them.

If you don’t already have a Google Search Console account, you’ll need to register your website. First, find the Select Property dropdown and click Add Property. You’ll then be presented with two options: 

  1. Domain: Covers all of the URLs, including both https and http, and all subdomains. This is the most exhaustive option but also the most complicated to set up as it involves editing your DNS records.
  2. URL prefix: Covers just the URLs that fall under the domain name that you enter. So, if you enter example.com, it would include example.com/contact-us, but not blog.example.com. This route also allows for a variety of verification methods.
options for verifying a domain with Google Search Console

For the purpose of this example, we’re moving forward with the URL prefix method. Enter your URL in the box provided and click Continue.

Now, you’ll see several different verification options:

  • HTML file: Download an HTML file and upload it to your site via FTP or cpanel.
  • HTML tag: Copy the meta tag provided, then add it to the <head> section of your site’s homepage.
  • Google Analytics: Use your existing Google Analytics account to verify your site.
  • Google Tag Manager: Use your existing Google Tag Manager account to verify your site.
  • Domain name provider: Edit your DNS records to associate your site with Google.

Choose whichever method is easiest for you — Google provides additional instructions on each one — and proceed forward. Once your site is verified, you can click on Core Web Vitals in the left-hand menu of Google Search Console.

There, you’ll see charts for both the mobile and desktop version of your site that give you an overview of how it’s performing. 

a graph in Google Search Console showing performance metrics on mobile

Click Open Report for more information. There, you can view how each of your URLs stacks up when it comes to core web vitals. You can even come back here once you’ve made improvements to resubmit the page to Google and validate your fixes.

button to validate a CLS issue fix in Google Search Console

3. Google Lighthouse

Google Lighthouse is a tool designed for developers and site owners for improving the quality of their websites. It runs tests based on accessibility, performance, SEO, and more. There are several different ways you can run Google Lighthouse: 

  • With Chrome DevTools
  • Using a Chrome extension
  • With a Node module
  • With a web User Interface (UI)

For the purposes of this post, we’ll walk you through how to use Chrome DevTools to find your core web vitals in Google Lighthouse.

In the Google Chrome browser, navigate to your website. Right click anywhere on the page and select Inspect from the options that appear. This will open a variety of tools that you can explore, but you’ll want to click on the Lighthouse tab. 

Google Lighthouse report in Chrome

Now, select the Mode, Device, and Categories you want to test. You can select as many categories as you’d like if you want additional information, but to find core web vitals, make sure you check the box next to Performance. Click Analyze page load.

Once the audit is complete, it will show you your core web vitals, along with other data and metrics about your site performance.

viewing core web vitals in Google Lighthouse

How to improve core web vitals on WordPress

At this point, you should have a good idea of how your website performs. Next, let’s take a look at how you can improve your WordPress core web vitals.

1. Install a plugin designed for core web vitals

The absolute easiest step you can take is to use a core web vitals WordPress plugin like Jetpack Boost. It was created by Automattic, the company behind WordPress.com, so you can trust that it works seamlessly with your site, themes, and plugins. The best part? It’s completely free to use!

This tool enables you to perform some rather complicated optimization tasks by just toggling a few buttons. Here’s how to get started:

In your WordPress dashboard, go to Plugins → Add New. Search for “Jetpack Boost” and click Install Now → Activate. Then, navigate to Jetpack → Boost. Click the green Get Started button.

Jetpack will then calculate a performance score for your site as it stands currently.

performance scores calculated by Jetpack Boost

You’ll then be able to activate three key tools:

  1. Optimize CSS Loading: Turning this on generates critical CSS for your site. What exactly does this do? Before a browser can show your page to visitors, it has to download and analyze all of the CSS for that page. If your CSS files are large, this can take a significant amount of time, slowing down your site. Generating critical CSS, however, extracts the code that’s strictly necessary for the content that’s visible above the fold to render. It prioritizes that CSS so the rest can be loaded in the background. This speeds up load time tremendously and helps improve your LCP score.
  2. Defer Non-Essential JavaScript. This causes JavaScript code that isn’t immediately essential to render after the rest of the page loads. Not only does this help the visual content of your page load faster, it can also improve your FID and LCP scores.
  3. Lazy Image Loading. This loads images as a visitor scrolls down the page rather than taking the time to load them all upfront. This, in turn, speeds up your site and improves your LCP score.

Once you’ve enabled any or all of these settings, you can click Refresh to recalculate your performance and see the improvements made.

How simple is that? No editing code. No figuring out complicated settings. Just click a few buttons and you’re good to go!

Learn more about Jetpack Boost here

2. Minify your CSS

Minifying CSS means removing unnecessary characters and spaces in order to reduce the size of the CSS files. Let’s take a look at what this might mean in practice.

Developers typically format their code to make it as easy as possible for others (and them!) to understand. That means spacing out lines of code so it’s easier to read. Here’s an example:

h1{
  font-size: 32px;
}
#top-section{
  background-color: green;
}

The problem with this is that, even though it’s convenient and helpful, it takes up unnecessary space in your CSS files. And when extra characters and spaces are multiplied over hundreds or thousands of lines of code, that can really slow things down! Here’s how you would rewrite that same code, but minified:

h1{font-size:32px}#top-section{background-color:green}

This is somewhat straightforward, especially for an experienced developer. But doing this manually, of course, can be very time-consuming and prone to error. Thankfully, there are a variety of tools available that can minify your CSS automatically, including Toptal’s CSS Minifier and a variety of free WordPress plugins. Once you do this, you should see an improvement in both your page speed and your LCP score.

Before you do this, make sure you back up your WordPress site in case minifying your CSS files causes any issues.

3. Defer render-blocking resources

Render-blocking resources are exactly what they sound like: files that block the rendering of a page on your website. This means that when a browser loads the page, it has to stop and fully load these resources — typically CSS or JavaScript files — before displaying other elements. This can really slow down your website and, of course, increase your LCP score.

The solution here is to defer the render-blocking resources, instructing the browser to load important, critical content first. But how do you do this?

Your first task is to identify the render-blocking resources, which you can do using Google PageSpeed Insights. Once you run your URL through the tool (see above for more instructions), scroll down to the Opportunities area and expand the section titled Eliminate render-blocking resources. This will provide a list of your render-blocking resources.

list of render-blocking resources in Google PageSpeed

This list also shows the potential time savings you can gain if you eliminate each render-blocking resource. 

Your next step is to actually eliminate or defer these resources. If you’re familiar and experienced with code, you can use this guide from web.dev to do this manually. To eliminate the resource, you’ll need to move each individual line of code to an inline <script> tag in the HTML of the page you’re working on. Alternatively, you can use the <defer> attribute to tell browsers not to wait for the resource to load before displaying the rest of the page.

Learn more about eliminating render-blocking resources in WordPress.

If this all sounds a bit complicated, don’t worry! Turning on Jetpack Boost defers this code automatically, without requiring any work on your end.

4. Implement a CDN

A content delivery network (CDN) is a network of servers that’s distributed around the world. It takes the load off of your host by splitting up the workload between its servers, which reduces the resources that your website consumes. It also displays your site from the location that’s closest to each individual visitor, so they see it as quickly as possible. This can help improve both your FID and LCP scores, plus provide a variety of other benefits.

There are quite a few ways to add a CDN to WordPress, and they vary based on price, features, and ease of use. Some can be pretty tricky to implement if you’re not a developer. That’s where Jetpack’s WordPress CDN fills the gap.

This completely free tool was created specifically for WordPress sites, so you don’t have to worry about conflicts with major plugins and themes. Plus, you’ll know that it’s optimized specifically for your website and software. The best part is that you can get started in a single click — no editing your DNS or configuring complicated settings!

To turn on this tool, go to Plugins → Add New in your WordPress dashboard. Search for “Jetpack” and install and activate the plugin. Follow the instructions to connect to your WordPress.com account. Then, navigate to Jetpack → Settings in your dashboard.

turning on Jetpack CDN

Click on the Performance tab at the top, then toggle on the setting for “Enable site accelerator.” That’s it! You should start to instantly see a speed improvement. 

5. Optimize your images

Images are typically some of the largest files you have on your website. And the more you have, the more they can slow things down and negatively affect your LCP score. But that’s okay! You can still display your portfolio or use those gorgeous photo backgrounds. All you have to do is take the time to optimize your images properly.

One way to do this is by compressing them before uploading them to your media library. There are several different free tools you can use to do this, including ImageOptim. All you have to do is set your compression level (target a balance of optimization and image quality) and drag and drop your images into the tool. 

Or, if you’d rather, you can compress your images as you upload them to your website. Jetpack CDN actually does this automatically, even optimizing them specifically for mobile devices.

6. Set dimensions for images, ads, and embedded content

When it comes to CLS, images, ads, and other embedded content are some of the biggest culprits. By specifying their dimensions, you can reserve their allotted space while the page is loading and prevent major shifts in your layout.

For images, all you have to do is open the settings tab of your image block in WordPress, and add measurements for the width and height.

setting image dimensions in WordPress

For other third-party content like ads, your best solution is to use CSS to set dimensions for those elements. Since the ads that show up can vary some in size, you might want to set aside a larger amount of space. This might result in blank space around smaller ads, but is more than worth it to prevent page shifts.

7. Consider switching hosting providers

Your host forms the foundation for your website speed and, in turn, your core web vitals. And if, in spite of making many of the changes on this list, you’re still experiencing a slow site, you may need to upgrade plans or even switch providers entirely.

If you’re on a shared hosting plan, one option is to upgrade to a VPS or dedicated plan. Shared hosting plans involve putting a bunch of different websites on the same server. Since they’re all splitting a set amount of resources, those resources are limited. This can ultimately slow down all of the websites on the server.

A VPS hosting plan still has multiple sites on each server, but there are specific resources allocated to each one, and fewer websites piled on top of one another. This is a great step up from shared hosting. 

Dedicated hosting plans provide ultimate flexibility and speed. Each individual site has their own server with their own assigned resources. Some plans are managed, with the provider taking care of server maintenance, while others are unmanaged, so each site owner will need to take care of their own server. 

Should you decide to switch hosting providers entirely, look for one that prioritizes speed. Good indications of this are built-in speed features like CDNs and caching, frequently-updated software, and WordPress-specific plans. 

Not sure where to start? Check out a list of our recommended WordPress hosts.

8. Cut back on heavy features 

The more features your site has, the more code it has to load and the more your core web vitals and speed are impacted. So, it would stand to reason that keeping things as simple as you can is helpful.

That doesn’t, of course, mean that you can’t have a beautiful, professional, highly-functional website. It just means that you should be thoughtful about the decisions you make.

Choose high-quality plugins, and limit them to only the ones that you absolutely need. When possible, use plugins that provide multiple tools at once. For example, Jetpack provides performance, security, design, and marketing functionality in a single WordPress plugin

Instead of a slider at the top of your homepage, try using a static image. Limit the number of ads you have on each page. Think about replacing simple videos with GIFs, which are much more lightweight. These are all small changes that can really add up.

Frequently asked questions about WordPress core web vitals

Still looking for information about core web vitals in WordPress? Let’s answer some frequently asked questions.

Do core web vitals impact SEO on WordPress?

Yes, core web vitals can impact your WordPress SEO. In fact, Google made core web vitals a ranking factor, meaning that they’re considered when the search engine determines the order in which websites rank for certain keywords.

This is because core web vitals are a great indication of user experience. If a site takes a long time to load valuable content or moves around a lot when someone’s using it, this can really negatively impact their experience. And since Google wants to provide the highest-quality results to searchers, this is important to them.

Do core web vitals impact user experience on WordPress?

While core web vitals don’t exactly impact user experience, they are a measurement of the quality of your user experience. Think about it — let’s say you’re visiting your favorite blog or online store and it takes a long time for the hero image to load. Perhaps you click a button and nothing seems to happen for several seconds. Or maybe you’re scrolling and, all of a sudden, the page jumps and you completely lose track of where you were. 

If any of those things were to happen to you, it would be frustrating, right? You might even leave the site entirely and go somewhere else. At the very least, your opinion of the brand would be impacted.

And that’s exactly why core web vitals are connected to your site’s user experience. Poor core web vitals are a sign of difficulty interacting and engaging with your content which, of course, you never want no matter what type of site you run.

How can I easily optimize my core web vitals right now?

The easiest, fastest way to quickly optimize your core web vitals in WordPress is to use a plugin like Jetpack Boost. It’s the best WordPress speed plugin, designed specifically to address core web vitals. By just toggling a few settings, you can optimize CSS loading, defer non-essential JavaScript, and turn on lazy image loading. 

And it couldn’t be simpler to set up! All you have to do is install and activate the plugin, run an initial speed test, then turn on toggles for each setting you want to enable. That’s it!

No matter your experience level or the type of site you own, you can use Jetpack Boost to quickly and easily optimize your core web vitals. Ready to take the first step towards a better user experience and improved search engine rankings? Get started with Jetpack Boost.

This entry was posted in Performance. Bookmark the permalink.

Simon Keating profile
Simon Keating

Simon has worked in marketing and product development for over 10 years, previously at HubSpot, Workday, and now Automattic (Jetpack). He has a varied education, with a degree in chemical engineering and a masters in computer science to his name. His passion is helping people and their businesses grow.

Explore the benefits of Jetpack

Learn how Jetpack can help you protect, speed up, and grow your WordPress site.

Get up to 60% off your first year.

Compare plans

Have a question?

Comments are closed for this article, but we're still here to help! Visit the support forum and we'll be happy to answer any questions.

View support forum
  • Enter your email address to follow this blog and receive news and updates from Jetpack!

    Join 111,109 other followers
  • Browse by Topic

  • %d bloggers like this: