Core Web Vitals & CRP

⏱️ ~3-minute bite · solve the sandbox to master

0%lesson

🧒

5-Year-Old Metaphor

— The physical, real-world picture. No jargon.

🩺 Vital signs for a webpage — each metric answers a specific user experience question.

The five questions

TTFB

Is the server fast?

User thinks: "How long before any HTML arrives?"

FCP

Is anything happening?

User thinks: "When does the blank screen go away?"

LCP

Is the main content here?

User thinks: "When can I read/see the page?"

CLS

Is the page stable?

User thinks: "Did content just jump when I tried to click?"

INP

Is the page responsive?

User thinks: "Did my click/tap do anything?"

Critical Rendering Path (CRP)

Every web vital is shaped by the Critical Rendering Path — the sequence of steps the browser must complete before pixels appear on screen.

DNS lookup~20-120msResolve domain to IP

TCP + TLS handshake~50-200msEstablish secure connection

HTTP request/TTFB~100-500msServer processes, sends first byte

HTML parse → DOM~10-100msBrowser builds DOM tree

CSS fetch + parse → CSSOM~20-500msRender-blocking — can delay FCP

JS fetch + execute~50-2000msParser-blocking if synchronous

Layout → Paint → Composite~5-50msFCP / LCP fire here

Field data vs lab data

Lab data (Lighthouse)

• Runs in a controlled environment
• Throttled CPU + network
• Reproducible — good for debugging
• Doesn't reflect real users
• CLS/INP often inaccurate in lab

Field data (CrUX)

• Real Chrome users (28-day window)
• Accounts for all devices/networks
• What Google uses for ranking
• 28-day lag — slow feedback loop
• web-vitals.js measures in-page

🎛️

Interactive Sandbox

— Move something, see it react instantly.

Core Web Vital

LCP

Largest Contentful Paint

Time from navigation to largest image or text block rendered in the viewport

Poor

demo score

Good < 2.5sNeeds work 2.5–4.0sPoor > 4.0s

Page load timeline — when LCP fires

TTFB

FCP

LCP

CLS

INP

LCP: Largest element visible (~2200ms into load)

Top causes of poor LCP

✕Hero image not preloaded (discovered late in CSS)

✕No CDN for images — slow origin server

✕Client-side rendered content (empty HTML shell)

Top fixes

✓<link rel='preload' as='image'> for hero images

✓Use next/image with priority prop for above-fold images

✓Server-render the LCP element (not client-side)

Gotcha: The LCP element can change as the page loads — React might update the DOM, making a larger element the new LCP candidate. Chrome DevTools Performance panel shows all LCP candidates.

Insight: Images without explicit width/height cause CLS. But they also hurt LCP because the browser can't compute layout until the image loads, delaying paint. Always set width and height on img elements.

Explored:📡🎨🖼️📐⚡

🎯

Challenge

Explore all 5 Core Web Vitals. For each one, answer: what user experience does it measure, and what's the single most impactful fix?

Try it

🎯

Why Should I Care?

— The exact interview question + the bug it kills.

Interview questions

Q: How does LCP differ from FCP?

FCP fires when ANY content is painted — including spinners, skeletons, or placeholder text. LCP fires when the largest text block or image in the viewport is painted. A page with a fast-loading spinner but slow hero image can have FCP at 0.8s (good) and LCP at 4.5s (poor). LCP is a better proxy for when the page is "actually useful" to the user.

Q: What is INP and why did it replace FID?

First Input Delay (FID) measured only the FIRST interaction on the page, and only the delay before the browser could start handling it (not the full processing + paint time). INP measures ALL interactions throughout the page lifetime (clicks, taps, keyboard events) and reports the worst one. An e-commerce product page might pass FID but fail INP because the "Add to Cart" click on the third interaction is sluggish.

Bug: Images without width/height cause CLS

html

1	<!-- ✗ No dimensions — browser allocates 0px until image loads -->
2	<img src="/hero.jpg" alt="Hero" />
3	<!-- When image loads, layout shifts → CLS penalty -->
4
5	<!-- ✓ Always set width + height -->
6	<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
7	<!-- Browser reserves space → no layout shift -->
8
9	<!-- ✓ Next.js: use next/image (sets dimensions + lazy-loads) -->
10	<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

🔬

The Deep Dive

— Spec refs, engine internals, the minutiae.

Measuring with web-vitals.js

1	import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';
2
3	function sendToAnalytics(metric) {
4	const { name, value, rating, id } = metric;
5	// rating: 'good' \| 'needs-improvement' \| 'poor'
6	navigator.sendBeacon('/analytics', JSON.stringify({
7	metric: name, value, rating, url: location.href,
8	}));
9	}
10
11	onLCP(sendToAnalytics);
12	onINP(sendToAnalytics);
13	onCLS(sendToAnalytics);
14	onFCP(sendToAnalytics);
15	onTTFB(sendToAnalytics);

PerformanceObserver — measuring Long Tasks for INP

1	// Long Tasks API — tasks > 50ms block INP
2	const observer = new PerformanceObserver((list) => {
3	list.getEntries().forEach((entry) => {
4	console.log('Long Task:', entry.duration.toFixed(0) + 'ms');
5	// attribution: which script/function caused it
6	entry.attribution.forEach((attr) => {
7	console.log(' →', attr.name, attr.containerSrc);
8	});
9	});
10	});
11	observer.observe({ type: 'longtask', buffered: true });
12
13	// Also: Event Timing API (measures interaction latency directly)
14	const evObserver = new PerformanceObserver((list) => {
15	list.getEntries().forEach((entry) => {
16	if (entry.duration > 200) { // INP threshold
17	console.log('Slow interaction:', entry.name, entry.duration);
18	}
19	});
20	});
21	evObserver.observe({ type: 'event', buffered: true, durationThreshold: 16 });

Core Web Vitals as a Google ranking signal

Since June 2021, Google incorporates CWV into the "page experience" ranking signal. All three Core Web Vitals (LCP, INP since 2024, CLS) must be in the "Good" range for 75% of page loads (75th percentile of field data) to get the maximum ranking benefit. Lab scores (Lighthouse) do NOT affect rankings — only CrUX field data matters.

🎤

Interview Questions

— Real questions from real interviews — with answers.

LCP measures when the largest image or text block in the viewport is painted — poor scores are usually caused by unpreloaded hero images or client-side rendered content.

CLS measures cumulative visual instability. Fix images by setting explicit dimensions; fix fonts with font-display: swap or preloading.

FID measured only the first interaction and only the input delay, not the full processing + paint time. INP measures all interactions and picks the worst.

The CRP is the sequence of steps — DNS, TCP, HTML parse, CSSOM build, JS execution — that must complete before the first pixel is painted.

Lab data is synthetic (throttled, reproducible); field data is real Chrome users over 28 days. Only field data from CrUX affects Google rankings.

Identify long tasks blocking the main thread with PerformanceObserver / Chrome DevTools, then break them with scheduler.yield(), memoization, or Web Workers.

🎮

Memory Game

— Quick quiz — lock the concept in long-term memory.

1/4

What is a Long Task as defined by the browser?