Czym jest Lighthouse?

Lighthouse to open-source narzędzie audytu stron internetowych od Google (release 2017). Automatycznie testuje performance, SEO, accessibility, best practices i PWA. Dostępne w Chrome DevTools, CLI, jako Node module, oraz integracja w PageSpeed Insights (PSI).

Lighthouse generuje score 0-100 dla każdej kategorii + szczegółowe rekomendacje co poprawić.

5 kategorii audytu

1. Performance

Core Web Vitals — LCP, INP, CLS
First Contentful Paint (FCP)
Speed Index
Total Blocking Time (TBT)
Time to Interactive (TTI) — deprecated w 2024

2. Accessibility

ARIA roles correctness
Color contrast (WCAG 2.1)
Form labels
Heading hierarchy
Image alt text
Keyboard navigation

3. Best Practices

HTTPS usage
Console errors
JS library vulnerabilities
Image aspect ratio
Browser compatibility

4. SEO

Meta tags (title, description)
Viewport meta
Crawlable links
robots.txt validity
Mobile-friendly

5. PWA (Progressive Web App)

Service worker
Manifest.json
Installable

Scoring

Score	Status
90-100	Good (zielony)
50-89	Needs Improvement (pomarańczowy)
0-49	Poor (czerwony)

Performance score to ważona kompozycja: LCP 25%, TBT 30%, CLS 25%, FCP 10%, Speed Index 10%.

Lighthouse vs PageSpeed Insights vs CrUX

Lighthouse — lab data (controlled environment, single test run)
PageSpeed Insights (PSI) — Lighthouse w wersji web + CrUX field data (real users)
Chrome User Experience Report (CrUX) — field data od realnych użytkowników Chrome (last 28 days)

Lab vs Field: Lab to symulacja w konkretnym throttle setting (Slow 4G, Moto G4 CPU). Field to to co realnie doświadczają użytkownicy.

Dla SEO Google używa field data (CrUX) jako ranking signal. Lab data (Lighthouse) służy do debugowania.

Jak uruchomić Lighthouse

Chrome DevTools

F12 → zakładka Lighthouse → Analyze page load
Opcje: Mobile/Desktop, kategorie, throttling

CLI

npm install -g lighthouse
lighthouse https://example.com --view --preset=desktop

Node module

const lighthouse = require('lighthouse');
const result = await lighthouse(url, { onlyCategories: ['performance'] });

CI/CD

Lighthouse CI (@lhci/cli) — automatyczne audyty w PR
GitHub Action — treosh/lighthouse-ci-action

Bulk audit

PageSpeed Insights API — programmatic CrUX + Lighthouse data
MarketingOS — cli cwv check <firma> <url1> <url2> używa PSI API

Performance optimization checklist (Lighthouse)

Image optimization — WebP/AVIF, responsive srcset, lazy loading
Minify CSS/JS — w buildzie (Next.js, Vite, Webpack robi auto)
Code splitting — dynamic imports dla below-fold
Font optimization — display: swap, preconnect, subset
Critical CSS — inline above-the-fold styles
Defer non-critical JS — <script defer> / <script async>
CDN — globalna edge (Cloudflare Pages)
HTTP/2 + brotli — server config
Cache headers — long max-age dla static, immutable
Reduce 3rd-party — minimalize trackers, lazy-load analytics

Najczęstsze błędy

Score chasing — 100/100 vs 95/100 nie zmienia rankingu, ale +10 godzin pracy
Lab vs field disconnect — Lighthouse pokazuje 95, ale CrUX pokazuje 70 → Twoja optymalizacja nie odzwierciedla real users
Single page audit — typowo testujesz home, ale każda strona ma inny score
Brak monitoring — jedno-razowy audyt vs continuous monitoring (PSI weekly)

Powiązane pojęcia

Core Web Vitals — co Lighthouse mierzy
SEO — Lighthouse SEO category
SEO techniczne — kontekst
Cloudflare Pages — narzędzie poprawy score
Astro — framework wygrywa Lighthouse
Conversion rate — performance → CR correlation

Lighthouse — audyt performance i SEO od Google