Lighthouse Audits and Scoring
Run Lighthouse in DevTools or CI, read the performance score and diagnostics, and prioritise the opportunities with the highest savings.
Lighthouse Audits and Scoring is a free Frontend Academy lesson on CoddyKit — lesson 2 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 Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is Lighthouse?
Lighthouse is Google's open-source audit tool that simulates a page load and scores it across Performance, Accessibility, Best Practices, SEO, and PWA categories. Built into Chrome DevTools and runnable from CLI or CI.
Running Lighthouse in DevTools
Open DevTools, click the Lighthouse tab, choose categories and device (mobile/desktop), click 'Analyze page load'. The simulated test takes around 30 seconds.
Performance Score Breakdown
The Performance score (0–100) is a weighted average of: LCP (25%), Total Blocking Time (30%), CLS (25%), FCP (10%), Speed Index (10%). The bar is set high — 90+ is 'Good'.
First Contentful Paint (FCP)
FCP marks when the first piece of content (text or image) is painted. Different from LCP — FCP cares about anything, LCP cares about the largest element. Good: under 1.8s.
Total Blocking Time (TBT)
TBT measures how long the main thread is blocked by JavaScript tasks longer than 50ms. High TBT means the page feels unresponsive even if it looks ready.
Reading the Opportunities Section
Lighthouse lists 'Opportunities' with estimated savings (e.g. 'Eliminate render-blocking resources: 1.2s'). Sort by savings — fix the biggest items first for maximum impact.
Common Opportunities
Frequent fixes: defer/async non-critical scripts, inline critical CSS, preload key requests, use a CDN, enable text compression (Brotli/gzip), serve modern image formats.
Lighthouse CLI
Run Lighthouse from the command line for scripted audits.
npm install -g lighthouse
lighthouse https://example.com \
--output html \
--output-path ./report.html \
--chrome-flags="--headless"Lighthouse CI in GitHub Actions
Run audits on every pull request and fail the build if scores drop below thresholds.
# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
audit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci && npm run build
- uses: treosh/lighthouse-ci-action@v11
with:
configPath: ./lighthouserc.jsonLighthouse Config: Score Assertions
Define assertions in lighthouserc.json to fail PRs that regress scores.
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.95 }],
"largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
}
}
}
}Throttling and Device Simulation
Lighthouse simulates a slow 4G network and a mid-tier mobile CPU by default. This is intentional — production users on real devices are slower than your dev machine.
Score Variance — Why It Wobbles
Lighthouse scores fluctuate between runs because of variable JavaScript timing. Run audits 3-5 times and take the median. Use Lighthouse CI's numberOfRuns for automatic median calculation.
Quick Check
Which Lighthouse metric measures how long the main thread is blocked by long JavaScript tasks?
Recap: Lighthouse
Lighthouse audits Performance, Accessibility, Best Practices, SEO, PWA. Performance score is weighted average of LCP, TBT, CLS, FCP, Speed Index. Opportunities section ranks fixes by estimated savings. Run with DevTools, CLI, or in CI with treosh/lighthouse-ci-action. Score variance: take median of multiple runs.
Frequently asked questions
Is the “Lighthouse Audits and Scoring” lesson free?
Yes — the full text of “Lighthouse Audits and Scoring” is free to read here on the web, and the Frontend 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 Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Lighthouse Audits and Scoring”?
Run Lighthouse in DevTools or CI, read the performance score and diagnostics, and prioritise the opportunities with the highest savings. You practise Frontend 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 Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Lighthouse Audits and Scoring” 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 Frontend Academy lesson?
Yes. Every Frontend 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
- Core Web Vitals: LCP FID CLS
- Lighthouse Audits and Scoring
- Image Optimization: lazy loading formats WebP
- Code Splitting and Lazy Routes