Core Web Vitals Optimisation

Google uses around 14,000 signals to determine a website's quality. We can’t optimise for all of them. It’d be impossible and unnecessary. 

Core Web Vitals is part of these 14,000 signals. A big part. Luckily, it’s easy to measure, implement, and improve, so it’s something we can focus on. 

And the best part? The rewards given to those who optimise Core Web Vitals are superb. 

What are Core Web Vitals? 

Core Web Vital consists of three main aspects of the user experience:

• Largest Contentful Paint (LCP): Measures loading performance. 
• Interaction to Next Paint (INP): Measures interactivity. 
• Cumulative Layout Shift (CLS): Measures visual stability. 

Core Web Vitals Benchmarks

Google recommends benchmarks with Core Web Vitals. These are the numbers you should be trying to achieve: 

• Largest Contentful Paint (LCP): LCP should appear within 2.5 seconds of when the pages start loading. 

• Interaction to Next Paint (INP): Pages should have an INP of 200 milliseconds or less. 

• Cumulative Layout Shift (CLS): Pages should have a CLs of 0.1. or less.

Also, it’s important to note that Google uses a 75th percentile value of all page views to a page. This means that if 75% of the page’s views have met the benchmarks set above, it’ll be considered “good”. It doesn’t need to be 100%. 

Why are Core Web Vitals Important? 

Core Web Vitals focus on user experience - an essential part of SEO.

Good Core Web Vital ensures a smooth, fast, and stable experience for users. 

Load speed, in particular, plays a huge role in the Core Web Vitals. Poor load speed means higher bounce rates (aka a poor user experience). 

Google even announced that bounce increased by 32% when load times go from 1 to 3 seconds. 

And it gets worse. An additional resource from Backlinko showcases this: 

Source: Backlinko 

If you optimise Core Web Vitals, however, load speed increases.

This means the bounce rate is decreased, and more customers will likely remain and return to your website - improving SEO performance. 

How Core Web Vitrals are Measured 

When measuring LCP, INP, and CLS, tools typically follow the below procedure. 

How to Get a Core Web Vital Score 

There are a few ways that you can get a Core Web Vital score. 

SEO Tools

The most popular way is through using a site audit tool like SEMrush. With these, you can get a full technical “check-up” on your website, along with some performance indicators for your Core Web vitals. 

Please note there are a lot of SEO tools that can perform this task.

Some are better than others. It all depends on your budget and performance. 

Chrome User Experience Report (CrUX)

You can also use CrUX, which is a free tool. Just go to the CrUX dashboard, enter your URL and get a Core Web Vital report. 

Once entered, you can get a full understanding of your Core Web Vitals for free.

As you can see from the above report, you have a good overview of LCP, INP, and CLS, all in one place. 

Google PageSpeed Insights

Another free tool you can use is Google PageSpeed Insights (PSI). Unlike other tools, however, this only performs a Core Web Vital report on a single page (whichever you input). 

Google Search Console

Lastly, you can also find a “Core Web Vitals” report inside Google Search Console. Just go to “Experience” on the left-hand side and then “Core Web Vitals”. 

Core Web Vitals Optimisation 

You now know what Core Web Vitals are, why they’re important, how they’re measured, and how to get a score. Now, for the most important part of this post: core web vitals optimisation. 

Loading Time (Largest Contentful Paint - LCP)

Improving load time is very important. It ensures that the page loads as quickly as possible so the user can gain access to the information on it. 

Speed Up Server Response

To speed up server response, you most likely need better hosting, a more optimised database, or a content delivery network (CDN). Focusing on these areas can help reduce the first byte (TTFB) and enhance load speed. 

Remove Render-Blocking JavaScript & CSS

Another technique you can use is to eliminate or defer non-critical JavaScript and CSS files that may be blocking rendering. You can do this by using ‘async’ or ‘defer’ for JavaScript and prioritising important CSS. 

Optimise Resource Loading

Lastly, compress and optimise images, videos, fonts, and other resources. The smaller the file size, the quicker it’ll load. You can use tools that deploy lazy loading if you have large pages. 

Interactivity (Interaction to Next Paint - INP)

Interactivity is all about the time it takes for the user to be able to interact with your site. Again, you want this as fast as possible for the best Core Web Vital score. 

Detect Interactivity Issues

Use tools such as Google PageSpeed Insights or Lighthouse to find any interactivity issues. What you’re looking for are long-running tasks or delays that need addressing. 

Anything that’s considered a “Red” or “Orange” error on let’s say, Google PageSpeed Insights should be looking at. You should also prioritise “Red” errors over “Orange” as they’ll have the most impact on results. 

Minimise JavaScript Execution Time

You should also break up long-running JavaScript tasks into smaller chunks. People like to call this the RequestIdleCallback or Splitting Code technique. 

JavaScript can be pretty advanced. For this reason, we recommend that you hire a web developer if you don’t know what you’re doing. It shouldn’t cost too much, and the results will be greatly beneficial. 

Streamline Large JavaScript Bundles

You can also reduce the size of JavaScript bundles. Some people call this “Tree Shaking”. You can also prevent non-critical scripts from loading right away. 

Again, JavaScript can be pretty complex, especially for people with no web development experience. To avoid any issues with your website, we recommend hiring a web developer. 

Visual Stability (Cumulative Layout Shift - CLS)

Visually stability is about ensuring that elements on the page don’t shift unexpectedly, as it could ruin the user experience. 

Update Ads Causing Layout Shifts

If you run ads on your website, you may want to set fixed dimensions in your web page layout. This ensures that they don’t move out of the fixed area and don’t need much time to load or resize. 

Usually, if you run ads through a provider, they’ll set this up for you. Therefore, if you’re running into these problems, request them to help. 

Set Dimensions for Cookie Banners

If you haven’t already, set the dimensions for your cookie banners. This can be said for all UI elements. 

Like with the ads, cookie banners, if they haven’t got specific dimensions or fixed dimensions, they take longer to load due to resizing. 

Plus, it just makes your website a lot clearer if they have a set area to load. 

Resolve Dynamically Injected Content

You should also prevent unexpected content injections. You can do this by allocating space for dynamic elements, such as loading animations, pop-ups, etc. 

Again, like with the above, having a dedicated space for these elements helps reduce load time and, therefore, boost your Core Web Vital score. 

Final Word

After reading the above, you should know a lot more about Core Web Vitals. You should know what it is, how it’s measured, the benefits of a good score, and, most importantly, how to optimise it. 

Now, the only thing left to do is do it.

First, the issues are detected through an SEO audit.

From here, you can determine what you can fix and what you need to outsource to an SEO agency.

You can then perform the optimisation steps above one at a time.