Angular Academy · Lesson

Measuring Core Web Vitals

Track and improve performance metrics.

Lesson 4 of 413 steps

Measuring Core Web Vitals is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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 --view

The 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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Measuring Core Web Vitals” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Measuring Core Web Vitals”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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

← Back to Angular Academy