Curriculum
Core Web Vitals are the foundation of a fast, user-friendly site — and Google agrees. These metrics measure how your site feels to real users. Nail them, and you'll improve your SEO and keep visitors happy.
How fast does your main content show up?
LCP tracks the time it takes for the largest visible element (think hero section, headline like h1, or a big image) to load.
(Now evolving into INP — more on that below)
This measures how quickly your site responds when someone first clicks or taps.
Google is phasing out FID and replacing it with INP (Interaction to Next Paint), which is more accurate and reflects all interactions — not just the first one.
Ever had a button jump while you're trying to tap it? That's CLS and it's super annoying for users. This happened to me while using Uber Eats app. As I searched for a restaurant, I went to click on a restaurant and rest of the content loaded and pushed the restaurant card down. This resulted in me clicking on the wrong restaurant.
CLS measures how much the layout shifts during loading. A high CLS means your content moves around a lot as it renders.
Only three metrics are Core, but others help you diagnose performance too:
Metric | Description | Ideal Value |
---|---|---|
FCP | First Contentful Paint — when something (anything!) shows up | Under 1.8s |
Speed Index | How quickly everything visually appears, measures visual loading progress | Under 3.4s |
TBT | Total Blocking Time — how long JS blocks interactivity | Under 200ms |
Next.js gives you superpowers here — especially with React Server Components and streaming.
Why Next.js Helps: - Server Components = less JS on the client - Streaming = faster perceived loading - Automatic image and font optimization
Here's how we optimize Core Web Vitals in this course:
Core Web Vitals aren't just numbers — they're about how your site feels. Focus on experience, and the scores will follow.