Measuring Core Web Vitals
Track and improve performance metrics.
Measuring Core Web Vitals is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Vitals Matter
Core Web Vitals are Google's user-centric performance metrics. They quantify loading, interactivity, and visual stability, and they influence both UX and search ranking.
The Three Metrics
The trio is LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint). Each targets a different aspect of perceived performance.
LCP
LCP measures when the largest visible element (hero image, heading) finishes rendering. Good is under 2.5 seconds. SSR helps by delivering that content in the initial HTML.
CLS
CLS measures unexpected layout shifts as the page loads. Good is under 0.1. Reserve space for images and ads, and avoid inserting content above existing content.
<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->INP
INP measures responsiveness to user interactions across the page's life, replacing the older FID. Good is under 200 ms. Heavy JS on the main thread hurts INP.
How SSR Helps Vitals
SSR improves LCP by painting content sooner and can reduce CLS by delivering stable layout early. Incremental hydration improves INP by shipping less JavaScript up front.
Lab Vs Field Data
Lab data comes from synthetic tools like Lighthouse in a controlled environment. Field data (CrUX, RUM) comes from real users. Optimize using both; field data is what ranking uses.
Measuring With Lighthouse
Run Lighthouse in Chrome DevTools or CI to get lab LCP, CLS, and a total blocking time proxy for INP, plus actionable diagnostics.
// npx lighthouse https://example.com --viewThe web-vitals Library
Collect real-user vitals in the browser with the web-vitals library and send them to your analytics endpoint.
import { onLCP, onCLS, onINP } from 'web-vitals';
onLCP(console.log);
onCLS(console.log);
onINP(console.log);Reducing JavaScript
Smaller bundles improve INP and time-to-interactive. Use route-level lazy loading, @defer, incremental hydration, and tree-shaking to cut shipped JS.
Iterate And Verify
Performance work is measure, change, measure again. After enabling SSR, hydration, or defer, re-run Lighthouse and watch field data trend over weeks to confirm real gains.
Quick Check
Check your Core Web Vitals knowledge.
Recap
You learned the Core Web Vitals (LCP, CLS, INP), how SSR and incremental hydration improve them, the lab vs field distinction, and how to measure with Lighthouse and the web-vitals library, then iterate with re-measurement.
Frequently asked questions
Is the “Measuring Core Web Vitals” lesson free?
Yes — the full text of “Measuring Core Web Vitals” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Measuring Core Web Vitals”?
Track and improve performance metrics. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Measuring Core Web Vitals” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- What Is Hydration
- Enabling Full Hydration
- Incremental Hydration with @defer
- Measuring Core Web Vitals