Core Web Vitals: Understanding LCP, FID, and CLS

Understanding Google's Core Web Metrics, how to track them, and what it means for your search rankings

Cover Image for Core Web Vitals: Understanding LCP, FID, and CLS

Core Web Vitals are coming soon to a Google search ranking near you. As much as SEOs love to throw around new buzzwords, I think it’s important to know what this means. Earlier this year, Google announced that there will be a search engine ranking change that will include these new metrics.

If you are having trouble keeping up, I’m trying to tell you that Google is telling us that Core Web Vitals are going to be a ranking factor.

Google makes hundreds of changes and tweaks to its ranking algorithm every year. No one knows what all of those changes are because Google doesn’t usually tell us. So when they do write an announcement about a new ranking factor or change coming, it’s because it’s important.

What are Core Web Vitals?

Web Vitals is an initiative by Google to help provide essential metrics for a healthy website. Core Web Vitals are page experience signals and a subset of Web Vitals. These should be measured for every website and will be referenced across Google’s tools.

Each Core Web Vital represents a distinct and measurable part of the user experience. These will evolve over time, but Google has given webmasters and SEOs 3 metrics to focus on for now:

  • Largest Contentful Paint (LCP) – Measures Page Load Performance
  • First Input Delay (FID) – Measures Interactivity
  • Cumulative Layout Shift (CLS) – Visual Stability

These are not the only Web Vitals, and these three metrics will not be what Google will focus on forever. However, as the web evolves, Google will provide us with metrics to guide us to create better user experiences.

Largest Contentful Paint (LCP): Measuring Load Performance

Largest Contentful Paint (LCP) is the point during page load when the page’s main content has likely loaded. This is recorded once the web page has rendered the largest image or text block visible in the viewport.

The basic meaning here is that when the main content of your page loads on the screen, whether that content is an image or text, your LCP is then recorded. Please understand that Google does not count content that does not add to the value of a users’ experience So Google isn’t recording things like loading indicators or those annoying full-screen splash pages (looking at you Neil Patel).

The faster your LCP score, the more reassured a user is that the page is usable. If a user is waiting for your site to load and doesn’t see any content for more than a couple of seconds, you’ve probably lost them. 😢

What is a good LCP score? Google says an LCP indicating a positive page load experience occurs within 2.5 seconds of your page starting to load.

First Input Delay (FID): Measuring Page Interactivity

First Input Delay (FID) is the amount of time measured from when a user first interacts with your page to the time the browser can begin to process those interactions. You’ve probably experienced this when a webpage has loaded on your phone or tablet, and you try to scroll, but the website response is delayed. That delay is your FID.

The goal is to have a low FID so that users know that your page is usable. No one wants to sit around waiting for a page to let you interact with it when there are tons of pieces of content on the web waiting to be discovered.

What is a good FID score? According to Google, a good FID is less than 100ms.

Cumulative Layout Shift (CLS): Measuring Visual Stability

Have you ever thought a web page loaded and clicked something only to see the webpage shift and you have clicked an entirely different link?

Sometimes it’s not a big deal; you can just hit back. But what if you were on a purchase confirmation screen and you meant to click ‘Cancel’ but instead hit ‘Purchase’ because the content on your screen shifted down?

Depending on how much money you’ve just spent, that could be a truly terrible day.

Google is measuring this! Cumulative Layout Shift (CLS) is a page experience metric that measures how often users experience these layout shifts. According to Google, “to provide a good user experience, pages should maintain a CLS of less than 0.1”.

Why Do Core Web Vitals Matter?

Google created Core Web Vitals to help SEOs, webmasters, devs, and anyone else building websites to align user experience and performance monitoring. They want to help all of us build a better web for, well, all of us.

When you improve your Core Web Vitals, you’re improving your website’s user experience (UX) while also aligning your site with SEO best practices.

When will Google implement Core Web Vitals?

Google introduced these metrics to us this past Spring to prepare us for their official introduction into the search engine ranking algorithm in the future. They say the changes won’t happen this year and they will give us at least 6 months’ notice before rolling them out. So you have time to get you or your clients’ websites prepared but I would plan for this to happen in 2021.

Google has plenty of other ranking factors that go into play so the way your site performs on those other metrics will likely affect how much of an impact this has on your site.

How Can I Track Web Vitals?

Google Tools

There are plenty of Google tools that make it very simple to find out the web vitals of the pages of your site.

PageSpeed Insights + Lighthouse

These are Google products and as you guessed it, they record Core Web Vital metrics. You can simply enter your URL in the PageSpeed Insights form or use the Lighthouse report in the Chrome Browser developer tools. Be aware that the extensions you use on your browser can affect your scores, so I suggest doing browser-based tests in an incognito window or a profile that does not have browser extensions.

Google Chrome and Brave Browser Web Vitals Extension

Use the Web Vitals browser extension on Chrome (or Brave) to be able to provide you with instant metrics of a web page. I’ve been using it in Brave and it works on any other Chromium-based browser.

Screenshot of Web Vitals Chromium Extension for EkomEnyong.com

*Nods approvingly of self*

Google Search Console

Google Search Console is one of the best places to find and fix Core Web Vital problems. You can look at a mobile or desktop report that will group your pages by good, needs improvement, and poor. If you check that report, you will find which pages on your site pass the Core Web Vitals assessment so you can focus on improving the ones that need attention

Tracking for Developers

Tracking Core Web Vitals in Next.js 9.4+

If your client is working on a Next.js application running version 9.4 and up, they automatically collect that information for you. You can create a custom App component and define a reportWebVitals function. You track more than just Web Vitals.

// Code from https://nextjs.org/docs/advanced-features/measuring-performance

export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric) // The metric object ({ id, name, startTime, value, label }) is logged to the console
  }
}
_app.js

Check out their docs on how to measure performance in Next.js for more information.

Tracking Core Web Vitals in Gatsby

Gatsby is a favorite among developers because they have plenty of plugins developers can use to make their workflow a little easier. If your site is using Gatsby, you can install the Gatsby Web Vitals plugin.

Tracking Core Web Vitals for Everyone Else

For our other developers, the web-vitals package can help you to collect the metrics you need manually. Google built the open-source package to track Web Vitals on real users in a way they are measured in Chrome and other Google tools. You will need to then send the metrics to your analytics.