You can’t improve what you can’t see — run Lighthouse, read the three Core Web Vitals, and use the DevTools panels.
Why: it’s easy to "speed things up" by guessing and change nothing that users feel. Always measure first, make one change, then measure again — so you know what actually helped. Note: optimizing without measuring is how you waste hours on the wrong thing.
Why: Lighthouse is a free tool built into Chrome that grades a page and lists exactly what to fix. It’s the fastest way to get a starting score and a to-do list. Note: run it on the production build, not the dev server — dev builds are slower and skew the numbers.
1. Open your page in Chrome.
2. Press F12 to open DevTools.
3. Click the "Lighthouse" tab.
4. Choose "Performance" + "Mobile", then "Analyze page load".
5. Read the score (0–100) and the "Opportunities" list of fixes.Why: Google boils "fast" down to three numbers, and the whole field is organized around them. Learn what each one means in plain words — most of this course is about improving these three.
LCP Largest Contentful Paint
How fast the main content (usually the big image or heading)
shows up. Aim for under 2.5 seconds.
INP Interaction to Next Paint
How quickly the page responds after you click or tap.
Aim for under 200 milliseconds. (INP replaced FID in 2024.)
CLS Cumulative Layout Shift
How much the page jumps around as it loads. Aim for under 0.1.Why: Lighthouse is a "lab" test — one run on a simulated device, great for debugging. But real users have slower phones and flaky networks, so also watch "field" data (real-user measurements) when you can. Note: a perfect lab score doesn’t guarantee real users feel it — they’re different things.
Why: Lighthouse tells you what’s slow; the DevTools Network and Performance panels show you why. Network lists every file with its size and load time; Performance records what the page does over time. Note: tick "Disable cache" in the Network panel to see what a first-time visitor experiences.
Network panel
- Every request, its size, and how long it took.
- Sort by size to find your heaviest files.
Performance panel
- Click record, reload, stop — see where time goes.
- Long solid blocks = the page was busy and couldn't respond.