Core Web Vitals and Performance Metrics cookbook

9 recipes · 57 steps · about 47 minutes of reading

Get your LCP image downloading before anything else
The hero image is huge, and it still loads last.
BeginnerRead 4 minDoing: 20 to 30 minutes5 steps
Stop an unsized image from shoving the page down
A photo loads. The page jumps.
BeginnerRead 4 minDoing: 20 to 30 minutes5 steps
Fix a font swap that shifts headings
The moment my custom font finishes loading, the heading jumps and pushes the paragraph below it down.
Beginner to intermediateRead 5 minDoing: 30 to 45 minutes5 steps
Name which INP phase slows your worst interaction
A button interaction feels sluggish, and Lighthouse just says my INP is bad.
IntermediateRead 5 minDoing: under an hour, once the slow interaction is already reproducible7 steps
Catch the React re-render hiding behind a slow INP
Every tap on this button freezes the page for a beat. I can't tell if it's my code or React's.
IntermediateRead 6 minDoing: an hour8 steps
A chat widget and stray analytics tags tanking your load time
The page feels slow, and half the network waterfall is chat widgets and analytics tags I didn't write.
IntermediateRead 6 minDoing: about an hour7 steps
Why does Lighthouse pass a page that Search Console fails?
Lighthouse gives this page a 95. Why does Search Console call the same page a failure?
Intermediate to advancedRead 5 minDoing: under an hour, using dashboards already open in the browser6 steps
Wire web-vitals into your own analytics
Search Console's Core Web Vitals report has no data for my site, and I have no idea what real visitors actually experience.
Intermediate to advancedRead 6 minDoing: an afternoon, split between your client bundle and a small backend handler6 steps
Fail a pull request the instant it pushes your Lighthouse score off budget
A 200KB image sneaks into a pull request. Nobody notices until production Core Web Vitals tank.
AdvancedRead 6 minDoing: an afternoon8 steps

Cookbook badge

Finish all 9 recipes to earn this.

In these roadmaps

Frontend Developerstep 16 of 17

Core Web Vitals and Performance Metrics cookbook

Get your LCP image downloading before anything else

Stop an unsized image from shoving the page down

Fix a font swap that shifts headings

Name which INP phase slows your worst interaction

Catch the React re-render hiding behind a slow INP

A chat widget and stray analytics tags tanking your load time

Why does Lighthouse pass a page that Search Console fails?

Wire web-vitals into your own analytics

Fail a pull request the instant it pushes your Lighthouse score off budget

In these roadmaps

Core Web Vitals and Performance Metrics cookbook

Get your LCP image downloading before anything else

Stop an unsized image from shoving the page down

Fix a font swap that shifts headings

Name which INP phase slows your worst interaction

Catch the React re-render hiding behind a slow INP

A chat widget and stray analytics tags tanking your load time

Why does Lighthouse pass a page that Search Console fails?

Wire web-vitals into your own analytics

Fail a pull request the instant it pushes your Lighthouse score off budget

In these roadmaps