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


{{ ::google_lighthouse_extension.png?nolink |}}
===== 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 ([[it:dev:a11y|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://
  * [[it:dev:a11y|A11Y – Digitální přístupnost]]
  * [[it:dev:web_tech|Moderní webové technologie]]
  * [[it:dev:kpi|KPI – Měření úspěšnosti webu]]

//Tagy: {{tag>dev web lighthouse performance seo google optimization}}//