What are Core Web Vitals and what thresholds count as good?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Google's three user-experience metrics: LCP (loading — largest content paints) good under 2.5s, INP (responsiveness — worst typical interaction latency) good under 200ms, CLS (visual stability — unexpected layout shift) good under 0.1. They blend lab data with real-user field data and feed search rankings.
Detailed explanation
Vitals compress performance into what users actually feel. Largest Contentful Paint (LCP) marks when the main content — hero image, headline block — finishes rendering; slow LCP usually means slow server responses, render-blocking resources, or unoptimized hero media. Fix with faster TTFB (caching, CDN, edge rendering), preload the LCP element, and compress/convert hero images. Interaction to Next Paint (INP, successor to FID) measures the worst common interaction latency — click to visual feedback — across the page lifetime; bad INP means long main-thread tasks blocking input. Fix by splitting JS work, yielding to the browser, and debouncing heavy handlers. Cumulative Layout Shift (CLS) sums unexpected visual jumps (late-loading ads, images without dimensions, injected banners); fix by reserving space (width/height or aspect-ratio), preloading fonts with font-display: swap plus size-adjust fallbacks, and never inserting content above existing content after load. Thresholds apply to the 75th percentile of real users (field data via CrUX/RUM), not your laptop — lab tools (Lighthouse) diagnose, field data judges. Scores gate real outcomes: search ranking weight and, more importantly, measured conversion impact per 100ms.
Example
# Good thresholds (75th percentile of real users)
# LCP ≤ 2.5s Largest Contentful Paint (loading)
# INP ≤ 200ms Interaction to Next Paint (responsiveness)
# CLS ≤ 0.1 Cumulative Layout Shift (stability)
<!-- Classic CLS fix: reserve the space before the image loads -->
<img src="/hero.avif" width="1200" height="630"
style="aspect-ratio: 1200 / 630; width: 100%; height: auto;"
fetchpriority="high" alt="" />Interview tip
Name all three with their thresholds and the user pain each captures (loads slow / feels laggy / jumps around). One fix per metric shows you optimize, not just recite.
Common mistakes
- Quoting lab scores while field data (what users feel) tells another story.
- Fixing LCP with heavier hero media instead of preloading and compressing.
- Ignoring CLS from ads and late-injected content.