Core Web Vitals Explained – and how to Improve Them (2024)

What are Web Vitals? 

Web Vitals are the “quality signals” that Google uses to measure a website’s usability in various ways. Web Developers, Marketers, and SEOs can use these signals as guidance to help improve website performance and user experience.

Performing well on Web Vitals and offering a better user experience can improve customer engagement and can boost the performance of your digital marketing campaigns. Web Vitals are also ranking signals that can help your website’s visibility in search results.

What are Core Web Vitals?

Core Web Vitals are a set of three web page performance metrics that Google considers most important for user experience. Between them, Google aims to measure a page’s usability through load time, interactivity, and content stability.

The three Core Web Vitals are:

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

Largest Contentful Paint (LCP)

Largest Contentful Paint marks the point at which the largest text or images is “painted” (can be viewed) on the page.

This is usually a featured image or an H1 tag, but could be any large element, such as an opening paragraph, a background image, or a video. For your WebPage, Google’s PageSpeed Insights can tell you what it considers the largest content paint element – you will find it under “Diagnostics” in the report (more on this later).

The most common causes of slow LCP are large files such as embedded videos or large, unoptimised images. You will often notice this with education or cooking recipe sites, where empty space can suddenly display video content after the rest of the page loads.

Interaction to Next Paint (INP)

Interaction to Next Paint measures the delay between a user’s interaction and a page’s response (the “next paint”). To provide a good user experience, Google advises websites to strive for an Interaction to Next Paint of 200 milliseconds or less.

Unlike “First Input Delay,” which measures the delay only for the initial interaction with the page, INP considers multiple user interactions and highlights only the one with the longest delay to the next paint. This provides a more comprehensive view of the page’s interactive performance and is a key insight into the quality of a typical user’s experience.

The following interaction types are observed for INP:

  • Clicking with a mouse
  • Tapping on a device with a touchscreen
  • Pressing a key (either on a physical or onscreen keyboard)

Interactivity varies between different types of pages, but examples of typical events involving these interactions could be:

  • Clicking a button to submit a form (from click to submission confirmation)
  • Toggling a collapsible “accordion” element (from click to an accordion state change i.e closed to open)
  • Tapping through items on a “carousel” gallery element (from tap on an arrow to the next image being cycled)
  • Clicking on an image to open it in a “lightbox” element (from click to completion of the image popup and lightbox animation)
  • Typing into a text box (from a key press to a character appearing)

Generally, the measured interactive events will have been delivered via JavaScript scripts, but interactivity with CSS elements (such as ticking boxes on a form) can also be measured. 

We have all experienced poor INP on mobile devices when using a poor 4G connection, where everything takes a long time to load. You are left tapping on your phone screen and waiting for the page to become responsive. When this happens, do you want to wait for it, or do you leave and try the following result?

As delayed response times can be frustrating for user experience, it’s important to minimise it where possible when building your web pages. 

More information about INP is available in Google’s INP Documentation.

First Input Delay (FID) – Now Deprecated

The precursor to INP, First Input Delay, measures the time the page takes to respond to user interactions, such as clicking play on a video, scrolling down the page, or filling out a form.

INP is considered a more accurate means of measuring interactivity as it factors more than just a single interaction into its score. For example, on pages with an unusually high level of interactivity (>50 interactions), the INP score is adjusted to ignore 1/50 events, discarding the highest outlying value and taking the second-highest result. This is a means of accommodating for “random hiccups” that can result in a high-latency interaction on “an otherwise responsive site”. 

Whilst FID is no longer a core web vital there is a high level of overlap in the methods used to overcome a poor FID score and a poor INP score. Key to reducing FID and INP is optimising your pages to lower the “Total Blocking Time” (TBT) – another web vital that Google monitors and reports on, which identifies and measures the tasks that prevent the user from interacting with the page.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures how much your page’s content and visible elements move on the screen as it loads. If you have ever tried to read an article and found yourself pushed down the page as an ad or another element loads in above the text, you have experienced CLS.

Two Easy Ways to Check Your Core Web Vitals

A website’s Core Web Vitals can be monitored from any web browser using Google’s PageSpeed Insights, a free online tool.

How to Check Core Web Vitals in Google PageSpeed Insights

  1. Navigate to Google’s PageSpeed Insights tool
  2. Copy and paste the URL of a page you want to check into the bar and click “Analyze”. Check Core Web Vitals with PageSpeed Insights
  3. You will receive a score and a report on your page’s performance.You will see an overview of your Core Web Vitals with a score
  4. Select “desktop” or “mobile”, in the top left corner of the page to see insights for each platform.View Core Web Vitals for desktop and mobile separately
  5. Under the “Lab Data” header, you will see a list of metrics – Core Web Vitals are marked with a blue “bookmark” icon.Core Web Vitals scores for your session can be found in your lab data
  6. If your site receives enough traffic, you will also see “Field Data” and “Origin Summary” headers with additional scores. Unlike lab data, this information is collected from visitors to your site.

 

While other metrics play an important part in scoring your WebPage performance, Google gauges your page’s loading, interactivity, and visual stability using the Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift, respectively.

These metrics impact your SEO and play a key role in measuring your site’s user experience, which can, in turn, affect your conversion rates and customer engagement. Performing well on web vitals may be the difference between failure and success in your digital campaigns and could help you maximise your online revenue streams.

Checking Core Web Vitals in Google Lighthouse

If you use the Google Chrome browser, you can also run a report directly in the browser using Lighthouse. This tool powers PageSpeed Insights and many other website performance monitoring solutions.

To use Lighthouse:

  1. Open the WebPage you want to check in the Google Chrome browser.
  2. Right-click on the page and click ‘inspect’ from the drop-down, or use this shortcut to open developer tools – PC: Press Ctrl + Shift + i. Mac: Press ⌘ + Shift + I.Right-click and select inspect from the dropdown to open inspect the webpage.
  3. Click on the “lighthouse” tab in the developer panel.Generate a report from the lighthouse tab to check your core web vitals.
  4. Select the categories and platform you want to test on from the list.Select the device type you want to see core web vitals for and choose the categories you want to report on.
  5. Click “generate report”.
  6. Core Web Vitals will appear in the “performance” section.You will see a report on your core web vitals along with your other web vitals.

Google recommends running Lighthouse in an incognito window to get an accurate result. This is because browser plugins can use system resources, potentially slowing down the page and skewing results. Opening an incognito browser window is simple (PC: Press Ctrl + Shift + N. Mac: Press ⌘ + Shift + N.).

Quick tips for improving your Core Web Vitals

Below are some tips you can use to improve your Core Web Vitals:

Improving Largest Contentful Paint (LCP)

To improve your Largest Contentful Paint, first determine which element is currently read as your LCP element using PageSpeed Insights. Your report will contain a snippet of code and a screenshot highlighting the asset. If this asset is an image, optimise it to reduce size and consider serving it in WEBP format.

If you are using a CMS that supports plugins, ensure that you have no unnecessary plugins on your installation and that you are running as few as possible. Plugins and themes are “render-blocking” resources (code that browsers will read before loading a page), and too many lines of code from them can slow down your page times.

 

Improving Interaction to Next Paint (INP)

Before you can fix slow interactions, you’ll need to identify which actions are providing your INP, and why they are not performing well. If you have enough field data collected on your site (most smaller websites will not have this option), you can use the Chrome User Experience Report (CrUX), a part of Google’s Pagespeed insights tools, to see real-world user data. This includes information about INP experiences for users of your site. 

If you do not have access to field data, you should begin by looking at your “Total Blocking Time” score, which is highly correlated to INP.

Total Blocking Time (the delay caused by elements which block on-page interactivity) can make interactions unresponsive, regardless of how long the action should take when the page is fully loaded. TBT is another web vital, available in both Lighthouse Reports and Pagespeed Insights.

Blocking is typically caused by either Javascript, or by Rendering, and typically occurs in more complex layouts with lots of CSS and many elements. The key thing here is to avoid:

  • Long “Synchronous Layout Rendering” – code that prevents a browser from displaying a layout until it has completed a long string of actions in order: parsed the HTML , styled the CSS elements, executed the JavaScript, and completed the rendering process.
  • Render Thrashing – code that causes many layout changes quickly, such as having multiple Synchronous Layouts on a single page.

TBT can also be reduced by keeping request counts low, and transfer sizes small. The higher the request count and the larger the transfer size for your page, the longer it takes to load and become responsive.

Your request count is the number of times the page asks for a resource when loading. The transfer size is the total size of all requests for a resource. In PageSpeed Insights, this information can be found in the Diagnostic section, and is categorised by resource type.

Page resources are categorised by resource type, requests and transfer sizes. Reducing these can improve your FID core web vital.

Avoid multiple page redirects, combine images using CSS sprites, and remove third-party scripts to keep your server request counts low.

Keep your server transfer sizes small by compressing text resources, “minifying” your CSS and JavaScript files (optimising the files to make them smaller) and properly sizing and compressing your images.

As well as minifying your JavaScript files, you can further optimise how they execute on the site by breaking up long-running code into smaller tasks that can be ran together, deferred, or conditionally loaded to ensure that your site only loads critical JavaScript on the first paint.

Here is a detailed list of best-practice methods for improving the speed with which your site responds to user interactions.

Improving Cumulative Layout Shift (CLS)

Factors that increase the chances of cumulative layout shift include advertisements, dynamic content, images and videos. If you serve ads on your site, do not place them above your existing content, and consider how behaviour such as expanding on mouse-over can affect other elements on the page.

For images and videos, avoid using automatic sizing and instead define the width and height attributes. Alternatively, style them within CSS boxes that define the width and height for the space they need.

Get expert web design, development and hosting from Workshop.

Are Core Web Vitals Important for SEO?

At the start of 2021, most websites that ranked on the first two pages of a Google search failed to pass the minimum requirements set out in Google’s Core Web Vitals, with 96% of sites failing the test on desktop, and 90% failing the test on mobile.

While these sites may still be successful at bringing in traffic, this means that they’re failing to deliver a good on-page experience and are likely missing out on opportunities to engage with and convert their visitors.

However, sites that rank in the top 3 positions of searches typically perform well in Core Vitals. There is also some correlation between performing well on Google Search and performing well on Cumulative Layout Shift, Largest Contentful Paint, and Interaction to Next Paint metrics. This is also true for the other web vitals.

2021’s algorithm update lead Core Web Vitals to play a more significant role in SEO rankings than before. However, it is essential to note that page speed, Core Web Vitals, and usability are just a few of hundreds of different ranking factors that Google considers in its search results. Since the introduction of CWV as a ranking factor, Google’s search algorithm has had several updates to refine it throughout the years that followed.

So, although Core Web Vitals shouldn’t be ignored, they are unlikely to have a dramatic, immediate impact on your current rankings unless your search competitors offer significantly better on-site experiences.

You mustn’t neglect the rest of your SEO strategy – your content, on-page SEO and inbound links are still the most important ranking signals for Google and other search engines.

Talk to Workshop about researching, developing and improving your SEO strategy.

Benchmark Your Competitors and Sites in Your Industry

Measuring your website against Google’s recommended performance benchmarks is great for making general improvements, but it shouldn’t be taken as gospel. Be realistic with your goals. If you have a large website with lots of video content, image galleries and interactive elements, you will have a harder time optimising site speed to compete with leaner, text-only blogs.

A benchmark against your SERP competitors and other businesses in your industry will offer more value and give you a better insight into where you might be falling behind.

After analysing your own website, run PageSpeed Insights reports on your competitors’ best ranking URLs, see how they perform and compare their results to yours, then focus on improving your site’s speed and Core Web Vitals to beat their scores. If you are already competitive, consider focusing on your SEO strategy in other areas before spending time and resources on web vitals.

For a quick list of actionable tips to improve your website speed and core web vitals, check out our guide here. If you require help implementing improvements, conducting an audit of your site, or developing an SEO strategy, please don’t hesitate to get in touch with our team.

By James Heyes