10 Strategies to Optimize WordPress for Google Core Web Vitals

Since the beginning of last year, Google has been making a lot of emphasis on building a user-center Internet. In November of 2020, they announced new page experience signals in ranking for publishers to improve their sites.

This set of criteria include different search signals. We don’t need to cover each of them in detail, but you can read this article if you are interested. It’ll also help you optimize for all Google UX Signals

For now, it’s important to understand the new search signals: Core Web Vitals. We’ll especially see how to optimize WordPress for them.

Let’s get started.

The Contents

  • What are Core Web Vitals? 
  • How to measure Google Core Web Vitals
  • How to optimize WordPress for Google Core Web Vitals
  • Final Thoughts

What are Core Web Vitals? 

Google UX signals

Google Core Web Vitals are a set of website performance metrics that Google considers important for a great user experience. They include three quality tests: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). 

As you can see in the picture, they can also be identified as loading performance, interactivity, and visual stability.

Having a great performance on each of the three metrics means it’s more likely Google will see you and you’ll rank higher. So naturally, they are very important.

Before I explain how to measure and optimize all of them on WordPress, you should keep in mind something: quality content is still the most essential part of your site. Only after working hard on having amazing content, you should consider things like speed, interactivity, and layout shift.

Cumulative Layout Shift

Cumulative Layout Shift

Also known as visual stability, CLS is about predictability. In this user-centric era, you don’t want unexpected content happening to users. Follow this basic principle: elements should change mainly when users interact with the page. 

A content shift occurs for different reasons:

  • A third-party ad appeared.
  • There’re images or videos with unknown dimensions.
  • A font renders larger or smaller than its fallback.

Largest Contentful Paint

Largest Contentful Paint 1

Or loading. LCP measures the time it takes for the largest above-the-fold content element to load. This might be an image or a text block.

According to Google, LCP is primarily affected by:

  • Client-side rendering.
  • Render-blocking JavaScript and CSS.
  • Slow server response times.
  • Resource load times.

First Input Delay

FID is one of Google UX Signals

Aka interactivity. FID tells how responsive your site is by measuring the time from when a user first interacts with a page to when the browser is actually able to process the event.

So it doesn’t measure the overall interactivity of your site but only the first input. Since first impressions are vital and the biggest interactivity issues we see on the web today occur during page load, FID is still necessary.

The metric considers distinct actions like clicks or taps. Scrolls and zooms don’t affect FID.

How to measure Google Core Web Vitals

To test and measure Google Core Web Vitals, use Google’s tools for developers like Search Console or Chrome UX Report (both measure the three metrics). 

Or use Lighthouse to see LCP data. If you don’t know what Lighthouse is or never used it, it’s a no-brainer:

  • Go to your website and right-click.
  • Select “Inspect element”.
  • Find the tab “Lighthouse” and click on “Generate Report”.

If you go to “Performance” instead of “Lighthouse”, you’ll also find your long tasks, which we’ll cover later.

Another Google tool that’s very simple to use is PageSpeed Insights. 

Once you copy the link of the website in PSI, you’ll see something like this:

Core Web Vitals PageSpeed Insights

If you scroll down to the diagnosis, you’ll find a list of things to improve. In this case, I’m testing a french website that needs a lot of improvement according to PSI.

However, experts advise considering mainly the field data of PSI reports and not only the lab data, which isn’t so relevant.

For a more complete analysis, stay updated to NitroPack. Their service improves site speed and will soon launch a new Telemetry report that will show real-user metrics for your sites in real-time.

We use NitroPack here, and the results so far have been pretty good. If you pair it with StackPath, and a fast-loading WordPress theme like OceanWP hitting the lowest possible core web vital score isn’t that hard. 

How to optimize WordPress for Google Core Web Vitals

Finally, here are the 10 strategies to optimize WordPress for Google Core Web Vitals. For better clarity, I group the strategies according to each measure.

Cumulative Layout Shift

1. Include the Width and Height of your media.

Tell the browser the dimensions of your media. 

WordPress puts your images’ width and height attributes but make sure the rest of the media embedded also has this info. That way, the browser already knows how much space has to be assigned while loading these elements. Specify the width and height attributes of images, videos, ads, embeds, and iframes.

PSI image width and height 1

As you can see, PageSpeed Insights also advises explicit dimensions and even shows you the failing elements.

2. Preload fonts

If your site has large text, the performance impact of fonts will be high. PSI recommends you “ensure text remains visible during Webfont load” Some ways to load fonts faster are:

  • Make multiple font formats available. The browser will pick the compatible format and only load its font.
  • Host your fonts locally.
  • Preload fonts with WP Rocket

3. Avoid inserting ads and pop-ups above other content

Ads and pop-ups can cause layout shifts if you insert them at the top of a page. As they load, they will cause everything below to shift. So move ads to the bottom or out of the viewport.

And even if you don’t insert them at the top of the page, make sure you reserve space for them. One way to do this is using containers with proper dimensions. 

Largest Contentful Paint

4. Optimize your image

To improve your LCP, move your image down a few paragraphs so it’s not the first thing that comes up when a user comes to your site. Or make a smaller image.

Compress, resize and convert your image to the right format. Use JPEG 2000 instead of JPEG or PNG. 

NitroPack offers adjustable image quality as part of your image optimization stack.

5. Reduce initial server response time

PSR server response

Maybe the problem isn’t you but your host server. Your WordPress hosting company needs to give your site a solid platform to build upon. Upgrade your hosting plan and leave that slow host server behind. 

Use a service worker, too. They reduce the size of HTML payloads by avoiding the repetition of common elements.

6. Implement critical CSS

Critical CSS is CSS applied to the above-the-fold elements. Before visualizing the page, browsers need to load and execute CSS. So if the CSS file is too large, page speed will be hurt. Plus, WordPress sometimes points to multiple stylesheets by default and the browser loads them all. 

Critical CSS is important both for LCP and FID. Minify, compress and reduce the unused CSS in your site to improve your performance.

7. Choose theme and plugins wisely

When looking at your WordPress site, two simple things’ll help you optimize LCP:

  • Theme. Your theme can increase load times a lot so choose a lightweight theme over-bloated ones always.
  • Plugins. Resist the temptation of adding all the great plugins out there. Remember great functionalities comes with a great cost: in this case, a performance cost. Pick carefully each plugin and make sure they don’t consume too many resources. For some guidance on this, read our must-have WP plugins article.

First Input Delay

8. Break up long tasks 

We can’t talk about First Input Delay without mentioning JavaScript. Why? Because JS is the main cause of problems here. 

Excessive JS usage can lead to moments where your user interface may be unresponsive to user interaction. Those periods of time are longer than 50ms and are known as Long Tasks.

To find these tasks, go to WebPageTest or right-click on the website and select “Inspect element”, then “Performance”.

Once you find long tasks, break them up by splitting the code into smaller, asynchronous tasks.

9. Use a caching plugin 

Like WP Rocket. One of its features is optimizing file delivery which helps with your FID score. Check the box next to the ‘Load JavaScript deferred’ option. That way, your website loads without waiting for JavaScript to be loaded.

Use a CDN, too. A CDN reduces the distance between visitors and content. You could get a caching tool with a built-in CDN. Caching your HTML can reduce responsiveness significantly. Tools like WP Rocket allow you to set up caching on your website without any technical knowledge.

10. Delay or remove non-critical third-party scripts

Third-party scripts shouldn’t hurt your own scripts. But sometimes they do prevent your scripts from executing on time. Consider which scripts are more valuable and prioritize them. Ads and pop-ups scripts will probably be removed.

Finally, take a look at your code. Remove unnecessary parts like comments, whitespace, and line breaks. Compression will make your code files smaller in size. NitroPack applies these techniques by default.

Final Thoughts

So there you have it. Ten strategies to optimize WordPress for Google Core Web Vitals. Google has certainly taken it up a notch with its new page experience signals and you need to be well prepared with the upcoming changes.

I can’t stress this enough: updates will keep coming regularly. Google tells us that page experience signals will be updated annually. So always always always keep up to date with changes. Stay informed.

But don’t worry. There will always be tools available out there to help us adapt as smoothly as possible.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *