Lighthouse Diff: srovnání dvou testů rychlosti webu
Nasadili jste novou verzi webu a potřebujete vědět, co se změnilo v rychlosti? Lighthouse Diff vám to ukáže přehledně a na jednom místě.
Lighthouse Diff je open-source nástroj od týmu Google Chrome, který vizuálně porovná dva Lighthouse reporty a zvýrazní rozdíly.
Funguje jako „diff pro rychlost" – podobně jako vývojáři porovnávají dvě verze kódu, vy porovnáte dvě verze rychlosti svého webu.
K čemu Lighthouse Diff slouží?
Představte si, že pravidelně monitorujete rychlost webu a jednoho dne si všimnete, že se Lighthouse skóre nebo jiná metrika výrazně změnila.
Co se vlastně stalo? Zhoršila se konkrétní metrika, nebo se změnilo hodnocení více oblastí najednou?
Lighthouse Diff vám odpoví na tyto otázky tím, že vezme dva JSON reporty z nástroje Lighthouse a ukáže vám:
- Změny v celkovém skóre. Vidíte, jak se posunulo celkové hodnocení výkonu stránky.
- Rozdíly v metrikách. Porovnáte konkrétní metriky jako LCP (rychlost načtení), CLS (stabilita layoutu) nebo TBT (blokování prohlížeče) a uvidíte, které se zlepšily a které zhoršily.
- Změny v auditech. Lighthouse provádí desítky kontrol (auditů) – od velikosti obrázků přes správné nastavení cache po efektivitu JavaScriptu. Diff vám ukáže, které konkrétní kontroly prošly nebo naopak selhaly oproti předchozímu měření.
Proč je srovnání testů důležité?
Jednorázový pohled na výsledek Lighthouse testu vám řekne, jak na tom web je teď. Ale pokud chcete pochopit co se změnilo a proč, potřebujete srovnání.
Lighthouse Diff se hodí v těchto situacích:
- Po nasazení nové verze webu. Spustíte test před a po nasazení a Diff vám ukáže dopad změn. Vidíte, zda nový kód nezhoršil rychlost.
- Při hledání příčin zhoršení. Když Hlídač upozorní na zhoršení metriky, Diff vám pomůže identifikovat konkrétní problém – třeba nový skript, který blokuje vykreslování, nebo větší obrázek na stránce.
- Při optimalizaci rychlosti. Chcete ověřit, že vaše úpravy skutečně pomohly? Porovnejte test před optimalizací a po ní.
- Při komunikaci v týmu. Diff poskytuje jasný vizuální důkaz o změnách, se kterým se lépe komunikuje mezi vývojáři, marketéry a vedením.
Jak Lighthouse Diff funguje?
Nástroj pracuje s JSON soubory, které jsou standardním výstupem nástroje Lighthouse. Existují dva způsoby, jak srovnání provést:
Ruční srovnání v online nástroji
- Získejte dva JSON reporty – například z detailu běhu testu ve vašem monitoringu, kde si je můžete stáhnout.
- Otevřete Lighthouse Diff.
- Nahrajte oba soubory – jeden jako „base" (výchozí stav) a druhý jako „compare" (stav k porovnání).
- Nástroj vám okamžitě zobrazí rozdíly.
Srovnání přímo v monitoringu PageSpeed.ONE
Od verze 4.10 je Lighthouse Diff přímo součástí monitoringu PageSpeed.ONE. V Historii měření si otevřete detail libovolného měření a kliknete na odkaz Lighthouse diff – srovnání s předchozím měřením se vám otevře automaticky, bez nutnosti stahovat soubory.
Toto funguje u testů PLUS, kde máme k dispozici kompletní JSON výstupy z každého běhu testu.
Na které metriky se zaměřit?
Při srovnání dvou testů doporučujeme sledovat zejména tyto metriky, které se zobrazují v horní části Diffu:
| Metrika | Co měří | Na co dát pozor |
|---|---|---|
| LCP | Rychlost načtení hlavního obsahu | Změny nad 200 ms |
| TBT | Blokování hlavního vlákna | Změny nad 50 ms |
| CLS | Posuny layoutu při načítání | Změny nad 0,05 |
| FCP | První vykreslení obsahu | Změny nad 100 ms |
Kromě metrik sledujte také sekci s audity. Právě tam najdete konkrétní příčiny změn – třeba nový obrázek bez lazy loadingu, chybějící komprese nebo neoptimalizované webové fonty.
Mějte na paměti, že syntetická měření Lighthouse mají určitou variabilitu. Malé rozdíly (do jednotek procent u skóre) mohou být způsobeny přirozenými výkyvy, nikoliv reálnými změnami na webu. Dávejte si pozor, abyste srovnávali reporty Lighthouse ze stejného prostředí.
Shrnutí
Lighthouse Diff je praktický pomocník pro každého, kdo se stará o rychlost webu. Umožní vám přesně vidět, co se změnilo mezi dvěma testy, aniž byste museli porovnávat desítky hodnot ručně.
V kombinaci s monitoringem rychlosti a Performance Budgets tvoří Lighthouse Diff důležitou součást nástrojové sady pro udržení a zlepšování rychlosti webu. Od verze 4.10 jej máte k dispozici přímo v monitoringu PageSpeed.ONE.