Core Web Vitals Explainer (LCP, INP, CLS)
Quick visual reference for the metrics Google uses to rank pages: Largest Contentful Paint (LCP), Interaction to Next Paint (INP, replaced FID in March 2024), and Cumulative Layout Shift (CLS), plus supporting metrics. Each card shows the thresholds and the most-effective interventions for improving it.
How to use the Core Web Vitals Explainer (LCP, INP, CLS)
Browse the metric cards. Each shows the good / needs-improvement / poor thresholds for a Core Web Vital and the interventions that most effectively improve it. Use it as a reference while reading a performance report.
What the Core Web Vitals measure
Google’s Core Web Vitals condense page experience into three numbers — Largest Contentful Paint for loading, Interaction to Next Paint for responsiveness (it replaced First Input Delay in March 2024), and Cumulative Layout Shift for visual stability — each with a good / needs-improvement / poor threshold that feeds into search ranking. Knowing the cutoffs matters because “fast enough” is defined precisely, not by feel.
This is a visual reference for those thresholds plus supporting metrics like FCP and TTFB, with the most effective fix for each on its card. It explains what the metrics mean and where the lines are; to interpret an actual measurement of your own page, paste your report into the Lighthouse interpreter, which ranks the specific opportunities to improve these scores.
Common use cases
- Know the thresholds — check the exact good/poor cutoff for LCP, INP, or CLS.
- Pick a fix — see which interventions most improve a failing metric.
- Settle on targets — agree which vitals to optimise before a perf sprint.
- Onboarding — bring someone up to speed on what the vitals are.
- Reference while debugging — keep the cutoffs handy while reading a report.