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ě.

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í.

—

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.

—

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.

—

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).

—

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: dev web lighthouse performance seo google optimization