Why Performance Matters & The Core Web Vitals
⚡ Why Performance Matters & The Core Web Vitals
Why It Actually Matters
Slow pages measurably lose users — higher bounce rates, lower conversion, and a real accessibility dimension: users on low-end devices or poor connections are hit hardest by a page that isn't optimized, making performance as much an inclusivity issue as a business one.
The Three Core Web Vitals
| Metric | What It Measures |
|---|---|
| LCP — Largest Contentful Paint | How long until the biggest visible element renders (Chapter 2) |
| INP — Interaction to Next Paint | How responsive the page feels during actual use (Chapter 4) |
| CLS — Cumulative Layout Shift | How much visible content unexpectedly moves around (Chapter 3) |
A Recent Change Worth Knowing
INP replaced FID (First Input Delay) as the third official Core Web Vital in March 2024 — FID only measured the delay before the first interaction started processing; INP measures the full responsiveness of every interaction throughout a page's lifetime. Older articles referencing FID are describing the predecessor metric.
Historical Context: RAIL
Before Core Web Vitals existed, Google's RAIL model (Response, Animation, Idle, Load) was the conceptual framework performance guidance was built around — Core Web Vitals is effectively RAIL's ideas made concrete and measurable.
Good / Needs Improvement / Poor
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP | ≤ 2.5s | 2.5s – 4.0s | > 4.0s |
| INP | ≤ 200ms | 200ms – 500ms | > 500ms |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
What the Numbers Actually Feel Like
Poor Vitals
Content pops in late, images shift text around after it's already being read, and taps feel like they're being ignored for half a second.
Good Vitals
The main content is visible almost immediately, nothing jumps around, and every tap or click gets an instant visual response.
🛠️ Tooling Overview
Lighthouse
Runs in Chrome DevTools or PageSpeed Insights, simulating a page load under fixed, controlled conditions — lab data, useful for diagnosing specific issues.
Chrome DevTools Performance Panel
Records an actual interaction or page load in detail — the tool used throughout this course to see exactly what's happening on the main thread.
A brief preview: Lighthouse's lab data and real users' field data can genuinely disagree — Chapter 8 covers this distinction in depth, including the web-vitals JS library for measuring real user experiences directly.
💻 Coding Challenges
Challenge 1: Classify Three Scores
Given LCP = 3.2s, INP = 150ms, and CLS = 0.3, classify each individually as Good, Needs Improvement, or Poor using this chapter's threshold table.
Goal: Practice reading the threshold table accurately, metric by metric.
Challenge 2: Explain FID vs INP
Explain in your own words why a page could have had a "good" FID score under the old metric but still feel sluggish to real users — and why INP was introduced specifically to catch that gap.
Goal: Practice explaining what changed and why it matters, not just reciting that a change happened.
Challenge 3: Lab vs Field, a First Look
A Lighthouse report shows a "Good" LCP score, but real users on 3G connections in the field data report "Poor." Propose one plausible reason for this gap, based only on what this chapter says about lab vs field data.
Goal: Practice reasoning about this distinction before Chapter 8 covers it formally.
Lighthouse measures a page under fixed, simulated network and CPU conditions — useful for diagnosing specific issues, but not a guarantee of what real users on real devices and real networks actually experience. A page can score 100 in Lighthouse and still feel slow to someone on an older phone over a spotty connection. A high lab score is a starting point for investigation, not proof the page is actually fast for everyone — Chapter 8 covers pairing lab data with real field data properly.
🎯 What's Next
With all three metrics introduced, the next chapter goes deep on the first: Largest Contentful Paint (LCP) — what counts as "largest content," the common causes of poor LCP, and how to fix them.