Core Web Vitals: Leverage These Metrics to Improve Your Site’s Performance

Google’s algorithm and ranking factors used to be mostly semantic. However, the search engine started prioritizing user experience after its recent updates.

Having applied various user experience criteria, like page speed and mobile-friendliness, Google announced Core Web Vitals in May 2020 to provide unified guidance for a website’s quality signals.

Download eBook: Build Your First Website in 9 Easy Steps

This guide will explain necessary information on Core Web Vitals, including the definition and tools to measure your website’s scores. We will also demonstrate how to use one of the tools and discuss other metrics supporting three main Web Vitals.

Google’s Core Web Vitals are standardized metrics to measure user experience. Core Web Vitals represent three elements that impact how users interact with a website – loading speed, user interaction, and visual stability.

Core Web Vitals help site owners evaluate their websites and web experiences as well as notice areas to improve by showing specific benchmark scores.

Main Metrics of Core Web Vitals

Google mentions that the Core Web Vitals metrics may evolve over time, depending on what users see as a good page experience. Currently, site owners and developers need to measure the following three Core Web Vitals metrics.

The core web vital metrics: LCP (Largest Contentful Paint) to measure loading time, FID (First Input Delay) to measure interactivity, and CLS (Cumulative Layout Shift) to measure visual stability

Largest Contentful Paint (LCP) – Page Loading Time

The Largest Contentful Paint (LCP) checks the render time of a page’s main content when it starts loading. The main content is generally the largest image or a text block in the viewport – a visible area of a web page on a user’s device.

The LCP data mainly consists of the following elements:

  • Image elements
  • Block-level text
  • Video poster images
  • Background images

Site owners need to ensure that Core Web Vital’s score is 2.5 seconds or less to provide a good user experience and reach an ideal site speed.

Although the late-loading content is often larger than the other elements on the page, that is not always the case. Preloading the largest content helps the page achieve a better LCP score and improve page experience.

The time taken to preload a page with largest content

Common factors of the poor LCP score are slow server response times, client-side rendering, and large-sized images.

First Input Delay (FID) – Page Interactivity

The First Input Delay (FID) measures input latency – how long it takes for a site to respond to a user’s input. This includes key presses, taps, and clicks on buttons, links, and videos or audios on a page.

Other interactions, like zooming and scrolling, are not included since they have different performance constraints. The FID focuses on the Response aspect in the RAIL performance model, while scrolling and zooming relate to the Animation element.

An ideal score of this Core Web Vital is 100 milliseconds or less.

Maintaining a good user interaction is essential as delays can be frustrating for people, reducing the user experience quality.

Important! Users may come across delays differently, depending on their hardware and network conditions. For instance, loading sites on a fast Wi-Fi connection will differ from a 3G network.

Cumulative Layout Shift – Page Visual Experience

The Cumulative Layout Shift (CLS) measures visual stability and checks whether there is an unexpected layout shift in the page.

Unexpected movement happens when page elements like text, buttons, and images are pushed down while the page is still loading. This often leads to frustration because a user may click something else when the elements are moving.

Pages should have a CLS score of 0.1 or less.

Previously, Google measured this Core Web Vitals metric by calculating the sum of individual layout shift scores over the entire page.

The system has been scoring session windows since 2021. It groups one or more individual layout shifts happening in a maximum of five seconds with a one-second gap between windows.

The most common factors of layout shifts are images, widgets, and ad banners without dimensions.

How Important Are Core Web Vitals?

Core Web Vitals are part of page experience signals with mobile-friendliness, safe browsing, and no intrusive interstitials.

As of August 2021, page experience metrics have become an important ranking signal for mobile devices. Google even plans to complete this ranking system for desktops in March 2022.

The same Google page experience update also shows that the search engine still prioritizes pages with the most relevant content. However, page experience can increase visibility if multiple pages have similar relevance levels.

Therefore, we can conclude that Core Web Vitals play an important role in the search engine optimization (SEO) ranking factors.

Core Web Vitals also help you ensure that your site delivers a fast and stable performance, which can increase conversion and engagement rates.

In fact, over 50% of mobile users abandon a page that takes more than three seconds to load. An additional one to three seconds on load time can increase a bounce rate by 32%.

Tools to Measure Core Web Vitals

As Core Web Vitals have become a ranking signal, SEO experts need to monitor their scores and ensure the metrics perform well to gain top positions on Google’s search results.

Three Google tools to measure Core Web Vitals are:

  • PageSpeed Insights – reports Core Web Vitals data on mobile and desktop devices over the previous 28-day period. It also displays a speed test analysis to check your website’s loading time. To use this tool, go to the PageSpeed Insights site, enter a URL, and hit the Analyze button.
PageSpeed Insights' homepage
  • Lighthouse – is an open-source and automated tool for monitoring web performance. Lighthouse has several metrics that PageSpeed Insights does not have, like accessibility and SEO. Two methods to use this tool are installing the extension and right-clicking on a specific page you want to analyze -> Inspect -> Lighthouse.
Lighthouse Chrome extension performance results page
  • Search Console – displays the performance metrics on the Core Web Vitals report under the Enhancements section. Unlike Lighthouse and PageSpeed Insights, this tool enables you to check all web pages of your site altogether.
Core Web Vitals report on Google Search Console
 LCPFIDCLS
PageSpeed InsightsYesYesYes
LighthouseYesYesYes
Search ConsoleYesYesYes

The numbers always accurately capture the real-world experience with any Google tool, thanks to the Chrome User Experience report.

The report collects data from anonymized Google Chrome users who have opted to sync their browsing history. It helps site owners assess their page performance quickly without manually connecting their Google Analytics with the tools.

Google applies the 75th percentile value of all page views to classify the overall performance. This means Google will give the site or page a good score if at least 75 percent of page views meet the Good threshold of every Core Web Vital.

Note that a page’s score will not influence how the other pages perform on each metric. For example, a home page may have a lower score than a product page.

Suggested Reading

Read our tutorial to find out more SEO strategies to improve your site ranking.

How to Measure Core Web Vitals

Measuring Core Web Vitals is easy with the tools above. They will display the issues and give you practical suggestions for improvements.

This section will walk you through a Core Web Vitals test from the Hostinger Tutorials page using PageSpeed Insights.

Type in hostinger.com/tutorials and click Analyze. The tool will display score bars for several core metrics and whether the web page passes or fails the Core Web Vitals assessment.

Core Web Vitals assessment on PageSpeed Insights

Click Expand View to see more detailed scores.

Core Web Vitals scores on PageSpeed Insights

Change the analysis to Mobile or Desktop to see the scores from each device.

Scroll down to see each metric’s exact scores. Here, all the numbers are green, indicating that the Hostinger Tutorials page has good Core Web Vitals scores.

The green scores on PageSpeed Insights indicating good performance

The numbers will be red if the tool sees that the page delivers poor performance.

The red score on PageSpeed Insights indicating poor Core Web Vitals scores

Below the Metrics section, Opportunities and Diagnostics show the PageSpeed Insights’ suggestions to boost the page’s performance.

Opportunities and Diagnostics sections on PageSpeed Insights

For example, if the tool detects a large image, it will suggest uploading it through the media library to avoid using full-sized photos. The table underneath shows the photos that can be optimized and their potential savings.

Core Web Vitals suggestions on PageSpeed Insights for desktop

To filter suggestions, click a specific metric above the Opportunities section. Hit the View Treemap button to see the JavaScript data grouped hierarchically.

Filter and treemap features on PageSpeed Insights

Other Performance Metrics to Check

Besides the three metrics above, site owners also need to consider more factors to deliver a great user experience. These include the First Contentful Paint (FCP), Total Blocking Time (TBT), and Time to Interactive (TTI).

Although you can find these new metrics on some of the Core Web Vitals tools, they are not a part of them. They help capture a larger portion of the page experience and diagnose a specific issue.

Speed Index (SI)

The Speed Index (SI) measures how long it takes for parts within the viewport to appear. To calculate your SI, an analysis tool will capture a video of a page loading in the browser and compute the process frame by frame.

A good SI score is 3.4 seconds or less. Your user experience quality is better when the above-the-fold content appears faster.

Optimized rendering for improving Speed Index score

First Contentful Paint (FCP)

The First Contentful Paint (FCP) calculates how long the browser displays any content from the document object model (DOM). It includes text, images, and non-white canvas.

Note that the FCP is different from the LCP, which measures the render time of a page’s largest content. To provide a good user experience, site owners should have an FCP score of 1.8 seconds or less.

First Contentful Paint (FCP) vs Largest Contentful Paint (LCP)

Time to Interactive (TTI)

Time to Interactive (TTI) is the amount of time a page needs to become fully interactive. Google considers a page interactive when:

  • The page displays usable content.
  • The page responds to user interactions within 50 milliseconds.
  • Site owners register event handlers for the most visible page elements.

An ideal TTI score is 3.8 seconds or less.

Total Blocking Time (TBT)

Total Blocking Time (TBT) is the sum of all time when a page is blocked from responding to user input.

Google calculates the total by adding the blocking portion of long JavaScript tasks between FCP and TTI. Any task executed for over 50 milliseconds is a long task. The period after 50 milliseconds is the blocking portion.

A good score of TBT is 200 milliseconds.

Time to First Byte (TTFB)

The Time to First Byte (TTFB) identifies when your server sends a response to a user’s browser. The longer the browser takes to get the data, the longer it takes to display your page.

The TTFB is the sum of these request phases:

  • Redirect time.
  • Service worker startup time (if any).
  • DNS lookup.
  • Connection and Transport Layer Security (TLS) negotiation.
  • Request up until the first byte of the response arrives.

Google cannot place an exact number of a good TTFB score because of its wide variation of network and application backend stacks.

Suggested Reading

Aside from core web vitals, there are other aspects that you need to optimize to ensure the most optimal web performance. Read how to speed up WordPress to find out.

Conclusion

Core Web Vitals is a vital page experience ranking factor on Google’s search results pages. They also help increase engagement rates and reduce bounce rates by ensuring a good user experience.

There are three primary metrics of Core Web Vitals:

  • Largest contentful paint – calculates the amount of time a website takes to show the largest content on the screen.
  • First input delay – measures the time from when users interact with a site to when the browser responds to the interaction.
  • Cumulative layout shift – checks the visual stability of a page load.

As a critical user experience signal, site owners need to check their Core Web Vitals scores. Three Google tools to measure these metrics are PageSpeed Insights, Lighthouse, and Search Console. These tools will display your Core Web Vitals scores and tips to improve them.

We hope this article has helped you understand the Web Vitals concept, reach good page experience scores, and help optimize your website.

Was this tutorial helpful?

Author
The author

Maulidina Marlita

Lidin is a Writer for Hostinger’s Content team. With a passion for digital marketing and writing, she is excited to share her knowledge with people around the globe. When she’s not writing, you can find her editing videos.