5 Tips to Improve the Core Web Vitals of WordPress Websites

Ever since Google introduced the Core Web Vitals (CWV) page experience metrics in 2020, we now have a defined set of guidelines to measure the user experience on our websites.

Since WordPress powers about 42 percent of all the websites (source), if WordPress users improve their CWV metrics, the entire web will be a better place in terms of user experience.

Also, after the rollout of the page experience search update of June 2021, Google takes into account the CWV of webpages while ranking them on the search results.

For this reason, it’s vital to focus on the CWV of your site.

In this article, I will share 5 useful tips on improving the Core Web Vitals (CWV) of WordPress websites. These tips, when fully implemented will also help speed up your WordPress blog in a short time.

Interested? Keep reading.

What are the Core Web Vitals (CWV)

Before you can improve your website’s CWV, you should briefly understand the meaning of this term.

As I explained earlier that the CWV is a set of metrics to measure the user experience on your site.

The CWV is a subset of the larger web vitals metrics that include the First Contentful Paint (FCP), Time to First Byte (TTFB), Largest Contentful Paint (FCP), First Input Delay (FID) or Total Blocking Time (TBT), and Cumulative Layout Shift (CLS).

Out of these 5 web vitals, the 3 most important metrics to measure the page experience are called the Core Web Vitals (CWV).

There are 3 CWV metrics to consider:

1. Largest Contentful Paint (LCP): LCP is the time taken to load the largest image or block elements on a page. Ideally, LCP should be under 2.5 seconds to qualify for a ‘‘good’’ user experience.
2. First Input Delay (FID) or Total Blocking Time (TBT): The TBT is the delay between the first element that is visible on-screen aka First Contentful Paint (FCP) and the time it takes for the browser to become responsive to the first user input like a mouse click or touch input on mobile screens. TBT should be under 50 ms to be considered a ‘‘good’’ user experience.
3. Cumulative Layout Shift (CLS): The CLS measures any unexpected shift in the layout of a page while its rendering. No one likes a sudden jarring or shaky moment on a webpage. The ideal CLS is 0.1 and less.

These 3 web vitals can be understood graphically below.

Once you take care of these 3 metrics, your CWV score will improve and so will the experience for your users. This in turn will make Google happy and it should bestow its blessings on your search rankings, at least theoretically.

1. Take care of the server response times

How fast or slow your web hosting server responds to user requests can make the difference between a fast and slow website.

You can easily check your server response time using a Google-recommended free tool called WebPageTest or some other free tool like GTmetrix.

The server response time directly impacts the time to first byte (TTFB), which in turn affects the First Contentful Paint (FCP). If the server is slow, it will take longer to relay the information requested by the browser and vice versa. The longer it takes the browser to serve the information, the longer will be the FCP which is the first visible element on the screen like the site logo.

A good TTFB is under 200 ms and no longer than 600 ms. If your TTFB is longer than 600 ms then you should consider switching your web host or get a free Content Delivery Network (CDN) like Cloudflare.

A CDN serves the pages from a location that is nearest to the user. For this reason, a CDN is the first solution you should adopt to reduce your server response time and overall page load time.

There are many commercial CDN’s available, including, Cloudflare’s Advanced Platform Optimization (APO) for WordPress.

However, if you don’t wish to invest in a commercial CDN presently, then Cloudflare’s free CDN will be a good starting point.

2. Activate caching

Browser caching is an excellent technique to reduce your website load times and snag a high First Contentful Paint (FCP) and Largest Contentful Paint (LCP) score.

Caching stores all the static information like text, images, script, CSS on the user's browser so the page loads much quicker on subsequent visits.

This reduces the time required to serve the first image (FCP) and the largest image or block element (LCP) on the page which is an important CWV parameter.

An easy way to leverage the power of caching is by using one of the WordPress performance plugins like WP Rocket, W3 Total Cache or WP Fastest Cache, etc. (Source: my blog)

These performance plugins go beyond caching and execute the following additional tasks on your WordPress website:

1. Minimize and optimize JavaScript
2. Minimize and optimize CSS delivery
3. Cleanup WordPress database

Optimizing your JavaScript files will also reduce the Total Blocking Time (TBT) since JavaScript is render-blocking. This means that the browser will not load other page elements until the JS is fully loaded. Hence render-blocking JS increases the TBT.

Due to the above benefits, every WordPress website uses one or the other optimization plugins and you should too.

3. Optimize images

Right at the beginning, I explained the Largest Contentful Paint (LCP) CWV metric. The LCP is usually the largest-sized image on a page.

Also, if you run your page through webpagetest.org, you will notice that unoptimized images usually account for the biggest share of the page size.

Hence, it’s crucial to minimize the image size and also optimize the image delivery to keep the load times low.

There are two image optimization tasks to perform on your website:

1. Compress images: All the images on your website should be compressed losslessly to reduce file size without compromising the image quality
2. Lazyload images: The images should be loaded only when they are in the viewport of the user and not earlier. This is called image lazyload.

Fortunately, both these tasks can be accomplished using an image optimization plugin like EWWW Image Optimizer or reSmush that compress the images while uploading in WordPress and lazyload the images on page load.

4. Use a well-optimized theme

Every WordPress site uses a theme. There are optimized themes and not so well optimized themes to choose from. A slow theme will add extra HTTP requests to the page size making them load slower.

On the other hand, a fast-loading WordPress theme will be lightweight and responsive. It will also provide a smooth experience to your users minimizing the Cumulative Layout Shift (CLS) which should not exceed 0.1.

Popular themes like GeneratePress and Astra tick the right boxes when it comes to speed and responsiveness and should be considered ahead of do-it-all themes available on theme marketplaces like Themeforest that come fully loaded but at the cost of a smooth page experience.

You can take a look at some of the popular themes on WordPress.org that are well coded, fast, responsive, and have been downloaded thousands of times till now.

5. Keep your plugin count low

At the last count, the WordPress plugin repository housed close to 60,000 plugins! That’s a huge figure. There’s a plugin for practically every need.

While plugins are a necessity for every WordPress website, it’s easy to go overboard with plugins once your blog is up and running.

There’s an ever lingering temptation to install a plugin for the flimsiest of reasons. One of the drawbacks of installing too many plugins is the extra script and code that these plugins add to your site’s pages making them load slower.

Although there’s no optimum number of plugins that a site must use, as this figure varies from site to site, a good ballpark figure would be 20.

You could even have 25 plugins activated provided they are lightweight and don’t add too much overhead to your page.

An easy way to check the number of requests made by a plugin is to run your website’s URLs through GTmetix.

Navigate to the Waterfall and check out the total number of requests made on the page before and after activating a plugin.

You will instantly know the number of requests made by the plugin as well as the size of the script loaded by the plugin.

Remember that it is the quality of the plugins installed on your website that matters more than the number of plugins in use.

Keeping the overall number of requests low will improve the Total Blocking Time (TBT) score of the Core Web Vitals.

Why is this? Because the more the number of requests, the more will be the JavaScript that loads on the page and this might block the page from rendering till the JS has finished loading, which in turn will increase the TBT.

Summary

There are other factors as well that impact the page load times on a WordPress website but the ones we discussed above are the most important. If you take care of these issues, you will not only have a website that loads fast but also passes the Core Web Vitals (CWV) test.