Lighthouse 95

Lighthouse 95+ in Every Category

Overview

Never optimize blind. The loop is: measure the real URL → identify the exact element/cause in the JSON → fix that one cause → redeploy → re-measure. Guessing burns rounds; one identified cause is worth ten plausible optimizations.

Iron Rules

1. Measure the URL users actually hit. Any host with preview/prod aliases (Vercel, Netlify, Cloudflare Pages): a plain deploy creates a preview — the public alias still serves the OLD production until you promote it (on Vercel: --prod). Measuring the stale deploy wastes a full round (this happens silently: scores just "don't move").
2. No fix before identifying the cause. Extract the LCP element and its phase breakdown from the JSON before touching anything.
3. Verdict = 3 consecutive runs. Throttled runs vary ±0.5s / ±4 points. One run proves nothing.

Mobile AND Desktop

Lighthouse defaults to MOBILE emulation (mid-tier phone, slow 4G, 4x CPU throttle) — the hard mode, and what Google uses for Core Web Vitals. Desktop scores run 10–20 points higher. Measure both, optimize against the MOBILE run (fix mobile → desktop follows; the reverse is false), and never compare runs across presets.

Measure & Diagnose

# Mobile (default emulation)
npx lighthouse https://SITE --output=json --output-path=./lh-mobile.json --quiet \
  --chrome-flags="--headless=new" \
  --only-categories=performance,accessibility,best-practices,seo

# Desktop (confirm after mobile passes)
npx lighthouse https://SITE --preset=desktop --output=json --output-path=./lh-desktop.json --quiet \
  --chrome-flags="--headless=new" \
  --only-categories=performance,accessibility,best-practices,seo

Then interrogate the JSON — never just read the scores:

node -e "
const r = require('./lh-mobile.json');
for (const [k,v] of Object.entries(r.categories)) console.log(k, Math.round(v.score*100));
// LCP element + phases (audit id varies by LH version):
const lcp = r.audits['lcp-breakdown-insight'] || r.audits['largest-contentful-paint-element'];
console.log(JSON.stringify(lcp?.details?.items, null, 1));
// TBT culprits:
r.audits['bootup-time']?.details?.items?.slice(0,5)
  .forEach(i => console.log('JS:', i.url.split('/').pop(), Math.round(i.total)+'ms'));
// a11y failures with exact selectors:
Object.values(r.audits).filter(a => a.score !== null && a.score < 1 &&
  r.categories.accessibility.auditRefs.some(x => x.id === a.id))
  .forEach(a => console.log('A11Y:', a.id, a.details?.items?.[0]?.node?.selector || ''));
"

Fix Playbook (by identified cause)

Font Instancing + Subsetting (the usual killer move)

# pip install fonttools brotli
from fontTools.ttLib import TTFont
from fontTools.varLib.instancer import instantiateVariableFont
from fontTools.subset import Subsetter, Options

f = TTFont("font-variable.woff2")
if "fvar" in f:  # pin variable axes to the ONE weight you actually use
    instantiateVariableFont(f, {"wght": 600, "opsz": 48}, inplace=True)
opt = Options(); opt.flavor = "woff2"; opt.layout_features = ["*"]
s = Subsetter(opt)
s.populate(unicodes=range(0x20, 0x17F))  # latin + latin-ext; add smart quotes U+2013-2026
s.subset(f); f.flavor = "woff2"; f.save("font-600.woff2")

Update @font-face to font-weight: 600 and fix any usage relying on other weights.

Traps (each cost a real round)

When NOT to Use

• Field data (CrUX / real-user metrics) — Lighthouse is a lab tool. If the problem is "Search Console says CWV failing", real-user conditions differ; lab 95+ does not guarantee a field pass.
• localhost / dev mode — dev bundles are unminified and unoptimized; scores are meaningless. Only measure deployed, production-built URLs.
• SPAs measured only on the shell route — measure the routes users actually land on.

Verification Gate

Done means: 3 consecutive runs ≥95 in all four categories on MOBILE, plus one desktop run ≥95 confirming — production URL. Report both metric tables (FCP/LCP/TBT/CLS) before/after, not just scores.