Core Web Vitals in 2024: What’s changed and why they’re important

Core Web Vitals, a series of web performance-related metrics to measure real-world user experience, were initially rolled out by Google in 2020. Later confirmed as a search ranking factor, information regarding Core Web Vitals scores and areas for potential recommendations can be accessed in Google Search Console and other tools.

In March 2024, Google introduced a change to the Core Web Vitals with the introduction of a new Interaction to Next Paint metric.

What are the Core Web Vitals?

• Largest Contentful Paint (LCP): measures how fast a webpage loads from a user’s perspective

• Cumulative Layout Shift (CLS): measures how a page’s layout may shift when a user interacts with certain elements (often referred to as “visual stability”)

• Interaction to Next Paint (INP): measures responsiveness aspects after a page has fully loaded, with areas such as submissions on contact forms, interacting with areas on the navigation and potential JavaScript elements all being accounted for. This metric replaced First Input Delay (FID) in March, as Google stated that it “was needed to capture aspects of interactivity on the web that FID did not.”

Each of these metrics can be analysed within Google Search Console and in particular on the PageSpeed Insights tool. The metrics are grouped into three different scoring categories: “Poor”, “Needs Improvement” and “Good” to help webmasters and their teams identify and prioritise accordingly.

Why are Core Web Vitals important?

Ever since Core Web Vitals were confirmed as a search ranking factor by Google, this particular area of SEO inevitably became a topic of great interest within the industry with many hypothesising on the potential impact of getting “Good” scores across the board and the best way to achieve this. 

While obsessing over achieving perfect scores across every URL may not be the most fruitful pursuit, Core Web Vitals tallies with a lot of the messaging Google has been giving in recent years over rewarding content that gives users a good page experience, and is clearly a key component of this. The fact that Core Web Vitals remains a key part of Google’s messaging on SEO and web performance guidelines and feature as a key report within Google Search Console also confirms this.

What tools can I use to measure Core Web Vitals?

Google Search Console

The Core Web Vitals report within Google Search Console can be a good place to start, providing real-world data on how users may be experiencing your site. 

Under the “Experience” sidebar, you can get a sampled overview of the Core Web Vitals scores for your website by clicking on the Core Web Vitals sub-menu item:

Upon opening the report (here we’ve looked into the “Mobile” report) you can get some more detail with a bar chart depicting some of your pages and their respective scoring. Clicking on “Poor” and “Needs Improvement” will filter the bar chart by the offending URLs that don’t pass mustard in this department, and you’ll then be presented with a report on why this is:

When clicking through onto these individual lines, you’ll then be presented with a list of URLs that fall into some of the above categories, or where there are improvements to be made on other Core Web Vitals metrics.

Google Search Console won’t provide explicit guidance on what can be done to these listed URLs to help them pass Core Web Vitals scores, though will provide data assigned to each URL on why it hasn’t passed or needs improvement. This could be having a URL with an INP score over the recommended 200 milliseconds or with an LCP over the recommended four seconds, for example.

Google PageSpeed Insights

To gain further actionable insights on real-world data to improve performance, we can head over to Google PageSpeed Insights and run some tests. 

By entering any one of the “Poor” or “Needs Improvement” URLs into the PageSpeed Insights tool, we will then be presented with a diagnosis of some of the offending areas:

Scrolling further down into the “Performance” section of this report, we can then get a view of a number of diagnostics on the selected URL that may be contributing to poor Core Web Vitals scores:

Collapsing some of these individual areas will then present you with some examples within each of these diagnostics. For example, under “Reduce the impact of third-party code”, PageSpeed Insights may pull up examples of analytics or tagging scripts that are slowing the page down. Similarly, “Eliminate render-blocking resources” will do the same in providing some examples of code that is blocking the first paint of your page - an area that directly impacts the LCP metric of Core Web Vitals. 

Each of these diagnostics has useful links to Google’s documentation on what the problems relate to and how businesses can proceed with making improvements. 

Of course, it goes without saying that simply following these recommendations to obtain improved Core Web Vitals scores isn’t advised, as it is likely that some of these third-party scripts or other flagged resources serve an important purpose in the functionality in the overall digital ecosystem of your website. Heavy JavaScript may well be an issue, though removing the offending piece of code may break a core aspect of its functionality. In addition, third-party code may be related to analytics scripts that serve a vital purpose in assessing how paid media or user experience metrics (for example) are measured. 

There may well be savings to be made, but it’s important to bring these diagnostics to the table with your wider digital team to ascertain how to move forward accordingly. 

A good way to quickly spot potential recurring issues across your site that could be tackled on a templated basis (if they are indeed genuine instances of superfluous scripts or non-deferred JavaScript, for example) is to connect the PageSpeed Insights API to crawlers such as Screaming Frog and then get insights on an individual URL basis at scale. 

Chrome Dev Tools

Chrome DevTools, a popular browser plugin, allows you to debug a page’s performance through the lens of Core Web Vitals scores with relative ease on a page-by-page basis. Opening the Performance panel, we can record the performance of a page load which then presents us with an overview of activity in the browser tab.

The tool will present a waterfall view of all network requests that can give you a sense of which tasks or resources on the pages are contributing to metrics such as LCP. Long tasks are easily identifiable in the waterfall view, with DevTools providing a summary of the potential issues related to load speed in relation to these requests.

GTmetrix

GTmetrix is another handy third-party site speed tool that offers additional insights and diagnoses on individual pages in terms of performance and web vitals scoring. The tool requires a paid subscription, though registering for free will allow you a selected number of free checks on pages.

The tool pulls in a number of insights in relation to Core Web Vitals scores and details a number of recommendations in terms of potential savings to be made as well as a similar waterfall visualisation on request timings across various resources. Along with the deeper insights provided by PageSpeed Insights as well as through live debugging in Chrome DevTools, GTmetrix can be a great addition in uncovering actionable insights on areas to improve performance-wise. 

Image: web.dev

What are some recurring areas to improve your Core Web Vitals?

We’ve highlighted examples of some of the potential contributing factors to poor Core Web Vital scores (such as third-party scripts) though taking a look back at the three metrics, let’s walk through some common areas attributed to each.

Largest Contentful Paint (LCP)

LCP is a metric that measures how quickly a webpage fully loads from a user’s perspective. Heavy resources such as images or CSS, which can be compressed and served in next-gen formats such as WepP (in the case of images) can be a good place to start when looking to make improvements here. More over-arching fixes such as enabling page caching and upgrading your hosting to a server (such as dedicated or cloud hosting) can also help here. 

Other common ways to improve your site’s LCP are to audit any old or unused third-party scripts. Businesses over time may experiment with different tools or ways of tracking performance, may deploy certain technologies such as widgets or chatbots or make use of a variety of plugins in popular CMSs like WordPress. Third-party tools may leave traces of legacy code even if they’ve been uninstalled, and this can slow loading times. If there are clear examples of legacy third-party code from technologies that aren’t being used, then purging these completely can help.

Read more on optimising for LCP on web.dev. 

Cumulative Layout Shift (CLS)

CLS relates to the visual stability of a webpage when a user scrolls down or interacts with certain elements of a page. An extreme example of this can be local news websites, where the use of banners, pop-ups or ads can provide a frustrating experience when trying to read certain articles. This can even lead to poor user experience when users are trying to complete conversion-based actions such as clicking on “buy now” or “add to basket”.

A common cause of poor CLS scores is by adding images or ads, embeds or iframes without dimensions. Adding width and height attributes can be of immediate help here, allowing for everything to fit neatly into the browser interface as a user interacts with the page. Similarly, ensuring that ads have a dedicated space on your pages and don’t suddenly pop up and appear in certain areas of the page and shifting the content up or down is vital.

In addition, avoiding web fonts is advised as they will need to be downloaded before the browser can display them. It’s best to use system-based fonts that are commonplace on most devices.

Read more on optimising for CLS on web.dev.

Interaction to Next Paint (INP)

INP observes a page’s responsiveness to user interactions on a page after the page has finished loading. This can be clicking on a certain element on the page in question once the page has fully loaded.

JavaScript can be a key contributor here. If there are too many bulky JavaScript elements on your page that are slowing down the interactivity of the page, whether this is around certain menu items or submitting forms. While tools such as PageSpeed insights will be able to quickly flag up the main offenders, you’ll want to ensure that site functionality isn’t compromised in addressing certain JS files. Instead, focus on opportunities where you can minify or defer JS code where possible. Like CLS, third-party scripts can also contribute to poor INP scores, so fully removing non-essential scripts can help here. 

Read more on optimising for INP on web.dev. 

Core Web Vitals as an ongoing part of SEO

Under the wider umbrella of user experience, Core Web Vitals should play an iterative role in your general SEO programme. Achieving perfect scores across all URLs should not be the goal here, and like all major SEO ventures, the opportunity for improvement needs to be framed around the overall commercial outcome.

Perfecting scores on deep set URLs within your site architecture may not be the most fruitful use of your SEO and developer’s time, though if there are clear signs that poor Core Web Vitals scores may be linked to faltering user interaction metrics on key pages, then it may be time to act.

There is no right or wrong time to start optimising for Core Web Vitals. Perhaps if your business is gearing up for a site migration, then this may be a good time for potential bulk fixes in the Core Web Vitals departments where you could address certain recurring issues in one fell swoop with a new codebase or site framework. 

Outside of this, and as your website evolves and takes on new content types or ways to measure performance with third-party tools and scripts, keeping Core Web Vitals and general page experience metrics in the conversation on an ongoing basis is advised. 

About the author

Michael Carden-Edwards is SEO Strategy Lead at Reddico. A seasoned SEO and digital marketing expert with 13+ years of experience, Michael has directed SEO strategies for major brands like British Airways and O2 as well as conducting countless public and internal SEO training sessions. Based in Sevilla, he joined Reddico in 2021, enjoying the flexible working and unique culture from a sunnier climate.