Everything You Need to Know About Core Web Vitals

The core web vitals, including mobile friendliness and page speed, are a hot topic in the SEO community right now. For good reason: improving them makes for a better user experience, and they are now a ranking factor for Google Search as part of the new page experience signals.

The gradual rollout began as of mid-June 2021 and was completed by September 2nd, 2021.

In order to pass the Core Web Vitals assessment, you need to score “good” for all three—Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS).

To Begin let’s first discuss about:

  • Field Data: is gathered from real users from Chrome Users Experience Report (crUX)
  • Lab Data: is gathered within a controlled environment without any involvement from real users.

The above two terms are vital as they will be used again and again in the future.

Google analyses user experience based on whether a site:

  • Is mobile friendly
  • Offers HTTPs
  • Is free of intrusive interstitials

While Google has always considered these three elements of Page Experience – they’ve now added one more: Core Web Vitals. These five factors together form a group of signals that Google uses to grade “Page Experience”.

What are Core Web Vitals?

Core Web Vitals is a set of user-facing metrics related to speed, responsiveness, and visual stability. They are used by owners to measure the quality of their sites’ experiences.

The Web Vitals metrics are split into Core Web Vitals and non-Core Web Vitals.

The Core Web Vitals are:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulate Layout Shift (CLS)

The Non-Core Web Vitals are:

  • Total Blocking Time (TBT)
  • First Contentful Paint (FCP)
  • Speed Index (SI)
  • Time to Interactive (TTI)

Why should you care about Core Web Vitals?

Here are the three main reasons you (and everyone) should care about Core Web Vitals:

  • Visitors love Fast Sites that are easy and pleasant to use.
  • Core Web Vitals as per June 2021 have become a ranking factor in SERP.
  • Good Page Experience plays a big role in conversions on the website.

Core Web Vitals in Details

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a Core Web Performance Metric that measures the time in seconds from when the page starts loading to when the largest text block or image element is rendered on the screen.

The Goal is to measure when the page’s main contents have finished loading. The lower the LCP, the better. A fast LCP reassures users that a page is useful because it’s a metric that measures perceived load speed. LCP is available in both field data and lab data.

In the field, a user will stop reporting new LCP candidates as soon as they interact with the page. In lab testing, it’s not entirely clear when the LCP is finished. We expect this to be when the page has reached Time to Interactive (TTI), and it’s clear which element is the final LCP candidate.

How to interpret LCP Score:

  • Good: <== 2.5s (less than 2.5s)
  • Needs Improvement: > 2.5s <= 4s (between 2.5s and 4s)
  • Poor: > 4s (more than 4s)

First Input Delay (FID)

First Input Delay (FID) is a Core Web Vital that measures the time in milliseconds from when a user first interacts with your site (i.e. when they click a link, tap a button, or press a key) to when the browser is able to respond to that interaction.

The FID underlies a user’s first impression of your site’s interactivity and responsiveness. Better make it a good impression!

The FID is a metric that can only be measured in the field, as it relies on user interaction. Thus, this value is only available for field data. The lower the FID, the better.

How to interpret FID Score:

  • Good: <== 100ms
  • Needs Improvement: >100ms and <== 300ms
  • Poor: > 300ms

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a Core Web Vital that measures the cumulative score of all layout shifts that occur within the viewport during a page’s entire lifecycle.

CLS aims to measure a page’s “visual stability,” which has a major impact on the user experience. It is available in both field data and lab data. The lower the score, the better the visual stability.

The CLS isn’t measured in seconds like most of the other metrics. It works from the viewport size, relates to elements that move between two frames—called unstable elements—and measures their movement in the viewport. The layout shift score is a product of two components: the “impact fraction” and the “distance fraction”.

The “impact fraction” is the area of the viewport that the unstable element takes up in both frames.

The “distance fraction” is the greatest distance the unstable element moves between both frames, divided by the viewport’s largest dimension (width or height)

How to Interpret CLS Score:

  • Good: <== 0.1
  • Needs Improvement: > 0.1 <= 0.25
  • Poor: > 0.25

Total Blocking Time (TBT)

Total Blocking Time (TBT) is a non-Core Web Performance Metric that measures the total time in milliseconds between First Contentful Paint (FCP) and Time To Interactive (TTI) where the main thread is blocked long enough to make it unresponsive to user input.

TBT and FID correlate strongly, and TBT is considered the best alternative when testing in a lab environment where real user interaction isn’t possible. While TBT can be gathered in the field, it’s easily influenced by user interaction and doesn’t make for a reliable metric to measure how long it takes for a page to become responsive.

Any task that takes longer than 50ms is considered a long task. Long tasks are defined as any task that takes more than 50ms to complete. The time on top of the 50ms is called “blocking time”; it is included in the total blocking time (TBT). TBT is calculated by adding up the blocking portion of each long task.

How to Interpret you TBT Score:

  • Good: <== 200ms
  • Needs Improvement: > 200ms <= 600ms
  • Poor: > 600ms

First Contentful Paint (FCP)

First Contentful Paint (FCP) is a non-Core Web Vital that measures the time from when a page starts loading to when any part of that page’s content is rendered on the screen. Having an FCP time that is fast reassures users that something is happening.

FCP is available in both field data and lab data, and the lower the FCP, the better.

How to Interpret your FCP Score:

  • Good: <= 1.8s
  • Needs Improvement: > 1.8s <= 3s
  • Poor: > 3s

Speed Index (SI)

Speed Index (SI) is a non-Core Web Vitals that measures how quickly the contents of a page are visibly populated during page load. It’s calculated by using frame-by-frame analysis of your page’s load behavior, counting the visual progression between frames captured every 100ms.

SI is available in both field data and lab data.

How to Interpret your SI Score:

  • Good: <= 3.4s
  • Needs Improvement: > 3.4s <= 5.8s
  • Poor: > 5.8s

Time to Interactive (TTI)

Time to Interactive (TTI) is a non-Core Web Vital that measures the time from when the page starts loading to when it’s fully interactive.

For it to be fully interactive, it needs to:

  • Display useful content (measured by First Contentful Paint).
  • Have most visible page elements rendered.
  • Respond to user interactions within 50 ms.

How to Interpret your TTI Score:

  • Good: <= 3.8s
  • Needs Improvement: > 3.8s <= 7.3s
  • Poor: > 7.3s

Tools to Measure your Core Web Vitals

Web Vitals is a collection of performance metrics that help you understand the health of your website. These metrics, which include mobile load time, page speed and YSlow grades, are available through many tools. We’ll go over some of the most popular ones to show how Web Vitals look through each tool.

  • Content King
  • Page Speed Insights
  • Web.dev Measure
  • Google Search Console

Final Thoughts

Core Web Vitals has gained importance and will continue to gain more and more importance as it is now a ranking factor as per June 2021.

Technical SEO is a vital part of every SEO Strategy and that is why it is necessary to plan your digital marketing actions accordingly. We are a digital marketing agency that keeps a track of all the technical aspects that would help your business grow multifold both in terms of visibility and website impressions. Believe us, AI Advertisment is the one stop solution to all your SEO related requirements. Don’t hesitate, we are just a call away to guide you. Book a free consultation today.