Blog

Google’s Web Vitals: what are they and why should you care?

Craig Greenup 22/10/24, 08:00

What are Google's Web Vitals and why you should care

For anyone with a business website, Google’s Core Web Vitals provide lots of really useful insight. These Vitals are available via Google Search Console — and they tell you what kind of user experience (UX) your site is providing.

UX is important because it determines how website users feel about your website and — by extension — your brand. With the guidance of Google’s Web Vitals, you (or your website developers) can find ways to improve UX across your site.

There’s just one small problem. If you’ve never used Google’s Web Vitals before, some of the terminology can feel pretty confusing. That’s why we’ve put together this article.

Here, we explain everything you need to know about Core Web Vitals. We’ll be looking at the following:

Ready? Then let’s start with a definition.

What are Google’s Core Web Vitals?

Google’s Core Web Vitals are a kind of website health check. They’re a collection of website metrics that help you understand how your website is performing — and how user-friendly it is.

There are three Core Web Vitals. These are:

  • Largest Contentful Paint (LCP)
  • Interaction to Next Paint (INP)
  • Cumulative Layout Shift (CLS)

If the above makes absolutely no sense to you, don’t worry. We’ll be explaining what these vitals mean in super simple terms in a moment.

But for now, let’s just say that these metrics indicate how a website works in terms of:

  • load time (how quickly users get to view your web pages)
  • interactivity (how quickly users get to interact with your web pages)
  • visual stability (the extent to which images, videos and blocks of text jump about on the web page as it loads)

Google gives your website a score in relation to each of these metrics. The better the score, the better the user experience your site is providing.

Why should you care about Google’s Web Vitals?

Google’s Web Vitals measure website usability. And its metrics are based on the expectations users have when they visit your site.

So what are those expectations?

  • Users want to be able to see and interact with your web pages quickly, whatever device they’re using
  • They want a fast site loading speed, ideally just 2-3 seconds
  • They also expect sites to respond instantly to their on-page clicks

Fail to meet their expectations and users become frustrated or confused and end up trying another website.

But meet their expectations and there are lots of business benefits. Potential customers will spend more time on your site. They’re more likely to explore your content and come across trust signals, which will improve your conversion rate.

Improving your scores in Google’s web vitals can also benefit search engine optimisation (SEO). Google has confirmed that Core Web Vitals are a ranking factor. They influence the position your site reaches in search engine result pages (SERPs).

Core Web Vitals are by no means an SEO silver bullet. Google considers lots of other ranking factors when deciding where your site should sit in SERPs. But you have a much better chance of nabbing a number one spot if you’re achieving high scores in Google’s Web Vitals.

How to find your Google Web Vitals

Time to find out how your site is performing. You can find details of your website’s Core Web Vitals scores in Google Search Console, within the experience section.

Google Search Console provides a graph that shows how many of your web pages fall into each scoring category. It also shows how your scores have changed over the last three months.

You can click to see the full report. Here, you can dive into the details, finding example URLs in each category and the exact scores for each element. You can also view your metrics across both mobile and desktop versions of your site.

Google Search Console is the best tool to use because it shows you Core Web Vitals for your entire site. But sometimes, your scores don’t show up when using Google Search Console.

This tends to be because of an issue with the data threshold. Google won’t display scores for your website if it doesn’t have enough data.

In this case, you can use other tools — Google Lighthouse or PageSpeed Insights — to run a detailed report on a single webpage. You need to repeat the process manually for each web page to see how it’s performing.

Google Lighthouse is a developer tool, which provides a full report on performance, accessibility, best practices and SEO for your website.

Page Speed Insights is a similar tool, which provides a Core Web Vitals assessment for the specified page on your website. It also tells you what you can do to improve your scores.

Core Web Vitals explained (plus how to improve your scores)

Now we know where to find your Core Web Vitals — and how improving those vitals benefits your website, your users and your business. But what does each Core Web Vital actually mean?

Let’s take a look at what each score represents, what counts as a good score and what you can do to improve your score for each of Google’s Web Vitals.

Largest Contentful Paint (LCP)

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) is the time it takes to fully load the largest piece of content on your web page. This is usually your main image, a video or a large block of text.

LCP refers to content that appears above the fold (ATF) — this is the part of your web page a user can see without having to scroll.

How quickly this content becomes visible for website users indicates how quickly they get to see and understand your site.

What is a good LCP score?

Your LCP score is classed as poor, needs improvement or good, depending on the speed at which the largest element of the page is loaded.

A good score can be achieved if the largest element is loaded in under 2.5 seconds. A needs improvement score ranges from 2.5 seconds to 4.0 seconds. Anything above 4.0 seconds is considered a poor score.

The final website score is based on 75% of the individual page scores. If 75% of your site’s LCP scores are rated as good, the whole website will get an overall good score for LCP. Mobile and desktop are separated into two different scores for every website.

How to improve Largest Contentful Paint score

If your rating isn’t what you want it to be, there are a number of things you can do to improve your LCP score:

  • Optimise images. Compress images to reduce their file size. You should save images as a WebP format, not as older JPEG or PNG formats. Also, set the right image dimensions so a user’s browser doesn’t have to resize them.
  • Upgrade your website host. Using a faster hosting service. Upgrade your hosting plan. Or replace shared hosting with cloud or dedicated hosting.
  • Remove any unnecessary third-party scripts. Third-party scripts are pieces of code that add extra website functionality but aren’t hosted on your server. Heat maps, analytics, chat widgets and A/B testing tools are some common examples. If you aren’t actively using those third-party scripts, get rid of them to speed up your website.
  • Remove large page elements. Sometimes an ATF image or video is essential to your branding and/or user experience. But if it isn’t, try removing it to see if you can improve your LCP score.
  • Use lazy loading carefully. Lazy loading optimises image loading. But you should only do this for images below the fold, not ATF.

Interaction to Next Paint (INP)

What is Interaction to Next Paint?

Interaction to Next Paint (INP) is a relatively new Core Web Vital. It replaced another metric — First Input Delay (FID) — in 2024.

INP is a measure of how long it takes for the browser to respond to a user’s interaction with your web page. While FID measured the response time for a user’s first interaction, INP evaluates the speed with which your website responds to all user interactions.

User interactions include things like:

  • Clicking on a button to navigate to a new page
  • Clicking on the hamburger icon to open the menu
  • Clicking a button to submit a form
  • Zooming in on a map
What is a good INP score?

To generate your INP score, Google looks at the time it takes to complete all user interactions on your website. It then takes the longest response time and uses this to assign your score.

You get a good score if your INP is 200 milliseconds (0.2 seconds) or less.

A score of 200 and 500 milliseconds (0.2 and 0.5 seconds) needs improvement.

An INP score of over 500 milliseconds (0.5 seconds) is poor. This means users will experience noticeable delays in response to their actions.

Your whole site score is based on 75% of your individual page scores.

How to improve INP score

Here are the things you can do to improve your INP score:

  • Minimise JavaScript. JavaScript is a programming language developers use to create dynamic website features like animations, forms and menus. But users will struggle to interact with your site while JavaScript is loading. A developer can minimise or defer JavaScript to improve your INP score.
  • Break tasks into smaller chunks. When the browser is busy with a long task — for example, loading a large amount of data — it can’t respond to user interactions. A developer can split long tasks into smaller tasks. The browser can then respond to a few user clicks and interactions in between these tasks.
  • Remove unnecessary third-party scripts. As we mentioned above, third-party scripts slow your site loading speed time down. They also impact responsiveness to user interactions. So if they’re not proving useful to your website or your business, get rid of them.
  • Cumulative Layout Shift (CLS)

    What is Cumulative Layout Shift?

    Cumulative Layout Shift (CLS) measures how stable your page is as it loads.

    Of course, your pages move in expected ways in response to a user interaction. For example, when a user clicks on a menu item, they expect to move to another page. When they click on a button, they expect to see an acknowledgement of that click.

    Unexpected layout shifts are the problem. This is where elements on your page move around during the loading process in a way that surprises users and disrupts the website experience.

    Unexpected layout shifts are annoying and confusing for users. It can cause them to click a button accidentally. Or simply lose track of where they’re up to on your web page.

    CLS measures how frequently your webpage layout shifts in this way. Your score is based on a complicated calculation that considers the size of the moving element and the distance that element actually moves.

    What is a good CLS score?

    As with INP and LCP, Cumulative Layout Shift (CLS) is expressed as a numerical score.

    A score is good if the CLS is 0.1 or less.

    A needs improvement score is between 0.1 and 0.25.

    A poor score is 0.25 or more. This score indicates that page elements are moving around a lot, disrupting the user experience.

    Your whole site score is based on 75% of your individual page scores.

    How to improve CLS score

    Here are some things you can do to improve your CLS score in Google’s Web Vitals:

    • Use width and height size attributes for images and videos. By doing this, the browser reserves space for images and videos as the page loads. This means it won’t shift things around as new elements load.
    • Avoid adding new content above the fold. When adding new ads or banners, put them in a place where they won’t push existing ATF content down.
    • Optimise fonts. Preloading fonts, limiting font variants and assigning a fall back font can help your site to load fonts quickly and consistently. This prevents text from jumping about as fonts load.

    Want help improving your Core Web Vitals?

    Google’s Web Vitals help you improve site performance, so you can provide a better experience for users. They tell you where your site is falling short so you can create a faster, more responsive and more effective website.

    If your scores aren’t where you want them to be, the Radical team can help. Our developers can find ways to streamline your site, so it loads quickly and beautifully across all pages.

    We can improve your website in other areas too. We design and build on-brand websites that showcase your products or services in the best possible light. We can help with website hosting and maintenance — and with website content, too.

    Want to take your business website to the next level? Then chat with the Radical team about your requirements today.