Understanding and Improving your Page’s Core Web Vitals

Ranking highly on Google is hugely important to a website’s success, but the ranking factors can be a mystery. Google’s John Mueller recently confirmed that the Core Web Vitals, a set of statistics about page loading, play a major role in keyword ranking checker. “It is a ranking factor, and it’s more than a tie-breaker, but it also doesn’t replace relevance,” Mueller said.

Any website needs to improve their core web vitals on their most important pages if they want to rank highly in Google keyword searches. Here is an overview of the core web vitals and how they can be kept as high as possible to maximize each page’s search engine rankings.

What Are Core Web Vitals?

Core web vitals are defined as “the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools.” They were announced as a ranking factor in the past two years as part of Google’s Page Experience measure, but to some, they appeared to be a ‘tie-breaker that was not as important as keyword relevance and backlinks. Google confirmed that they play a significant role in SEO, so it’s necessary to understand how each one works and how to optimize them. Google’s Lighthouse tool will give a color-coded result for each key metric.

Largest Contentful Paint (LCP)

The largest contentful paint (LCP) measures how long it takes for the viewer to see the main content on the page, whether it’s text or an image. An ideal LCP is within 2.5 seconds of loading.

LCP time

(in seconds) Color-coding

0–2.5 Green (fast)

2.5–4 Orange (moderate)

Over 4 Red (slow)

LCP is slowed down by larger overall page sizes, external connections, and dynamic scripts. To improve LCP, reduce these elements that lead to more loading. Also, consider implementing asynchronous loading so less-important scripts don’t prevent the page from rendering before they are loaded. Make landing pages that are meant to attract web traffic less complex and place scripts and images that are resource-intensive on separate pages.

First Contentful Paint (FCP)

First Contentful Paint (FCP) measures the time it takes to render the first content on the page, not necessarily the largest or most important. It is not as useful a measure as LCP, since this content may not remain visible, but it gives feedback to users that the page has started loading so they will wait for it to finish.

FCP time

(in seconds) Color-coding

0–1.8 Green (fast)

1.8–3 Orange (moderate)

Over 3 Red (slow)

Speed Index (SI)

The Speed Index measures how long it takes for a page to load completely and generates an index value of the loading speed. Below 3.5 seconds is considered good.

Speed Index

(in seconds) Color-coding

0–3.4 Green (fast)

3.4–5.8 Orange (moderate)

Over 5.8 Red (slow)

Time to Interactive (TTI)

TTI measures the time that it takes before a web page is fully interactive to the user. Full interactivity requires that the main content is displayed, event handlers are registered, and the page responds to interaction within 50 milliseconds. The score comes from comparing the web page to other real web pages. It can be delayed due to JavaScript still needing to load before HTML can be rendered. Links, buttons, and other HTML elements may not respond while the JavaScript is still loading.

TTI

(in seconds) Color-coding

0–3.8 Green (fast)

3.9–7.3 Orange (moderate)

Over 7.3 Red (slow)

Stopping JavaScript that interferes with the main thread, removing third-party scripts, breaking up long JavaScript tasks into quicker tasks, or making low-priority scripts run outside the main thread will increase the speed of interaction.

Total Blocking Time (TBT)

Total Blocking Time is the total time between First Contentful Paint(FCP) and the Time to Interactive (TTI). If it takes a long time between the first content to be rendered to the page becoming fully interactive, scripts are blocking user interaction as they load. It measures tasks that take longer than 50 milliseconds to complete.

TBT time

(in milliseconds) Color-coding

0–200 Green (fast)

200-600 Orange (moderate)

Over 600 Red (slow)

Being unresponsive to user input will frustrate users and effectively make the page seem like it takes longer to load. Fix long TBT by splitting JavaScript tasks and remove inefficient JavaScript from pages. Avoid heavy reliance on third-party scripts on landing pages, or implement efficient loading solutions for them.

Cumulative Layout Shift (CLS)

Cumulative layout shift measures the movement of visible elements on the page when loading. Layout shifts are disorienting to the user and can cause them to click on the wrong interactive element by accident, or lose track of text they have started reading. Even if a page seems to have loaded its main content, layout shifts need to be avoided for visual stability. A score of 0.1 or less is ideal.

CLS score Color-coding

0–0.1 Green (fast)

0.1–0.25 Orange (moderate)

Over 0.25 Red (slow)

To improve performance, reduce the amount of DOM elements and scripts that insert or rescale images, videos, and other size-based elements. Set default image sizes and reserve black space for images that are in the process of loading. Also, if new elements load later, do not place them above the main content or other early-loading elements or else they will be pushed downward on the page abruptly.

Making Core Web Vitals a Priority

These metrics can be analyzed with Google’s PageSpeed Insights or Lighthouse. You can check keywords rank if your core web vitals are in good shape with a full site audit that checks your page performance and page health.

In addition to better core web vitals boosting SERP ranking for pages, they also serve as important user experience metrics that any website should care about. Slow loading speeds and poor user experience lead to a higher bounce rate even if the page gets search engine traffic. There’s no reason to neglect these metrics. A survey by Retail Systems Research showed that 90% of consumers reported leaving a website if it loads too slowly, and 57% of shoppers have left a retail website to go to a competitor site if it loads slowly. It’s your responsibility to provide fast and stable loading to make your pages successful.