Jak číst report Lighthouse bez paniky

První pravidlo: vaše skóre není váš web

Když poprvé otevřete report Lighthouse, čeká vás zeď čísel, barevně označených políček a varování o věcech, o kterých jste možná nikdy neslyšeli. Přirozenou reakcí je panika. Skóre je červené. Sedmnáct auditů selhalo. Web je určitě rozbitý?

Pravděpodobně není. Lighthouse je diagnostický nástroj, ne vysvědčení. Skóre je syntetický benchmark spuštěný v laboratorních podmínkách — často na zpomaleném připojení, se simulací telefonu střední třídy z roku 2017. Říká vám, jak si web vede v tomto konkrétním scénáři, ne jak ho v reálném světě zažívají skuteční uživatelé.

To je důležité, protože většina týmů se upne na skóre a přehlédne kontext. Skóre 65 může být v pořádku u složité webové aplikace s daty v reálném čase. Skóre 95 může pořád znamenat špatný zážitek, pokud jsou optimalizované nesprávné věci. Skóre je výchozí bod pro zkoumání, ne metrika úspěchu.

Co číst jako první: Core Web Vitals

Přeskočte celkové výkonnostní skóre. Sjeďte do sekce Metrics a podívejte se na tři čísla: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) a Interaction to Next Paint (INP). To jsou Core Web Vitals a jsou to jediné výkonnostní metriky, které Google používá jako signál pro hodnocení ve vyhledávání.

• LCP měří, jak dlouho trvá vykreslení největšího viditelného prvku. Cíl: pod 2,5 sekundy. Pokud jste nad 4 sekundami, uživatelé čekají příliš dlouho, než uvidí smysluplný obsah.
• CLS měří vizuální stabilitu — tedy jak moc stránka při načítání poskakuje. Cíl: pod 0,1. Pokud jste nad 0,25, uživatelé omylem klikají na nesprávné prvky, protože se tlačítka přesunula.
• INP měří odezvu — jak rychle stránka reaguje na kliknutí, klepnutí a stisky kláves. Cíl: pod 200 ms. Pokud jste nad 500 ms, web působí pomalu.

Tyto tři metriky souvisejí se skutečnou frustrací uživatelů. Opravte je dřív, než se začnete trápit čímkoli dalším.

Opportunities vs. Diagnostics: poznejte rozdíl

Lighthouse dělí svá zjištění do dvou kategorií: Opportunities a Diagnostics. Opportunities jsou seřazené podle odhadované úspory času. Diagnostics poskytují další kontext — věci, které mohou být problémem, ale také nemusí.

Začněte u Opportunities. Pokud Lighthouse říká, že "Eliminate render-blocking resources" může ušetřit 1,2 sekundy, je to konkrétní přínos. Pokud říká, že "Reduce unused JavaScript" může ušetřit 0,1 sekundy, pravděpodobně kvůli tomu nestojí za to dělat refaktoring.

Diagnostics jsou záludnější. "Avoid an excessive DOM size" zní špatně, ale pokud máte CLS v pořádku a INP je rychlé, velký DOM nemusí nikomu škodit. Diagnostics jsou vodítka, ne příkazy. Zkoumejte ty, které odpovídají vašim skutečným metrikám.

Audity, které můžete obvykle ignorovat

Některá varování Lighthouse jsou pozůstatková nebo příliš přísná. Tady jsou ta, která nejčastěji vyvolávají zbytečnou paniku:

• "Does not use passive listeners to improve scrolling performance" — Jde o mikrooptimalizaci, která jen zřídka viditelně pohne výsledkem. Pokud nemáte důkaz o trhaném posouvání, přeskočte ji.
• "Image elements do not have explicit width and height" — Pro CLS je to důležité, ale jen tehdy, když obrázky způsobují posuny rozvržení. Pokud už máte CLS dobré, nerefactorujte jen kvůli auditu.
• "Serve images in next-gen formats" — Ano, WebP a AVIF jsou menší. Pokud jsou ale vaše obrázky už optimalizované a LCP je rychlé, je to příjemné vylepšení, ne krize.
• "Avoid enormous network payloads" — Lighthouse označí cokoli nad 1,6 MB. Stránka o velikosti 2 MB, která se načte rychle, je ale lepší než stránka o velikosti 500 KB, která blokuje vykreslení. Soustřeďte se na to, jak se bajty doručují, ne jen na jejich celkový objem.

Co dělat, když je všechno červené

Pokud je vaše skóre Lighthouse pod 50 a většina auditů selhává, pravděpodobně řešíte jednu ze tří hlavních příčin:

1. Neoptimalizovaná písma. Webová písma jsou na většině webů stále nejjednodušší výkonnostní výhra. Zkontrolujte, jestli nenačítáte šest řezů písma, když používáte jen dva, nebo jestli neposíláte soubory WOFF místo WOFF2.
2. CSS a JavaScript blokující vykreslení. Pokud je váš First Contentful Paint (FCP) nad 3 sekundami, něco brání prohlížeči ve vykreslení. Hledejte velké soubory CSS nebo synchronní skripty v <head>.
3. Příliš velké obrázky. Pokud je prvkem LCP obrázek a má 4 MB, problém je tady. Zkomprimujte ho, načítejte obrázky mimo první obrazovku lazy-loadingem a používejte syntaxi pro responzivní obrázky.

Opravte jednu z těchto věcí a spusťte Lighthouse znovu. Často uvidíte skok o 20–30 bodů. Pak se pusťte do další.

Laboratorní data vs. data z reálného provozu: kontrola reality

Lighthouse běží v laboratoři. Simuluje pomalé připojení a pomalé zařízení, ale nedokáže simulovat skutečné chování uživatelů — jak lidé scrollují, na co klikají nebo jestli jsou na nestabilní Wi‑Fi.

Pro kontrolu reality porovnejte výsledky Lighthouse s daty z reálného provozu z Chrome User Experience Report (CrUX). CrUX ukazuje, jak skuteční uživatelé Chrome zažívali váš web během posledních 28 dnů. Pokud Lighthouse říká, že vaše LCP je 4 sekundy, ale CrUX ukazuje 2 sekundy, věřte CrUX. Pokud jsou špatné obě hodnoty, máte skutečný problém.

Data CrUX najdete v PageSpeed Insights (webové verzi Lighthouse) nebo v Google Search Console v části "Core Web Vitals." Pokud se hodnoty rozcházejí, zjistěte proč. Možná jsou vaši skuteční uživatelé na rychlejších sítích. Možná Lighthouse testuje neoptimalizovaný vývojový build.

Kdy spustit Lighthouse znovu

Lighthouse je šumový. Spusťte ho třikrát za sebou a dostanete tři různá skóre, dokonce i na stejné stránce. Je to tím, že výkon je proměnlivý — výsledek ovlivňují procesy na pozadí, kolísání sítě i heuristiky prohlížeče.

Chcete-li získat stabilní výchozí hodnotu, spusťte Lighthouse v anonymním režimu se všemi rozšířeními vypnutými, nebo použijte CLI s příznakem --preset=desktop pro konzistentnější výsledky. Spusťte ho třikrát a skóre zprůměrujte. Pokud vidíte divoké výkyvy (více než 10 bodů), je špatně ještě něco jiného — možná je pomalý server nebo stránka pokaždé načítá jiné zdroje.

Spusťte Lighthouse znovu po každé významné změně. Nasadili jste novou strategii písem? Zkontrolujte LCP. Přidali jste lazy-loading obrázků? Zkontrolujte CLS. Přidali jste skript třetí strany? Zkontrolujte INP. Výkon není jednorázová oprava; je to rozpočet, který si musíte hlídat.

Nástroje, které vám pomohou jednat podle zjištění Lighthouse

Lighthouse vám řekne, co je pomalé. Ne vždy vám řekne, jak to opravit. K tomu potřebujete další nástroje:

• WebPageTest vám poskytne filmstrip zobrazení toho, jak se stránka načítá, snímek po snímku. Je zásadní pro diagnostiku problémů s LCP a CLS.
• Chrome DevTools Performance panel ukazuje přesně, který JavaScript blokuje hlavní vlákno. Použijte ho k nalezení zdroje špatného skóre INP.
• Image compressor tools umožňují optimalizovat obrázky přímo v prohlížeči, což je rychlejší a soukromější než nahrávání do služby třetí strany. Zpracování obrázků na straně klienta je výhra pro soukromí, protože vaše obrázky nikdy neopustí váš počítač.

Lighthouse je výchozí bod. Tyto nástroje vám pomohou práci dokončit.

Klíčové poznatky

• Vaše skóre Lighthouse je laboratorní benchmark, ne měřítko reálného uživatelského zážitku. Než začnete panikařit, porovnejte ho s daty z reálného provozu z CrUX.
• Nejprve se soustřeďte na Core Web Vitals (LCP, CLS, INP). To jsou metriky, které souvisejí s frustrací uživatelů a dopadem na SEO.
• Upřednostňujte Opportunities podle odhadované úspory času. Ignorujte Diagnostics, které neodpovídají vašim skutečným výkonnostním problémům.
• Některé audity — například passive listeners nebo formáty obrázků nové generace — jsou mikrooptimalizace. Nejdřív opravte velké věci.
• Spusťte Lighthouse třikrát a výsledky zprůměrujte. Výkon je proměnlivý a jeden běh může klamat.

FAQ

Otázka: Proč se moje skóre Lighthouse mění pokaždé, když ho spustím?
Odpověď: Lighthouse měří výkon za proměnlivých podmínek — rychlost sítě, zatížení CPU i heuristiky prohlížeče ovlivňují výsledek. Spusťte ho třikrát v anonymním režimu a skóre zprůměrujte, abyste získali stabilnější výchozí hodnotu.

Otázka: Mám optimalizovat nejdřív pro mobil, nebo desktop?
Odpověď: Pro mobil. Lighthouse ve výchozím nastavení používá mobilní simulaci, protože většina webového provozu je mobilní a mobilní zařízení jsou pomalejší. Pokud je vaše mobilní skóre dobré, desktopové skóre bude obvykle také v pořádku.

Otázka: Moje skóre Lighthouse je 95, ale web pořád působí pomalu. Co je špatně?
Odpověď: Lighthouse měří načtení stránky, ne interaktivitu po načtení. Zkontrolujte skóre INP a použijte Chrome DevTools Performance panel k profilování toho, co se děje, když uživatelé klikají nebo scrollují. Možná máte problém s JavaScript, který Lighthouse nezachytí.

Otázka: Potřebuji dokonalé skóre 100?
Odpověď: Ne. Skóre 90+ je výborné. Honba za 100 často znamená optimalizovat věci, na kterých uživatelům nezáleží. Soustřeďte se na skutečné metriky — LCP, CLS, INP — a skóre ignorujte.

Otázka: Můžu Lighthouse věřit, když používám hodně skriptů třetích stran?
Odpověď: Lighthouse označí skripty třetích stran jako problém, ale nedokáže vždy rozlišit mezi nezbytnými a zbytečnými. Pomocí auditů "Avoid enormous network payloads" a "Reduce JavaScript execution time" najděte nejhorší viníky a pak se rozhodněte, jestli stojí za to je ponechat.

Zdroje

• "Lighthouse performance scoring" — Google Developers
• "Core Web Vitals" — web.dev
• "Chrome User Experience Report" — Google Developers
• "WebPageTest Documentation" — WebPageTest.org