Google Lighthouse

Lighthouse je analytický nástroj od Google, který pomáhá vývojářům diagnostikovat problémy a optimalizovat webové stránky. Poskytuje komplexní reporty v pěti klíčových kategoriích a navrhuje konkrétní kroky k nápravě.

1. Pět pilířů Lighthouse auditu

Lighthouse hodnotí stránku na stupnici od 0 do 100 v následujících oblastech:

Performance (Výkon): Měří, jak rychle se stránka načítá a jak rychle se stává interaktivní. Zaměřuje se na metriky jako LCP, FID nebo CLS (součást Core Web Vitals).

Accessibility (A11Y): Kontroluje, zda je web přístupný pro lidi s postižením (např. kontrast barev, sémantika HTML, alternativní texty u obrázků).

Best Practices: Prověřuje dodržování moderních standardů webového vývoje (např. používání HTTPS, bezpečné knihovny, správné rozlišení obrázků).

SEO: Základní kontrola optimalizace pro vyhledávače (titulky stránek, meta popisy, čitelnost pro roboty).

PWA (Progressive Web App): Hodnotí, zda stránka splňuje kritéria pro instalovatelnost na mobilní zařízení a offline fungování.

—

2. Klíčové metriky výkonu

Lighthouse klade velký důraz na uživatelskou zkušenost při načítání. Mezi nejdůležitější sledované hodnoty patří:

LCP (Largest Contentful Paint): Doba, za kterou se vykreslí největší viditelný prvek na stránce (např. úvodní obrázek). Ideálně pod 2,5 s.

CLS (Cumulative Layout Shift): Měří vizuální stabilitu. Pokud se prvky při načítání „poskakují“, skóre se zhoršuje.

TBT (Total Blocking Time): Čas, po který je hlavní vlákno procesoru blokováno JavaScriptem a uživatel nemůže se stránkou interagovat.

—

3. Jak Lighthouse spustit?

Existuje několik způsobů, jak provést audit:

1. **Chrome DevTools:** Stiskněte ''F12'' v prohlížeči Chrome, vyberte kartu "Lighthouse" a klikněte na "Analyze page load".
2. **PageSpeed Insights:** Webová verze od Google, která k datům z Lighthouse přidává i reálná data od uživatelů (CrUX).
3. **Příkazová řádka (CLI):** Vhodné pro automatizaci a CI/CD procesy (instalace přes npm).
4. **Browser Extension:** Doplněk pro Chrome nebo Firefox.

—

4. Optimalizace na základě reportu

Lighthouse nekončí jen u čísel, ale nabízí sekci Opportunities (Příležitosti), kde navrhuje:

Odstranění nepoužívaného JavaScriptu a CSS.

Kompresi obrázků a jejich převod do moderních formátů (WebP, AVIF).

Odložení načítání obrázků mimo viditelnou oblast (Lazy loading).

Aktivaci komprese na serveru (Gzip/Brotli).

—

5. Význam pro byznys

Vysoké skóre v Lighthouse není jen pro programátory. Přímo ovlivňuje:

Konverzní poměr: Rychlejší weby prokazatelně více prodávají.

Cenu reklamy: Google Ads zohledňuje kvalitu cílové stránky při výpočtu ceny za proklik.

Pozice ve vyhledávání: Od roku 2021 je výkon webu (Core Web Vitals) oficiálním faktorem pro hodnocení stránek v Google.

Související články:

A11Y – Digitální přístupnost

Moderní webové technologie

KPI – Měření úspěšnosti webu

Tagy: tag>dev web lighthouse performance seo google optimization