Understanding Google’s Core Web Vitals & How They Influence SEO

We’ve all been there. Whether browsing the web in the hopes of getting the best deal or perhaps searching for your next all-inclusive adventure – there’s always a sense of frustration when greeted by a long, jagged page load.

In fact – with network speeds increasing exponentially over the past 20 years (not to mention the emergence of instant gratification and accessible social media platforms), there has been a subconscious shift from fast page loads being seen as a luxury, to now where it is an expectation.

With the average human’s attention span sitting at around 8.25 seconds, a long page load can be the kiss of death for a website (that’s before someone’s even viewed the content).

So how exactly do we as digital marketers measure the difference in page loading in order to make improvements? How can this benefit website search engine optimisation?

Google’s Core Web Vitals

Simply put, Google’s Core Web Vitals are a list of 3 real-world measurable UX metrics first created by Google back in 2020. They are

• Largest Contentful Paint
• Interaction to Next Paint (formerly First Input Delay)
• Cumulative Layout Shift

 

These metrics compound the increasing focus from Google algorithms at prioritising high-quality helpful content. Passing these metrics ensures your page offers a seamless user experience as opposed to just being pretty and built specifically to rank within search results.

Given the importance of the landing page to succeed across all disciplines of digital marketing, adhering to the core web vitals has become more important than ever in the eyes of both the user as well as the search engine.

Another factor to consider is the difference between device type (mobile, desktop, tablet etc) and how this can impact site performance. Mobile and desktop commonly have different Core Web Vital scores (from platforms such as Page Speed Insights), making it important to analyse performance on both device types. From our experience, most websites tend to prioritise desktop performance, leaving a good chunk of users with a worse user experience on mobile, despite the continued growth in users for B2B and especially B2C industries.

What Are the 3 Core Web Vitals?

First of all, what exactly are Google’s Core Web vitals, how are they are measured, and how do they impact site performance. Each one of these covers a different side of site UX (user experience) and so optimising them is paramount to optimal performance through reduced bounce rates, longer time on page and greater conversion rates.

Largest Contentful Paint

Starting us off, we have Largest Contentful Paint (LCP).

LCP measures the time it takes for a web page to load the main largest element of a page – be it an image, video or CSS files.

Think of a time where you have opened a page and just sat staring waiting for the main image to load. This is the LCP. Factors influencing LCP include server response times, render-blocking JavaScript and CSS, resource load times, and client-side rendering.

What Score do I Need to Pass LCP

According to Google themselves, passing LCP requires a load of 2.5 seconds or lower.

What Impact Does a Slow LCP Have on User Experience?

While you might think an overall strong page load but slow LCP might not have a major impact on performance, the reality is… a failing LCP score can be the difference between a conversion and a bounce-off to a competitor.

You might have an ecommerce site with a unique USP and some of the best product offers on the market, but if you have a ‘sale now on’ banner that is the main focus above the fold and this fails to load… users are likely to leave before even seeing what you have to offer.

Below are just a few of the negative impacts a slow LCP can have.

• Higher bounce rates
• Reduced click-through rate
• Frustration and negative branding
• Damaged SEO standing (see further down)

A passing LCP score has the exact opposite impact. It highlights a faster-perceived load to the user, meaning they see content quicker and are more likely to engage with the page and less likely to bounce off. If you can provide a faster site load than others, then the competitive advantage here can make a real difference.

Tips for passing LCP

Taking the above into consideration, if you find that your Largest Contentful Paint score is failing for either desktop or mobile then there are a few steps you can take to improving the load of the largest element. Here are some of our top tips:

Optimising Server Response Times: A fast server response time is the foundation of a good LCP score.

Consider researching how quickly your server responds to requests as well as implementing a content delivery network to deliver content faster (this is especially important for websites that target across different regions but fire from a server in the one country – think tour operators or global ecom sites).

Optimise Page Resources: Reduce resource size and prioritise loading. Compress images (WebP), preload critical resources, and minimize CSS/JavaScript. Optimise web fonts with efficient formats and fewer requests.

Caching: Implement effective caching. Leverage browser caching with proper headers and use service workers to cache resources for repeat visits.

Consider the Largest Element: Identify and optimise the LCP element. Use developer tools to find it, then focus on improving its loading time, whether it’s an image or text.

It’s useful to consider that the effectiveness of each suggestion above will be entirely dependent and unique to your website. As such, diagnosing the issue behind a slow LCP should be the priority before taking any action.

Interaction to Next Paint

Next up we have Interaction to Next Paint (INP).

INP essentially measures how responsive a webpage is to user interactions or in simpler terms – how long is the time between a user interacting with a page and the browser/page responding to that input.

The score given is based upon 3 equally important interaction latency measurements which form together to create the INP:

• Input Delay: This is the first stage of INP and relates to the time it takes between the user interacting with a page and when the associated action begins to occur. For instance, the time it takes between physically clicking on a mouse to the site actively registering that action.
• Processing Time: After that, it’s processing time. This is the time between the site acknowledging the user’s input (click, scroll etc) and generating the appropriate page response. Between this, the system must process what this (the user action means) and what the appropriate response will be when feeding back to the user.
• Presentation Delay: Once the appropriate action has been determined by the system and generated, the final latency measurement reflects the delay in displaying this information to the user.

Again, think of a time when you’ve visited a website for the first time. The content may have loaded (thanks to passing the other CWVs) yet if you try clicking a link on the page and receive no visual response for a few seconds, this is representative of a poor and likely failing INP through an extensive input delay for the user.

It’s also worth noting that INP is a relatively new core web vital that has replaced the previously used First Input Delay as of March 2024 – a role out with one of Google’s biggest algorithm core updates. As the name suggests, First Input Delay focused solely on the delay within the first input event. INP takes a more all-encompassing overview, measuring presentational and processing delay.

What Score do I need to Pass INP

According to Google’s Core Web Vital Metrics, a sites INP score should be no longer than 200 milliseconds.

What Impact does a slow INP have on user experience?

If you’re clicking on something and receive no confirmation, it can make for one frustrating user experience.

When users interact with a website and encounter noticeable delays, they perceive the site as unresponsive or broken, often leading to “rage clicks” and heightened dissatisfaction. This sluggishness contributes to a perception of poor quality, damaging the website’s credibility and eroding user trust.

Below are just a few of the negative impacts a slow INP can have.

• Higher bounce rates
• Reduced time on site
• Reduced conversions
• Damaged brand perception
• Damaged SEO standing (see further down)

Tips For Passing INP

When it comes improving a slow INP across mobile and desktop, there are a couple of actions you can take (it’s again important to note that every website is different and so each will require a unique approach to hit that passing grade).

While some of these might require additional developer support, optimising INP is all about improving site responsiveness.

Reduce DOM Size: The Document Object Model (or DOM for short) is something seen on every web page, representing the structure and hierarchy of a web document almost like a tree and allowing for dynamic webpages. A large and complex DOM size however can slow down browser rendering and JavaScript execution – leading to a slower INP.

It’s important to ensure that a page DOM is only as big as it needs to be – look to remove unused HTML elements and flatten the DOM tree if possible by reducing the depth of nested elements. It can get pretty technical here, so we would highly recommend working with a developer as any incorrect DOM manipulation can cause unintended layout results.

Audit Third-Party Scripts: One of the finer balances when it comes to a website and digital marketing is deciding just what third party scripts are you need and which are not being used.

Any third-party script will introduce additional work into your site’s ecosystem and very slightly slow down the page load – that’s just a fact! However, when it comes to digital marketing, third party scripts for Google Analytics, Google Tag Manager are our bread and butter, allowing us to monitor performance and optimise through a data driven approach.

This is why site owners should look to analyse and audit the third-party code on their site. Identifying what they don’t need and what can be removed to improve the overall page load.

Optimise User Interactions: One simple win to provide immediate visual feedback to the user is to include something like a page loading indicator between page interactions. While this might not provide a direct way of reducing INP, it can reduce user frustration by creating a mental perception that something is happening on the page and that it is loading – where they may otherwise think the web page has frozen/crashed.

Cumulative Layout Shift

The final of the three Core Web Vitals is Cumulative Layout Shift (CLS).

While INP and LCP are more focus on initial performance, CLS is the metric that is measured – and can impact – furthest into the user journey.

So what exactly is CLS?

CLS is a Google quantified score based upon the amount of unexpected element shifting on a page – essentially the visual stability. Imagine you’re scrolling through an article and… suddenly an ad shows up. Or perhaps images and text jolt position – this is an example of a poor CLS. It creates a potentially confusing user experience that can lead to people clicking on areas of a page they didn’t intend.

Google measures CLS on a score between 1 and 0, with 0 representing no layout shift and 1 being the maximum layout shift.

What Score do I need to Pass CLS

For an optimal user experience, Google sets a passing CLS at no greater than 0.1. 0.1 to 0.25 is suggested to need improvement and anything higher than 0.25 is given a failing grade.

What Impact Does A Slow CLS have on User Experience?

Now we’re really into the nitty gritty of Core Web Vitals.

Yes, the page might load and be responsive to button clicks, but if it begins to shift in unintentional ways while a user is scrolling? That can have a massive influence on user experience and subsequent bounce rates.

Below are just a few of the negative impacts a slow LCP can have.

• Higher bounce rates
• SEO penalties
• Accessibility issues
• Extensive damage to mobile experience (which is likely to be affected more by a poor CLS)

A passing LCP instead provides a much smoother experience and can lead to an improved perceived page load, subsequently reducing those pesky bounce rates.

Tips For Passing CLS

When you see the potential impact that a failing CLS grade can have, you’re likely wondering what you can do to get to a passing grade? Do not fret – we’ve got you covered here too.

Width and Heights on Images Plus iFrames: This is probably one of the easiest and simplest wins when it comes to CLS optimisation. By setting the width and height attributes to site images, you are essentially telling the browser the dimensions in advance.

When a browser like Chrome doesn’t have access to this information it will not allocate any space for an image. This means that once the image loads (because the space hasn’t been saved) the other elements on the page will shift in potentially unintended ways.

Continue to Monitor and Optimise: One thing you will find with websites is that new things continuously get added to drive engagement and conversion. What this can mean however is that new CLS issues can be found that were not previously there.

Take an example of a chat window. Very useful as an avenue for engagement, but if not implemented correctly then it’s load in – shortly after the rest of the page contents are visible – can again cause page elements to shift.

This is why auditing is so important when it comes to site engagement and user experience.

Save Space for Lazy Loads: Lazy loading can be a great method of improving page load speed as it ensures below the fold imagery doesn’t load in until it needs to.

Sounds perfect right?

Well if this space isn’t reserved within our good old friend the Document Object Model, then once scrolling below the fold, the image will appear and the on page elements will shift. Not good!

It’s again important to reiterate that each website is different and so the extent of these tips might vary. Any changes here will also likely require developer help so do reach out to them if you have the resource capacity.

How Do Core Web Vitals Influence Site SEO?

So, with all this in mind – what do Core Web Vitals mean for SEO?

Well, quite a lot actually.

While many within the SEO community have both debated for and against the idea that core web vitals (on their own) have an impact on ranking, the indirect impact that user experience has on rankings is undeniable.

This has been especially true since Google’s 2021-page experience update – where a positive user experience was the focus. It’s something that has only become more sophisticated over the years. Factors such as bounce rate and time spent on site (sound familiar?) play a crucial role in overall page ranking as they signal the usefulness of a page to the algorithm.

This essentially means that websites passing Core Web Vitals whilst providing helpful and original content will be ranked much higher in the SERPs compared to a site that continuously fails these vitals with user engagement far lower.

With that said, remember that passing web vitals alone will not necessarily see your website rank at the top of the search results. There are a whole host of potential SEO signals that can also influence ranking (many of which Google doesn’t tell us about).

While every website should look to pass Core Web Vitals in order to improve the user experience and therefore SEO standing, there are a number of other factors to also consider like quality original content, URL structure and backlinking. It can get pretty complex when it comes to ranking signals so it’s most important to try and create pages and content that you yourself would want to engage with.

How to Measure Core Web Vitals

Measuring your Core Web Vitals is actually pretty simple and can be done in a number of ways. From our experience, most people choose Google’s PageSpeed Insights. This free tool analyses both lab and field data to determine Core Web Vital scores. Once an audit has been completed, the platform will provide detailed guidance on changes you can make to improve your overall grades.

Not too long ago, the ability to measure core web vitals was also added to Google Search Console. This nifty tool let’s you see real time world usage scores by page – allowing you to diagnose any issues that may be specific to just that one page.

There are also a number of other paid tools which can provide unique insights into performance – one we recommend is called GTmetrix that offers both a free and paid version (although will only measure desktop performance).

Why Core Web Vitals Matter

With regards to SEO, Core Web Vitals are a relatively new phenomenon that have only continued to play a role in how Google benchmarks and ranks your pages. Given the changes from FID being replaced with INP, we can expect Google to continue to evaluate and amend their ranking algorithms to best reflect exactly what makes a ‘useful’ page/piece of content for a user. With this in mind, you should always try and stay up to date on the latest Core Web Vitals and SEO industry developments to see just how you can get the most from your organic performance.

Interested in SEO and improving the user experience on your website? Why not contact us today for a free digital marketing audit!