How to Improve Core Web Vitals: 10 Effective Ways + a Case Study

As Google’s Core Web Vital metrics are a critical ranking factor, improving them helps your WordPress website perform well in search.

Not to mention, they have a crucial impact on your user experience.

However, the topic of Core Web Vitals can be a little intimidating. At first glance, it’s all very technical, especially the number of new terms you should understand.

In this article, we’ll define the metrics and explain how to test your site’s performance. After that, we’ll give you detailed instructions on how to improve your Core Web Vitals both manually and using a plugin.

Finally, we’ll go over a case study to see the impact these optimization efforts have on a website.

What Exactly Are Core Web Vitals?

Core Web Vitals is an umbrella term for the metrics that measure user experience on a website. Generally speaking, they are all related to loading speed and website interactivity.

Let’s go over the most important ones:

Largest Contentful Paint

Largest Contentful Paint (LCP) measures how long it takes for a page to load to the point that it becomes viewable and usable. For that, it tracks when visitors see the largest content element, such as an image or a text block.

The LCP score is measured in seconds.

Ideally, it should take up to two and a half seconds to load. Meanwhile, if it takes up to four seconds, you should improve it – we will go over the best practices later.

Note that if the element takes longer than four seconds to load, it will definitely have a negative impact on your page ranking.

Cumulative Layout Shift

The next Core Web Vital tracks the website layout stability during load. That means how much it moves around because of new elements appearing on the page.

High Cumulative Layout Shift (CLS) can disrupt the user experience by moving the text or elements visitors are trying to interact with.

Google calculates your CLS by looking at how much the content on a page moves around while it’s visible on the visitors’ screen. Note that Google pays attention to both how much it moves and how big the movements are. A CLS score below 0.1 is good, up to 0.25 needs improvement, and anything above that needs your urgent attention.

Note that page movement within 500 ms of a user interaction won’t affect your CLS score, as it’s considered to be on purpose.

Interaction to Next Paint

Interaction to Next Paint (INP) is the newest addition to Core Web Vitals that replaced FID in March 2024.

Instead of only considering the first interaction, INP tracks all interactions and shows the worst score. That way, you have a more accurate picture of the page’s responsiveness.

An INP score up to 200 ms is good and up to 500 ms is fair. If it takes longer, it will have a negative impact on your total Core Web Vitals score.

How to Test Your Website’s Core Web Vitals

Now that you know what scores you should strive for, let’s see how your site performs in terms of Core Web Vitals. You can find that out via speed testing tools like GTmetrix and PageSpeed Insights.

Both work very similarly. Simply input your web page URL and start the test. After a bit of wrangling, they will display the performance results, including Core Web Vitals.

This shows clearly where your site needs improvement. What’s important to note is that both speed testing tools base their results on Google’s Lighthouse, which takes measurements in a simulated environment.

However, since Core Web Vitals are about user experience, PageSpeed Insights also displays real-life data from the Chrome User Experience report if available. Therefore, we recommend using PageSpeed Insights as it can be more reliable than GTMetrix.

Improving Core Web Vitals: A Step-by-Step Guide

The most important part is to know how to improve the Core Web Vitals metrics when testing shows it’s necessary. Therefore, let’s go through each of them and explain what you can do for that.

We will first give you manual options and then show you how you can achieve the same with WP Rocket.

How to Optimize Your Largest Contentful Paint

Reducing the Largest Contentful Paint score takes a two-pronged approach: improving page loading speed in general and the delivery of your LCP elements. If you don’t know what the latter is, PageSpeed Insights will show you under Diagnostics.

Implement Caching (Page + Browser Caching)

Website caching stores page data to make it faster to access for visitors. The two main types of caching are page and browser caching.

The first one means saving pre-rendered HTML versions of your web pages on the server and sending them directly to your visitors’ browsers. This is especially effective when using a content management system like WordPress, where pages are usually created dynamically from PHP code and content pulled from a database. Doing it beforehand can save a lot of processing time.

In browser caching, a copy of your website files is stored on your visitors’ hard drives. That way, they don’t have to download them again but can use them from local storage right away.

Your web host should take care of your page caching since it happens directly on the server. To enable browser caching, you have to add some markup to a server file named .htaccess.

Optimize the Code

Since websites largely consist of code, anything you can do to optimize its delivery and processing will help improve your Largest Contentful Paint. You have several options here:

• Text compression – enable GZIP compression to shrink your website files, making them faster to download and process in the browser.
• Minification – remove all the formatting from website files with tools like Minifier or Grunt. While line breaks, indents, and others make the text more readable for humans, they only slow the browsers down.
• CSS and JavaScript optimization – set up your CSS and JS files so that they eliminate render-blocking resources.

Preload Critical Assets

Preloading tells the browser to prioritize certain website files in the loading process instead of waiting until it is their turn to load. It also caches file, so they are immediately available when needed. You can use it for critical components in your site’s <head> with the following code:

<link rel="preload" as="script" href="important-script.js">

This works for scripts, style sheets, fonts, and images. It’s a good way of making sure that your LCP elements are fetched as quickly as possible so they can show up fast.

However, if you set everything to preload, it won’t have any effect. Read more about rel=preload to implement it correctly.

Optimize Images

Image optimization refers to reducing their size while maintaining good quality. Doing so is a good idea for website performance in general and for your LCP images in particular. Here’s how you can do that:

• Use modern image formats – formats like WebP are much smaller than JPG or PNG.
• Size correctly – make images as large as they need to be. Don’t make visitors load data they are not going to use.
• Compress images – remove unnecessary data without affecting the visuals.
• Use lazy loading – it keeps images from loading that won’t be visible at first and only fetches them as site visitors scroll down the page. This also prevents wasting bandwidth on non-LCP images so the important ones can load faster.

Use a Content Delivery Network

A content delivery network (CDN) is a network of computers in different areas of the world that contain your website’s files. It enables people to load your website from the server nearest to them.

This can greatly reduce the delivery time, making your entire website faster. Usually, you have to buy a content delivery network separately from your hosting account and then connect your site to it.

For your convenience and better results, we have built our own CDN.

Preconnect to Third-Party Sources

When speed-testing your website in PageSpeed Insights, you might encounter the Preconnect to required origins warning.

Preconnecting is similar to preloading but for third-party content like externally hosted videos or social media content. It makes the browser establish a connection to other domains early so it can pull in content quickly for the LCP elements, if necessary.

It looks like this in the head section:

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

An alternative is dns-prefetch. It does the DNS lookup before connecting to another website. However, it might increase the loading time, especially if you add many prefetch requests.

In short, use dns-prefetch for resolving DNS for many assets at once, while preconnect should be reserved for establishing connections to crucial resources.

Fixing Cumulative Layout Shift

In this next section, let’s talk about how you can work on Cumulative Layout Shift to improve your Core Web Vitals score.

Add Image Attributes

One of the biggest contributors to layout shifts is images without height and width attributes.

With defined sizes, the browser knows how much space to reserve for it, even if the element takes more time to load. That way, it doesn’t just pop into the browser out of nowhere, moving the elements below it. This is especially important for lazy loaded media, which doesn’t show at first page load.

If you are using a WordPress version with the block editor, images should automatically have width and height attributes assigned to them.

You can also set specific sizes inside the editor:

Reserve Space for Embeds, Iframes, and Ad Slots

What goes for images also applies to other dynamic content like embedded elements or ads. It’s fine if they take longer to load as long as you make sure the browser understands where they will appear and how much space they will need. This can be problematic because you can’t always control these elements’ size.

Luckily, the WordPress editor also defines the width and height for embeds.

For other elements, you might have to include sizes manually. If you don’t know the exact dimensions, at least include an estimation to reserve the space. Even if the final element ends up larger, the shift won’t be as large, which will lead to a better CLS score.

Preload and Optimize Fonts

Fonts can also cause layout shifts. When using custom fonts, the two most common problems are:

• Flash of Unstyled Text (FOUT) – a visitor first sees text in a standard font. Once the custom font loads, the text changes shape, leading to layout movement.
• Flash of Invisible Text (FOIT) – there is no visible text at all at first. It only appears together with the web font.

Strategies to avoid these include:

• Use the right font format – just like for images, there are larger and smaller file formats. WOFF or WOFF2 are usually the fastest to load.
• Define a fitting fallback font – using a fallback typeface that is very similar to your actual font avoids movement when switching from one to the other. Use Font Style Matcher to find fitting options.
• Preload fonts – place web fonts early in the document and add rel=preload so that browsers prioritize them. Using a CDN also helps with fast font delivery.

Manage Dynamic Content

Dynamic content consists of elements that appear after a page has already loaded. It can be lazy loaded images, banners, forms, or even related products. The advice for keeping them from ruining your CLS score is similar as for the above:

• Define containers with fixed dimensions beforehand.
• Connect their appearance with a user interaction, so it does not carry a CLS penalty.

How to Improve INP

Finally, let’s talk about what you can do to address issues with INP and First Input Delay (FID). Much of what we have already mentioned also has a positive impact on INP, including using caching, compression, minification, or a CDN.

Besides that, improving this Core Web Vital mostly comes down to optimizing your code.

Optimize JavaScript

One of the biggest factors in delayed reactions to user input is your site’s JavaScript files. When the browser encounters a script in your website markup, it stops rendering its HTML by default until the script has been downloaded and executed.

Your first option to tackle this problem is to reduce unused JavaScript. Speed testing tools usually give you this warning with problematic files.

If you have a lot of redundant JavaScript code on your site, make sure to leave only the essential code snippets.

For the scripts that stay on your website, control when they execute by using defer and async.

The defer attribute moves the JavaScript execution to the end of the loading queue, while async tells the browser to download it in the background and only execute it after that.

Here is an example of how to use them:

Reduce Unused CSS

Everything that applies to JavaScript is also valid for CSS. Downloading and processing style sheets can keep the browser busy and delay its reaction to user input.

Here, you can also use speed testing tools to find unused CSS. Split your style sheets to load crucial CSS first or inline it.

Optimizing Core Web Vitals: A Case Study With WP Rocket

Let’s put the technical information aside and go over a case study. We’ll show you how WP Rocket, one of the best caching plugins for WordPress, makes improving Core Web Vitals very easy.

Test Setup and Initial Measurements

For this case study, we have set up a website on Hostinger’s Business web hosting plan. From the best free WordPress themes, we installed Kallyas and imported one of their starter sites to have realistic content on the website.

In addition, we installed the most popular plugins for SEO, security, and backups. There also are some that the theme came with.

The first result from PageSpeed Insights wasn’t that great.

• Performance score: 44 (mobile), 68 (desktop)
• LCP: 12.7 s (mobile), 3.8 s (desktop)
• TBT (there is no FID or INP data yet): 670 ms (mobile) version, 10 ms (desktop)
• CLS: 0.02 (mobile), 0.016 (desktop)

Besides the general low score, the Largest Contentful Paint was too high, and Total Blocking Time for mobile visitors needed improvement as well. The only thing that wasn’t a problem was the Cumulative Layout Shift.

When we look at the Opportunities and Diagnostics sections, we see that it includes many actions that we talked about above, like eliminating render-block resources, reducing unused code, and, most importantly, serving images in next-gen formats. There is also a hint to serve static assets with an efficient cache policy.

Let’s see what we can do to fix them.

WP Rocket Improvements

Once you install and activate the WP Rocket plugin, it automatically activates caching. In the plugin settings, under File Optimization, we switched on the options to minify, optimize, and defer CSS and JavaScript on the site.

Under Media, we enabled lazy loading for images and told the plugin to add missing image dimensions.

In addition, we made sure preloading is activated.

Finally, under Image Optimization, we installed Imagify – a companion plugin to WP Rocket. For further speed improvements, we ran all the media on the test website through its bulk optimizer.

Besides compressing the images, this also converted them to the WebP format. We also switched on the option to display them in that format on the site.

Besides the above, we also could have used these options WP Rocket offers:

• Prefetch DNS requests.
• Preload fonts.
• Clean up the website and database (not necessary on a new website).
• Connect to a CDN.

However, for the sake of this case study, we thought the above was enough.

Let’s find out if it was.

Optimization Results

After making the changes above and configuring the caching plugin, we retested the website. Here are the results:

To make it easier to understand, check out the table below:

	Before	After	Change
Performance score (mobile)	44	69	+25
Performance score (desktop)	68	97	+29
Largest Contentful Paint (mobile)	12.7 s	4.7 s	-8 s
Largest Contentful Paint (desktop)	3.8s	1.0s	-2.8 s
Total Blocking Time (mobile)	670 ms	130 ms	-540 ms
Total Blocking Time (desktop)	10 ms	10 ms	+/-0

The Opportunities and Diagnostics sections also look much better, with most of the earlier recommendations gone or their numbers greatly improved.

While there is still room for further optimization, we would have to dive more deeply into the page structure and code. Considering the fact that making these changes took only a few minutes and a few clicks to implement, the results are already great.

In addition, they will have long-term positive consequences for this website’s user experience and ranking potential.

Conclusion

Taking care of your Core Web Vitals improves your website quality, user experience, and search engine optimization (SEO). Simply put, you should definitely take it seriously.

Hopefully, this topic will no longer be intimidating to you. Once you understand the different metrics and which factors influence them, it’s just a matter of a few clicks. If some of them seem too technical, you can use a plugin like WP Rocket to do it for you.

While website performance and user experience are perpetual topics that need revisiting from time to time, optimizing your site for Core Web Vitals is a great beginning.