Google Core Web Vitals in WordPress: How to Optimize Your Site

Have you managed to optimize your site for Google Core Web Vitals yet?

Google Core Web Vitals is a tool that helps Google analyze your website and the results of that analysis can either help you or hurt you in search rankings. Keep in mind that Google uses a combination of factors like speed, content quality, mobile-friendliness, and their latest E-E-A-T guidelines ^[1] to determine the rank of websites. So, if you’ve been ranking well, you can relax a little.

But only a little, because your competitors are looking for the edge that will take them to the top. How can you stay ahead of them? By optimizing your Google Core Web Vitals!

In this article we’ll review exactly what they mean and what they measure. Then, we’ll share our best tips for building pages that always pass Core Web Vitals.

We have a lot to cover, so let’s get started!

📚 Table of contents:

• What are the Core Web Vitals?
• How to test (and read) your Google Core Web Vitals score
• What can I do to improve my score?

What are Google Core Web Vitals (and why should you care about them)? 🤔

If Google updates aren’t your thing, then you might’ve missed all of the uneasiness surrounding Core Web Vitals when it was first announced back in May of 2020 that Google would be including it in their search ranking factors. Announcements like these usually mean a lot of work for someone. Not to mention the uncertainty around “getting it right” so that Google doesn’t tank your rankings in the SERP. Hence the uneasiness.

Well, it’s been some years now since Core Web Vitals were incorporated into Google’s ranking system, and some changes have taken place since that time. At the moment, the three most crucial factors that you should pay attention to are:

• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• Interaction to Next Paint (INP)

Largest Contentful Paint (LCP)

Your LCP is a measurement of how long it takes for the largest piece of content to be downloaded. It could be an image or simply text. Whatever it is, once it has loaded, the website feels ready.

Better yet, the Largest Contentful Paint only measures content in the user’s viewport. Any images below the fold won’t count against your LCP score.

If you want to get passing result, you need your LCP to be less than 2.5s.

Cumulative Layout Shift (CLS)

The CLS measures the stability of your page during the loading process. It measures all of the shifting that can happen when images are loaded late or fonts switch styles. Even things like buttons can create unexpected shifting on the page.

If your elements are moving suddenly (and more than 0.1), you have a CLS issue to address.

Interaction to Next Paint (INP)

INP measures the time taken for the browser to start processing the interaction to the point when the visual update happens on the page. This includes the time taken for the browser to process the event handlers, execute any JavaScript needed, and render the necessary changes to the display.

In simpler terms, it captures the delay between a user’s interaction with the page (like clicking a link or pressing a button) and when they see a visual response or feedback from the page. Therefore, you want a low INP score because it means the website usually responds fast to what you do.

How to test (and read) your Google Core Web Vitals score 💡

One of the great things about Core Web Vitals is their user-friendly approach. This is not a bunch of arcane metrics that are difficult to test (let alone understand). Instead, everything can be quite easy with a number of official Google tools for testing and correcting your website.

When it comes to testing, you need to know about the two main categories: lab testing tools and field testing tools. Field testing tools are backed by real-world data taken from actual users who opt in to the Chrome User Experience Report. This makes them more valuable for Core Web Vitals. We’re going to focus on two options:

• Google Core Web Vitals report from the Google Search Console
• The Page Speed Insights test which has both field and lab results

Let’s start with Google Core Web Vitals report because it will tell us which URLs are the problem.

Using Google Search Console

Once you’re in the console, scroll down to find Experience → Core Web Vitals. Clicking here will open a full-site report with every URL categorized as Good, Needs Improvement, or Bad.

⚠️ If you haven’t set up Google Search Console, take a moment to read through our guide to using Google Search Console with WordPress.

Click on Open Report to get more specific information on which Core Web Vitals metric is causing the most trouble.

If you click on the Type you will get a full list of URLs which can then be tested in Page Speed Insights for more information.

Using Page Speed Insights

Enter your page URL and click Analyze to start the test. It shouldn’t take very long to complete the analysis which will display the mobile results first by default. However, you can view Core Web Vitals data from both mobile and desktop without running a new test. You can toggle between them at the very top of the page, which will also show you the individual scores for LCP, INP, CLS, FCP, FID, and TTFB:

You can also see your overall score if you scroll down a bit:

If you’d like to test your entire page click Origin. As you can see, the Core Web Vitals have been helpfully bookmarked with percentages indicating how often they pass. This page is a solid pass, but what can we do for failing pages?

What can I do to improve my Google Core Web Vitals score? 📈

Actually, there’s quite a bit we can do to improve Core Web Vitals scores (even without technical skills). Let’s look at our best tips for improving user experience and Core Web Vitals.

• Upgrade your hosting
• Using a caching plugin
• Optimize your images
• Code optimizations
• Fonts and icons
• Best practices for ads

Upgrade your hosting

Yep, there’s no better way to improve server response than to have a good one. In reality, switching hosts can be difficult (not to mention pricey), but you don’t need to leap from shared hosting to dedicated hosting. I mean, that leap will solve a lot of performance issues, but even a small jump to a faster server can also deliver noticeable performance improvements.

Having said that, if you’ve already decided to make the change, read out our comparison of the best-performing WordPress hosts first. But, if you’re really in a hurry, check out the table below:

Besides the standard optimizations, each of the above hosts offers some form of server-side caching. Caching is the process of storing an HTML version of your site on your server to make it easier to retrieve. Server-side caching can be tricky to manage and configure, so you’ll need to ask your potential host about their process.

Using a caching plugin

However, not all hosts offer server-side caching, but you can enjoy some of the benefits with a page caching plugin. Even caching at the page level delivers content fast enough to improve your Largest Contentful Paint.

When it comes to using a plugin, I’d recommend WP Super Cache because it is completely free (no upgrades) with simple and advanced options (like preload).

How easy is WP Super Cache to use? Check it out:

Once the plugin is installed and activated, open the settings via Settings → WP Super Cache. Click on Easy and turn Caching On and then Update Status.

At some point, you will run into some problems with your cache. Not only will you have too many pages cached but new changes won’t appear on site. If this happens then you can clear the cache by clicking Delete Cache.

WP Super Cache also offers the option to preload your most popular pages. However, preloading will take up valuable resources, so you will need to choose wisely and monitor your CPU daily.

Setting it up is easy. Click the Preload option. You can set the regularity of the cache refresh and whether old files should be deleted or not.

Once you’re happy with the settings, hit Preload Cache Now to get started. Once the caching process is finished, the files will be in your wp-content/cache folder on the server.

Optimize your images

People love pictures. And, we all use a lot of them, right? But, images could be hurting your Core Web Vital scores. There’s a few reasons for this:

• The image might be too heavy.
• The image dimensions are too large.
• You’re loading every image on the page.
• The images are sent from your server to people all over the world.

Fortunately, there is an easy way to fix all of the above.

First, consider a few things when it comes to images:

• Do you need every image?
• What dimensions do you use? We aim for >2000px.
• For backgrounds, try using patterns, gradients, or SVGs.
• Limit above-the-fold images to a logo and a hero image.
• Don’t use sliders or carousels above-the-fold.
• If possible, consider using WebP format for your images.

Once you’ve decluttered your images, you can optimize the rest. Image optimization can reduce image sizes, improve their dimensions, and deliver them from a Content Delivery Network (CDN) using servers closer to your users. For all of this, I recommend Optimole.

Optimole saves your servers a lot of work by doing all of the above in the cloud. Head over to Optimole and sign up for an API key (you need this to access the cloud operations).

You’ll receive an email to validate your account via the Optimole dashboard. Grab the API key by clicking on COPY and then head to your WordPress site.

Once you install and activate Optimole, you’ll need to add your API Key. Just click on I already have an API key and then add it when prompted to do so.

You’ll then see Optimole connecting to your website:

You should also enable Scale images and Lazy load.

Scaling the images means Optimole will send images perfectly sized for the device (no matter what it is) to reduce layout shifting.

Lazy loading means you’ll only load the images your users can see in the viewport. With that setup, let Optimole handle the rest.

Optimole is free to use, with an optional upgrade to a premium version, which starts at $19.08.

Code optimizations

The thing with running a WordPress site is all the moving parts. Between the themes and plugins, and the languages that power them, it is hard for a non-technical person to optimize code.

Obviously, we can opt for themes with optimized code bases and avoid plugins with bloated code. Beyond that, we can optimize code in two main ways:

• For the best results, hire a freelance WordPress developer.
• For budget-friendly results, use Autoptimize.

One downside, Autoptimize has a lot of settings, which means there’s no genuine one-size-fits-all solution.

Having said that, you can safely choose to Optimize all of JavaScript, CSS, HTML. This setting minifies your code by removing things like spaces and line breaks. Beyond minification, Autoptimize has great performance options for anyone willing to learn some more and test a lot.

For example, you can get significant speed boosts using advanced tasks, like preloading CSS and inlining critical CSS, but you will need to read up on each option before using it.

Fonts and icons

You can use Autoptimize to handle your fonts, particularly if you’re committed to using Google Fonts. You can even try preloading your Google Fonts to prevent the ‘flash of unstyled text’ that hurts your Cumulative Layout Shift.

I’d recommend trying a few different options and seeing what works best for your site.

If you’re using a newer block theme with full site editing capability (FSE), then you can also access the font library, which lets you connect to Google Fonts to download any fonts you want. They are then stored locally within the font library:

💡 For instructions on how to do this, check out our tutorial.

Unfortunately, if you’re using Elementor, then you will still see layout shifting. If this is your case, then consider switching to system fonts.

Best practices for ads

When it comes to layout shifting, ads are one of the biggest problems. Usually, the ads will push content down which creates a poor user experience. Fortunately, it is possible to reduce the shift by following best practices.

Most importantly, the placement of the ad should be balanced between getting more clicks and impact on your layout. For example, don’t place ads at the top of the viewport. If the final ad size is larger than the container, it will push all of your content down. Aim for the middle of the page where the ad will do less damage.

When you have decided on the best placement, reserve a slot for the ad. While this might leave you with some blank space, it could be worth the trade off.

Conclusion

With these tips, you’ll soon be able to join the ranks of those websites because you should see an immediate improvement in your results. Better yet, each of the options we covered gives you a good starting point for further optimizations.

To recap what we covered:

• Upgrading your hosting plan could help to improve your results.
• Using a caching plugin should speed up content delivery.
• Optimizing images and using a CDN should improve site performance.
• With code optimizations, you can control how your site loads.
• With considered font selection and preloading (or using the native font library), you might enjoy speed boosts.
• By following ad best practices, you can reduce layout shifts.

What have you done to optimize for Google Core Web Vitals? Feel free to let us know in the comments below.