Core Web Vitals Checker: Does Your Page Pass? (LCP, FID, CLS) 🌎

How It's Calculated

Core Web Vitals are not computed with a single aggregate formula — each metric has its own measurement definition and pass/fail thresholds applied at the 75th percentile of page loads for a given URL (field data) or against fixed cutoffs (lab data). This calculator applies the official Google/W3C thresholds directly:

LCP Classification:
  if LCP_ms ≤ 2500          → "Good"
  if 2500 < LCP_ms ≤ 4000   → "Needs Improvement"
  if LCP_ms > 4000           → "Poor"

FID Classification:
  if FID_ms ≤ 100            → "Good"
  if 100 < FID_ms ≤ 300      → "Needs Improvement"
  if FID_ms > 300            → "Poor"

CLS Classification:
  if CLS ≤ 0.1               → "Good"
  if 0.1 < CLS ≤ 0.25        → "Needs Improvement"
  if CLS > 0.25              → "Poor"

Overall Pass:
  ALL three metrics = "Good"  → Page passes Core Web Vitals
  ANY metric ≠ "Good"         → Page fails Core Web Vitals

LCP (Largest Contentful Paint) measures how long it takes for the largest visible element in the viewport — typically a hero image, a <video> poster, or a large block of text — to fully render. It is a loading performance metric defined by the W3C Largest Contentful Paint API.

FID (First Input Delay) measures the delay between the first user interaction (click, tap, key press) and when the browser actually begins processing the event handler. It captures main-thread blockage caused by JavaScript execution. (Note: Google began replacing FID with INP — Interaction to Next Paint — as the official standard in March 2024, but FID remains a widely reported field metric.)

CLS (Cumulative Layout Shift) is a unitless score measuring the total amount of unexpected visual instability during a page's entire lifespan. It is calculated as:

CLS = Σ (impact_fraction × distance_fraction)

Where impact_fraction is the proportion of the viewport affected by the shifting element, and distance_fraction is the largest distance any element moved relative to the viewport height/width.

---

Reference Table

Source: web.dev / Google Search Central, official Core Web Vitals thresholds (updated 2024).

---

Typical Cases

Example 1 — Passing page (all Good):

Example 2 — One failing metric:

Example 3 — Heavy JavaScript + unstable layout:

---

Common Errors

1. Confusing lab data with field data. Tools like Lighthouse run in a controlled environment (simulated throttling) and produce lab scores. Google uses field data (Chrome UX Report, 75th percentile) for ranking. A Lighthouse LCP of 1,800 ms does not guarantee a field LCP below 2,500 ms under real mobile network conditions.

2. Measuring CLS only on initial load. CLS accumulates throughout the entire page session. Interactions like accordion expansions, infinite scroll, cookie banners appearing after load, or late-loading fonts can all contribute CLS after the initial render — and all count toward the score.

3. Ignoring the 75th-percentile rule. Google does not use median (50th percentile) values. Even if 74% of your users experience a Good LCP, if the 75th-percentile user sees 2,600 ms, your page is classified as "Needs Improvement." You must optimize for the slower portion of your audience.

4. Treating FID and INP as interchangeable. FID only captures the first interaction delay and ignores subsequent interactions (e.g., clicking filters on a search page). INP, which replaced FID as an official Core Web Vital in March 2024, measures the worst-case interaction delay across the entire session. A page with FID = 50 ms can still fail INP if a later JavaScript-heavy interaction takes 600 ms.

5. Missing image dimensions causing CLS. One of the most common CLS causes is images without explicit width and height HTML attributes. The browser cannot reserve space for them before they load, so the layout shifts when the image appears. Always set dimensions on <img> tags.

---

Quick Answer

Does my page pass Core Web Vitals? Only if all three metrics score "Good" at the 75th percentile of real users: LCP ≤ 2,500 ms, FID ≤ 100 ms (now INP ≤ 200 ms since March 2024), and CLS ≤ 0.1. One failing metric fails the whole page. Optimize for the slower 25% of your audience — not the average visitor — and prioritize mobile, since Google indexes mobile-first.