Stop 16 · PerformanceTopics · 9/13

Lighthouse

In short

Lighthouse is a free audit tool built into Chrome DevTools. In about a minute, it scores your page on performance, accessibility, SEO and best practices, and tells you what to fix first.

Google's automated auditing tool (built into Chrome DevTools) that scores a page on performance, accessibility, SEO and best practices, with specific fix suggestions.

The jaadu sits on a clinic stool while a friendly doctor checks it with a stethoscope.

Think of it like this

A health check-up report

A full-body check-up gives you numbers (sugar, BP, cholesterol), marks what's out of range, and the doctor suggests fixes. Lighthouse is that check-up for a web page, with scores, red flags and a list of suggestions.

Watch it happen

How Lighthouse measures a page

Emulate

Load

Trace

Metrics

Score

1/5It emulates a mid-range phone with throttled CPU and network, unless you pick desktop.

The big ideas

What you need to know

It's lab data

Lighthouse tests in a controlled setup, by default a simulated mid-range phone on a slowed connection. Real users may see different numbers.

Performance score from metrics

The score combines metrics like LCP, Total Blocking Time and CLS. Each has a weight.

Opportunities and diagnostics

Below the score is a list of specific problems, like unused JavaScript or images without dimensions.

Scores wobble

Run it a few times. Browser extensions and other tabs can change results, so use an Incognito window.

See it in code

Walk through the code

bash

1# Run Lighthouse from the terminal and open the HTML report2npx lighthouse https://your-portfolio.vercel.app --view3 4# Only the performance category, with desktop settings5npx lighthouse https://your-portfolio.vercel.app \6  --only-categories=performance --preset=desktop --view7 8# Save JSON to compare before and after a fix9npx lighthouse https://your-portfolio.vercel.app --output=json --output-path=./before.json

1/3Run a full audit on your live URL and open the report in the browser.

The CLI gives the same report as DevTools and is easier to repeat. Saving JSON lets you track scores across changes.

Save yourself the pain

Common mistakes

Oops

Testing your local dev server and panicking at the score.

Do this instead

Dev builds are unminified and slow on purpose. Audit a production build or the deployed site.

Oops

Chasing a perfect 100 by hiding content or hacking around audits.

Do this instead

Use the score as a guide. Fix the top opportunities that real users would feel.

Your mission

Get a check-up for your portfolio

~30 min

Quick check

Lighthouse gives your page 95, but real users on cheap phones still complain it's slow. Why could both be true?

Go deeper

1Run a Lighthouse audit on one of your deployed projects.
2Pick the top 3 suggestions and actually fix them.
3Re-run the audit afterward to confirm the score improved.