As you might expect, it’s hard to boil something as subjective as user experience down to objective metrics that can be estimated and compared.

However, this is precisely what Google is trying to do, at least when it comes to how website performance affects the UX.

“Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.”

— — — From Google’s Webmaster Guideline

It would be unjust to go directly on the topic, “How to boost WordPress for Core Web Vitals” before we clear some conceptual terms.

Google has confirmed three main core web vitals. The current set of core web vitals that were introduced in early 2020 are as follows:

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a Core Web Vitals metric and measures when the viewport’s largest content element becomes visible. That means the time taken when the main content of the page has finished rendering on the screen.

First Input Delay (FID)

First input delay (FID) measures the time from when someone first interacts with your website. Example: clicking a link, completing a popup form, etc

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a metric measured by summing all layout shifts that aren’t caused by user interaction. CLS looks at the proportion of the viewport that was impacted by layout shifts and the movement distance of the elements that were moved.

A prime example is a page with two buttons below each other.

Just as you want to tap the bottom button, another element loads at the top of the screen, making you accidentally tap the first button instead.

Core Web Vitals are essential for several reasons:

  • Reduce your bounce rate
  • Make better first-time and lasting impressions
  • Build a reliable and trustworthy image of your website
  • Convert more visitors into customers
  • Provide more enjoyable experiences to your new and existing users

Here are some tips to optimize a WordPress website for core web vitals

Improve Slow Server Response Times

This is the first and foremost issue you should address whenever trying to improve your website performance.

Improving server response times will perhaps have the biggest effect on the LCP. The faster things load from the server, the more likely your LCP is to load fast as well.

Overutilizing Hosting Resources

You can also check your resource usage in your hosting dashboard to see whether you’re overutilizing resources, such as CPU, RAM, I/O operations, unique visit budget, or bandwidth.

Operating close to these thresholds will inevitably lead to slower performance. If you reach or surpass these thresholds, your host might be intentionally throttling your account. This is especially likely to happen on shared hosting services.

There are two ways you can try to address this issue:

  1. Reduce your website footprint
  2. Upgrade your account

Utilize a CDN

A CDN (Content Delivery Network) is a global network of servers. When you register your website with a CDN, it will distribute your website content to multiple servers in different regions.

If a user in that region visits your website, it will load the nearest server’s content, improving page loading times.

  1. The good news is that most hosting services today provide a free CDN. The most common is the free tier of the popular CDN CloudFlare.

Cache Your Assets

Caching means saving your website content (such as HTML files) on edge servers where visitors typically access them.

This prevents the website from having to be recreated from scratch every time. Registering your website with a CDN should already improve your caching.

The trick is that you want visitors to get the cached version of your website as long as nothing is updated on your website, but you want them to get the new version as soon as you make changes to your site.

Prefetch Third-party Content

If you’re loading content from third-party websites before your LCP (or even as your LCP), you’ll want to get this out of the way as soon as possible.

First of all, you can detect whether third-party content is affecting your pages if PageSpeed Insights highlight the following issue:

In this case, we’re only loading third-party fonts, so all is good.

In WordPress, this issue is typically caused by third-party plugins, such as Google Analytics, WooCommerce, etc.

The obvious solution will be to remove the plugin or third-party code if it’s not necessary. As a rule, you should never leave unused plugins installed on your WordPress installation.

However, you can also add the following custom markup to your website pages:

1

<link rel=”preconnect” href=”https://example.com" />

Or:

1

<link rel=”dns-prefetch” href=”https://example.com" />

You can replace the href domain with the domain of the service you are using; you can alert the browser of your intent.

To pre-load videos from YouTube, for example, you can just swap in “https://youtube.com." You can find more commonly used prefetch domains here.

Some caching plugins, like WP Rocket, allow you also to prefetch third-party content from within an easy-to-use dashboard.

Optimize Your JavaScript and CSS

Loading JavaScript or CSS files may also delay the time it takes to load and render the LCP element on your page.

The browser will delay rendering the HTML page if it encounters external stylesheets or JavaScript <script> tags before the content.

There are several solutions you can use to help limit the impact of JavaScript and CSS on your web pages:

  • Eliminate render-blocking resources
  • Minify CSS and JavaScript
  • Combine CSS files and JavaScript files
  • Optimize the delivery of CSS and JavaScript files

Bonus Tips to Optimize the Core Web Vitals for Your WordPress Website

Now that you know what actions to take to directly optimize your WordPress website core web vitals, let’s take a look at some other best practices:

Optimize Your Image Assets

It’s all fun and games to use tonnes of images on your site, but few consider the impact of using images when trying to optimize their WordPress site’s core web vitals.

So, what’s the big deal?

Well, in a 2018 talk, Google themselves identified images as one of the leading factors that slow down website pages. Google also says that optimizing images is one of the ways with the most potential for improving your website performance.

According to data from HTTPArchive, image data has shot up by over 50% on mobile desktop websites and over 150% on mobile websites.

What’s more, images almost always directly affect two core web vitals:

  1. LCP: Typically, the largest element in the visible area of the page is an image.
  2. CLS: If not used correctly, images can have a massive impact on page stability as you can see in the “How to improve your CLS score” section above.

That being said, images are a very necessary part of creating engaging, attractive, and modern website pages, so you likely don’t want to get rid of them completely.

Instead, you should use them wisely and make sure to optimize them for core web vitals where possible. There are a number of ways you can do this:

  1. Responsive images: Responsive images mean that you resize images as necessary for different screen sizes, such as desktop, tablet, and mobile. You need much lower quality images to display nicely on smaller screens without a visual loss of quality, which reduces the impact on loading times. Nowadays, WordPress has built-in responsive images. However, you will want to ensure that your themes/plugins support them and don’t break the responsive design. If you want galleries on your pages, but keep your images responsive, use top plugins like NextGEN, Modula, and Envira.
  2. Lazy-loading: Lazy-loading ensures that images above the fold are loaded first and lower down images are only loaded when they are scrolled to. This improves LCP and the user experience. Today, most browsers have built-in lazy loading and WordPress supports it as well. Once again, you should just ensure that nothing on your WordPress installation interferes with this or uses JavaScript for lazy loading. You can also check this via Lighthouse.
  3. Serve images in next-gen formats: Some newer forms, like WebP and JPEG-200, are more efficient at encoding images, reducing payloads and making them faster to load. You can manually convert images to these formats using PhotoShop, web-based tools, or even WordPress plugins.
  4. Use an image plugin or CDN: We introduced CDNs above, but there are also image-specific CDNs. These CDNs may have built-in responsiveness, intelligent image compression (that lowers size while maintaining quality), lazy-loading, caching, format conversion, and more as well as another layer of CDN to deliver the images faster. ShortPixel, Imgix, Imigify, and Cloudinary are just some of the options with WordPress-specific plugins.

You can read a more detailed version of this here:

Please comment if you are unclear on the topic. I am here to help :)