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

Have you already managed to optimize your website for Google Core Web Vitals?

You can say no, it’s okay. You’re not alone. In fact, Searchmetrics has found that up to 96% of the top 2 million websites^[1] failed Core Web Vitals tests. I’m not a mathematician, but that sounds like a lot.

Google Core Web Vitals is the latest tool that allows Google to analyze your website. Google will continue to use things like speed, content quality, and mobile-friendliness to rank websites. So if you are well placed, you can relax a bit.

But only a little, because your competitors are looking for that advantage that will put them on top. How can you be one step ahead of them? They offer great user experiences, and that’s exactly what Google wants.

And you get big rewards when your website delivers great experiences and great content. In this article, we will help you create such a website.

We’ll start with a look at Google Core Web Vitals so you know exactly what they mean and what they measure. Then we share our top tips for creating pages that always pass Core Web Vitals.

Although the schedule has shifted and the update won’t be released until mid-June, we still have a lot of work to do. Let’s start!

📚 Table of contents:

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

If Google updates aren’t your thing, you’re probably wondering what the fuss is about. Let’s take a quick look at the details.

Back in May 2020, Google announced a new addition to its search rankings, Core Web Vitals. Such an announcement usually means a lot of work someone. With over 200 unique factors used to rank websites^[2]Cover Google rankings everything.

You’ll even find that the age of your domain plays some role in your ranking. In this case, Google Core Web Vitals focus on user experience, or what it’s like to use your website.

Going forward, Google Core Web Vitals will have a number of metrics, but the 2021 update includes three: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID).

Largest Content Color (LCP)

Your LCP is a measure of how long it takes for the largest content to download. This can be an image or just text. Whatever it is, once loaded, the website feels ready.

Better still, the Largest Contentful Paint only measures the content in the user’s viewport. Any images below the fold will not count towards your LCP score.

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

Cumulative Layout Shift (CLS)

The CLS measures the stability of your page during the loading process. It measures any shifts that can occur when images load late or fonts switch styles. Even things like buttons can cause unexpected movements on the page.

If your elements are suddenly moving (and more than 0.1) then you need to troubleshoot a CLS issue.

First Entry Delay (FID)

The FID measures how quickly a browser becomes interactive. This means that visitors can do Things and get a reaction. This includes things like clicking links, pressing buttons, or filling in checkboxes.

You can pass this metric on if users can complete things like entering data into forms and surveys within 100ms.

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 isn’t a bunch of arcane metrics that are hard to test (let alone understand). Everything instead can Be easy with a range of official Google tools to test and fix your website.

When it comes to testing, you need to know the two main categories: laboratory test tools and field test tools. Field testing tools are backed by real-world data collected from real users who signed up for the Chrome User Experience Report. This makes them more valuable to Core Web Vitals. We will focus on two options:

• Google Core Web Vitals report from Google Search Console.
• The Page Speed ​​Insights test, which includes both field and lab results.

Let’s start with the Google Core Web Vitals report as it tells us which URLs are the problem.

Using the Google Search Console

Once in the console, scroll down to search Experience → Core Web Vitals. Clicking here opens a full site report with each URL categorized as good, needs improvement, or bad.

⚠️ If you haven’t set up Google Search Console yet, take a moment to read 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 problems.

When you click the kind You will get a full list of URLs which can then be tested Page speed insights for more informations.

Using Page Speed ​​Insights

Enter your page URL and click Analyze to start the exam. It shouldn’t take long to complete the analysis, which by default shows the mobile results first. However, you can view Core Web Vitals data on both mobile and desktop without running a new test. The results are at the top of the page:

If you want to test your entire page, click origin summary. As you can see, the Core Web Vitals have been helpfully tagged with percentages that indicate how often they pass. This site is a solid pass, but what can we do about failed sites?

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

In fact, there’s a lot we can do to improve Core Web Vitals results (even without technical knowledge). Let’s look at our top tips for improving user experience and Core Web Vitals.

Upgrade your hosting

Yes, there is no better way to improve server response than to have a good one. In reality, switching hosts can be difficult (not to mention the cost), but you don’t have to switch from shared hosting to dedicated hosting. I mean this jump will solve a lot of performance issues, but even a small jump to a faster server can also result in noticeable performance improvements.

However, if you’ve already made up your mind to make the switch, check 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 stores an HTML version of your website on your server for easier retrieval. Server-side caching can be difficult to manage and configure, so you’ll need to ask your prospective 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 side caching plugin. Even page-level caching delivers content fast enough to improve your Largest Contentful Paint.

When it comes to using a plugin, I would recommend WP Super Cache as it is completely free (no upgrades) with basic and advanced options (like preload).

How easy is WP Super Cache to use? Listen:

Once the plugin is installed and activated, open the settings via Settings → WP Super Cache. Click on Simply and turn around caching on and then updated status.

Eventually, you will encounter some issues with your cache. Not only do you have too many pages in the cache, but new changes are not reflected on the site. In this case you can clear the cache by clicking Clearing the Cache.

WP Super Cache also offers the option to preload your most popular pages. However, preloading consumes valuable resources, so you must choose wisely and monitor your CPU on a daily basis.

Setting up is easy. press the subpoena Possibility. You can set the regularity of the cache update and whether or not to delete old files.

When you are happy with the settings, press Preload cache now to start. Once the caching process is complete, 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 hurt your Core Web Vital Scores. There are a few reasons for this:

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

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

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

• Need every picture?
• What measurements are you using? We aim for >2000px.
• Try using for backgrounds, patterns, gradients or SVGs.
• Limit “above the fold” images to one logo and one hero image.
• Do not use sliders or carousels over the fold.

Once you’ve decluttered your images, you can tweak 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 this I recommend Optimol.

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

You will receive an email to validate your account from the Optimole dashboard. Grab the API key and go to your WordPress site.

Once you have installed and activated Optimole, access the settings via the Media → Optimole Menu. Paste your API key and click Connect.

You should also activate Scale images and lazy load.

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

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

Code Optimizations

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

Of course, we can opt for themes with optimized codebases and avoid plugins with bloated code. Additionally, we can optimize code in two ways:

One downside is that Autoptimize has many settings, meaning there’s no real one-size-fits-all solution.

However, you can certainly opt for it Optimize everything from JavaScript, CSS, HTML. This setting minimizes your code by removing things like whitespace and newlines. Beyond minimization, Autoptimize offers great performance options for anyone willing to learn more and test a lot.

For example, with advanced tasks such as B. achieve significant increases in speed Preload CSS and inline critical css, However, you must research each option before using it.

Fonts and Symbols

You can use Autoptimize to handle your fonts, especially if you have committed to using Google Fonts. You can even try preloading your Google Fonts to prevent the “flashing of plain text” that hurts your cumulative layout shift.

I would recommend trying a few different options and seeing what works best for your site. Unfortunately, if you’re using Elementor, you’ll still see layout shifts. If this is the case for you, you should consider switching to system fonts.

Ad best practices

When it comes to layout shifts, one of the biggest problems is ads. Usually, the ads push the content down, resulting in poor user experience. Luckily, it’s possible to reduce shift by following best practices.

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

Once you’ve decided on the best placement, reserve a spot for the ad. While this might leave some empty space, it might be worth making a compromise.

Conclusion

With these tips, you should see an immediate improvement in your results. Better yet, each of the options gives you a good starting point for further tweaking.

We’ve covered a lot of ground, to recap:

• Upgrading your hosting package could help improve your results.
• Using a caching plugin should speed up content delivery.
• Optimizing images and using a CDN should improve site performance.
• Code tweaks give you control over how your site loads.
• With judicious font selection and preloading, you can enjoy speed increases.
• By following ad best practices, you can reduce layout shifts.