Core Web Vitals: what these metrics are and how to optimise your site

User experience is crucial for websites and online shops. A good user experience helps keep visitors on your site, making them more likely to become customers.

Besides engaging content and a logical customer journey, there are other fundamental aspects like speed and site responsiveness that can make the difference between a good or a poor user experience.

To help quantify those aspects of the user experience, Google has introduced Core Web Vitals, a series of metrics designed to help site owners understand how visitors experience their site.

In this guide, we explore what Core Web Vitals are and what they measure; how your score on these metrics impacts search engine rankings; and give you tips on how to improve your scores.

What are Core Web Vitals?

Core Web Vitals were introduced by Google in 2020 as specific metrics for assessing and measuring the user experience of web pages. With these metrics, Google aimed to provide site owners and developers with insights into the performance of their sites.

The metrics have a focus on three aspects: loading speed, visual stability, and interactivity. Google initially rolled out three metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Due to limitations with FID, it was recommended that it be discontinued and replaced. In March 2024, a new metric officially rolled out called Interaction to Next Paint (INP), with site owners having until late 2024 to update to INP.

If these metrics don’t mean anything to you yet, don’t worry! We will now go into the meaning of the three current metrics.

Largest Contentful Paint (LCP)

This metric measures loading speed of a webpage. More specifically, LCP tracks the time it takes for the largest content element – whether it’s an image, video, or block of text – to become visible to the user. This element is often referred to as the “hero” element, and it’s typically the primary piece of content that users are waiting to see when they visit a page.

LCP is important because it directly affects the perceived loading speed and thus the user’s experience with a website.

According to Google, these are the ranges for LCP loading times: 

✅ Good – 0 to 2.5 seconds

⚠️ Needs Improvement – 2.5 to 4 seconds

🆘 Poor – More than 4 seconds.

Interaction to Next Paint (INP)

INP measures the speed at which a website reacts to user interactions, such as clicks or keystrokes. To be more precise, INP measures the time that elapses between a user’s interaction, like a click or key press, and the subsequent visual update presented to the user on the webpage. This metric gives an indication of how users perceive the responsiveness of a website following their actions.

INP was officially introduced in early 2024 and it replaces an earlier metric, First Input Delay (FID), which similarly measured the time lapse between a user interaction and the event processing of a webpage.

Here’s Google’s scale for INP scores:

✅ Good – 200 milliseconds or less

⚠️ Needs Improvement – 200 to 500 milliseconds

🆘 Poor – More than 500 milliseconds.

Cumulative Layout Shift (CLS)

If you’ve ever tried to read an article, only to have the text continuously pushed down the page by slow-loading ads and banners, you know how frustrating it can be to experience an unexpected layout shift.

That’s where CLS comes in. It analyses how stable a website’s layout is while a user interacts with the page. It quantifies how much elements on the page unexpectedly shift or move around as the page loads and during user interactions.

This is an important metric as unexpected layout shifts can anger users, especially if they end up clicking on the wrong element due to the page shifting mid-action.

CLS is calculated based on both how much of a page is moved and how far it moves. A small text that is moved a short distance thus gets a lower value than a large image that is moved a long way. 

For CLS, these are the scores as suggested by Google:

✅ Good – 0.1 or less

⚠️ Needs Improvement – 0.1 to 0.25

🆘 Poor – More than 0.25.

Why Core Web Vitals matter

Now that we’ve covered what these metrics measure, it’s time to explore why it’s important to stay on top of these metrics, and how these aspects impact both user experience and search engine optimisation (SEO).

Impact on user experience

Core Web Vitals measure aspects that directly influence how your users experience your website. Factors like loading speed, interactivity, and visual stability all contribute a great deal to how users perceive and interact with a site.

A smooth user experience helps boost engagement, encourages return visits, and for ecommerce, it ultimately leads to higher conversion rates.

Even a slight improvement in page speed can lead to significant improvements across the entire buyer journey, which ultimately translates to increased conversions and revenue.

Impact on SEO

With Google being the dominant search engine worldwide, these metrics also have a substantial impact on its search engine rankings. Websites that provide a superior user experience, as reflected in their Core Web Vitals performance, are more likely to rank higher in search results.

How to measure Core Web Vitals

Google offers a range of tools and resources to help website owners and developers assess and improve their Core Web Vitals performance.

A couple of fundamental tools for measuring Core Web Vitals are Google’s Lighthouse page audit and its PageSpeed Insights.

Lighthouse is an auditing tool that tests your website against controlled lab data to provide a detailed report for a variety of metrics, including Core Web Vitals. You can use Lighthouse as a plugin for Chrome or launch it through the command line.

PageSpeed Insights is a service from Google that checks the performance of your site and provides a detailed report for each of the Core Web Vitals. It differs from Lighthouse in the data it uses.

Lighthouse sticks to lab data only, while PageSpeed Insights uses a combination of the Lighthouse lab data and real-world usage data that allows you to get closer insights into the real user experience of your site.

Both tools are free and provided directly by Google to help website owners optimise their sites and improve their Core Web Vitals scores.

Web developers can also utilise browser developer tools, such as the Performance panel within Chrome DevTools, to measure Core Web Vitals directly in their development environment.

These tools offer real-time feedback and debugging capabilities, allowing developers to find and address performance issues during the development process.

How to improve Core Web Vitals

Optimising Core Web Vitals is important for ensuring a great user experience and to drive the success of your website. Here are some general strategies to help improve your website’s Core Web Vitals performance:

Make sure your hosting and server performance are top-notch

Choosing a reliable hosting provider is the first step you should take to ensure fast response times and minimal downtime. one.com, for example, is an excellent, reliable hosting provider with 99.99% uptime guarantees and high-performance servers that ensure ultra-fast speed.

You can also consider introducing content delivery networks (CDN) to speed up your performance. These networks of servers help distribute content load globally, which can help reduce latency and improve loading times.

Optimise key content and minimise resources

Compress and resize images and videos to reduce their file size without compromising quality. Using modern image formats like WebP and lazy loading techniques to prioritise loading critical visuals are both actions you can take to help improve your Core Web Vitals.

Another key action you can take is to ensure that the most critical content on your site loads quickly and is accessible to users as soon as possible. Use resource prioritisation to help load above-the-fold content faster than other parts of the site.

Plugins to help your WordPress site 

For WordPress users, Core Web Vitals optimisation can be aided by plugins. Here are two popular plugins that can help in improving your WordPress site’s Core Web Vitals performance:

WP Rocket

WP Rocket is a comprehensive caching plugin that enhances various aspects of website performance, including page caching, browser caching, and minification of CSS and JavaScript files. WP Rocket can help improve loading speed by optimising resource delivery and rendering. 

Imagify

Imagify is a powerful image optimisation plugin that helps reduce image file sizes without sacrificing quality. By optimising images, Imagify can improve visual loading times and contribute to a faster Largest Contentful Paint (LCP) score. 

By implementing these strategies and tools, you can effectively optimise your website’s Core Web Vitals and give your visitors an enjoyable browsing experience while boosting your search engine rankings. 

Prioritise Core Web Vitals for a successful site 

Core Web Vitals are essential metrics for assessing user experience on websites. By focusing on factors like loading speed, interactivity, and visual stability, website owners can create a smoother and more engaging browsing experience for their visitors.  

Moreover, with search engines like Google prioritising user experience metrics in their ranking algorithms, optimising Core Web Vitals is critical for SEO and for driving organic traffic to your site. 

As we’ve explored in this guide, improving and keeping track of your Core Web Vitals requires strategy and usage of additional tools and resources. There are different actions you can consider, for example optimising images and scripts, prioritising critical content, or implementing WordPress plugins like Imagify and WP Rocket.  

Every step taken toward enhancing Core Web Vitals contributes to a better user experience and helps your website stay high-ranking and competitive.