Toto je starší verze dokumentu!

Google Lighthouse a audity webu

Google Lighthouse je open-source automatizovaný nástroj od Googlu určený ke zvyšování kvality webových stránek. Pomáhá vývojářům a majitelům webů identifikovat problémy v oblasti výkonu, přístupnosti nebo SEO.

Základní oblasti auditu

Lighthouse při skenování stránky generuje skóre (0–100) v pěti klíčových kategoriích:

Kategorie	Popis
Performance	Měří rychlost načítání a plynulost interakcí (např. LCP, CLS).
Accessibility	Kontroluje, zda je web použitelný pro lidi se zdravotním postižením (čtečky obrazovky, kontrast).
Best Practices	Prověřuje bezpečnostní standardy (HTTPS) a moderní vývojářské postupy.
SEO	Základní kontrola indexovatelnosti stránky vyhledávači.
PWA	Hodnotí, zda stránka splňuje požadavky na progresivní webovou aplikaci.

Klíčové metriky výkonu (Core Web Vitals)

V rámci auditu výkonu se Lighthouse zaměřuje na metriky, které Google používá jako hodnotící faktory pro řazení ve výsledcích vyhledávání:

LCP (Largest Contentful Paint): Čas, za který se vykreslí největší prvek na stránce (obvykle obrázek nebo nadpis). Ideálně pod 2,5 s.
CLS (Cumulative Layout Shift): Měří stabilitu stránky. Pokud se prvky při načítání „hýbou“, skóre se zhoršuje.
TBT (Total Blocking Time): Čas, po který je stránka zablokována pro interakci s uživatelem kvůli skriptům.

Jak spustit audit?

Existuje několik způsobů, jak nástroj použít:

Chrome DevTools: Stiskněte F12 (nebo Cmd+Option+I), vyberte záložku Lighthouse a klikněte na „Analyze page load“.
PageSpeed Insights: Webová služba od Googlu, která kombinuje data z Lighthouse s reálnými daty od uživatelů (Chrome User Experience Report).
Příkazová řádka (CLI): Ideální pro automatizaci a CI/CD procesy.

npm install -g lighthouse
    lighthouse https://example.com

Proč jsou audity důležité?

„Rychlejší web znamená spokojenější uživatele a vyšší konverzní poměr.“

Pravidelné provádění auditů vám umožní:

1. Zlepšit SEO: Lepší technický stav webu vede k lepším pozicím v Google Search.
2. Snížit míru okamžitého opuštění: Uživatelé nebudou odcházet kvůli pomalému načítání.
3. Zajistit inkluzivitu: Přístupný web osloví širší spektrum publika.

Užitečné tipy pro optimalizaci

Obrázky: Používejte moderní formáty (WebP, AVIF) a techniku lazy loading.
Kód: Minifikujte CSS a JavaScript. Odstraňte nepoužívaný kód.
Server: Využívejte mezipaměť (caching) a rychlé CDN.

Viz také: Dokumentace PageSpeed Insights Tady je deset dalších užitečných odkazů zaměřených na nástroj Google Lighthouse, zformátovaných pro DokuWiki:

Viz také:

  [[https://developers.google.com/static/web/tools/lighthouse/|Oficiální dokumentace Google Lighthouse]]

  [[https://pagespeed.web.dev/|Nástroj PageSpeed Insights (webové rozhraní)]]

  [[https://web.dev/measure/|Web.dev Measure – Analýza a tipy pro zlepšení]]

  [[https://github.com/GoogleChrome/lighthouse|GitHub repozitář Lighthouse (otevřený kód)]]

  [[https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk|Lighthouse v Chrome Web Store (rozšíření prohlížeče)]]
  [[https://www.npmjs.com/package/lighthouse|Lighthouse na NPM (pro vývojáře a CLI)]]
  [[https://web.dev/vitals/|Průvodce Core Web Vitals]]
  [[https://treo.sh/sitespeed|Treo Site Speed – Monitoring Lighthouse v čase]]
  [[https://www.debugbear.com/lighthouse-viewer|Lighthouse Report Viewer (prohlížeč JSON reportů)]]
  [[https://httparchive.org/reports/state-of-the-web|HTTP Archive – Statistiky Lighthouse z celého webu]]