RO
← Back to the blog

Optical Web Design

Core Web Vitals explained in plain English

LCP, FID and CLS made simple: what each one measures, the values Google wants, and what changes in February 2022 when the signals reach desktop.

The Optical Design desk · web writer4 min read

Core Web Vitals are three measurements Google uses to judge how a website feels to a real person: how fast the main content shows up (LCP), how quickly the page responds to the first tap or click (FID), and how much the page jumps around while it loads (CLS). On mobile they've counted toward rankings since the summer of 2021, and starting in February 2022 Google is applying them on desktop too. You don't need to be a developer to understand them.

The three measurements

MetricWhat it measuresGood value
LCP (Largest Contentful Paint)when the largest element appears on screen: the hero image or a big block of text2.5 seconds or less
FID (First Input Delay)how long a visitor waits between their first click and the page starting to react100 milliseconds or less
CLS (Cumulative Layout Shift)how much page elements move around unexpectedly0.1 or less

For LCP and CLS, Google also sets a "poor" threshold: over 4 seconds for LCP, over 0.25 for CLS. Anything in between "needs improvement."

One detail matters a lot: the values aren't judged on a single visit. Google looks at the 75th percentile of real visits, separately for mobile and desktop. Put simply, at least three out of four visits need to land in the good range. A site that loads fast on your laptop over fiber can still fail for people opening it on a phone over 4G.

What changes in 2022

In November 2021 Google announced that page experience signals are coming to desktop rankings: the rollout starts in February 2022 and should wrap up by the end of March. On mobile, the same update rolled out between June and August 2021.

On desktop, the signals are the three Core Web Vitals, HTTPS, and the absence of intrusive interstitials that cover the content. Mobile friendliness, obviously, doesn't apply to desktop.

Don't overestimate the effect, though. Google's own documentation says it always tries to show the most relevant content, even if the page experience is sub-par. A fast site with thin copy won't beat a slower one that answers exactly what the person is looking for. Speed helps when you're competing with pages that are just as good.

What usually breaks each one

High LCP. Most of the time the culprit is the big hero image, uploaded straight from the camera and never compressed. The server matters too: if it responds slowly, everything starts late. Web fonts can also keep text hidden for a moment.

High FID. The browser has a single main thread. If it's busy loading and running a big JavaScript file, the first click has to wait. Plugins added "just in case," chat widgets, sliders and tracking scripts all add up.

High CLS. The page jumps when things show up without reserved space: images without declared dimensions, ads that resize after loading, a web font that renders bigger or smaller than the fallback. The classic example: you go to tap "Book now" and, right then, a banner pushes everything down.

How to check them

  1. PageSpeed Insights. Enter a page URL and you get two kinds of data: field data from real visitors (from the Chrome User Experience Report), if the site has enough traffic, and a lab test run on the spot.
  2. Search Console. The Core Web Vitals report shows, based on real visitor data, which pages on your site are in the good range and which aren't. Since January 17, 2022, the Page Experience report also has a desktop section.
  3. Lighthouse in Chrome. Good for lab tests, when you fix something and want to see the effect right away.

One catch: FID can't be measured in the lab, because it needs a real person actually clicking. Lab tests use Total Blocking Time (TBT) instead, which Google says correlates well with FID. If TBT drops in Lighthouse, your visitors' FID usually drops too.

What to do

  • Resize and compress the hero image before uploading it.
  • Set width and height on images and reserve space for banners.
  • Remove plugins and scripts nobody uses anymore.
  • Look at mobile data, not just desktop.
  • Check again after every major change to the site.

When we build a site, our web services page lists what we check before launch.

Sources

  1. Timing for bringing page experience to desktop, Google Search Central Blogthe February 2022 desktop rollout, the signals included, the June–August 2021 mobile update and the desktop section in Search Console
  2. Understanding Google Page Experience, Google Search Centralrelevant content comes first even when page experience is sub-par
  3. Largest Contentful Paint (LCP), web.devthe 2.5 and 4 second thresholds, the 75th percentile and measurement tools
  4. First Input Delay (FID), web.devthe 100 ms threshold, the cause (a busy main thread) and TBT as the lab stand-in
  5. Cumulative Layout Shift (CLS), web.devthe 0.1 and 0.25 thresholds and the usual causes of layout shifts

Checked: surse Xenia Pușcașu · editare Nora Vlăsceanu · SEO Mihnea Tăbăcaru

Want this for your business?

Tell us in two lines what you need. We come back with a plan and a quote.