Co je nového v Lighthouse verze 8

Martin Michálek – 15. 6. 2021

Google před dvěma týdny vydal osmou verzi populárního nástroje pro automatické testování rychlosti, přístupnosti a dalších aspektů webů — Lighthouse. To samozřejmě stojí alespoň za krátký blogpost.

Aktualizace se v této verzi týkají hlavně testování rychlosti webů. Na ty nejdůležitější se teď jdeme podívat.

Změna váh jednotlivých metrik

Nové váhy, kterými se jednotlivé metriky projevují v celkovém Lighthouse Performance Score reflektují aktuální update vyhledávání Googlu zaměřený na Page Experience a zohledňují tří nejdůležitější metriky Core Web Vitals:

Metrika	Váha v6	Váha v8	Rozdíl
First Contentful Paint (FCP)	15 %	10 %	- 5
Speed Index (SI)	15 %	10 %	- 5
Largest Contentful Paint (LCP)	25 %	25 %	0
Time To Interactive (TTI)	15 %	10 %	- 5
Total Blocking Time (TBT)	25 %	30 %	+ 5
Cumulative Layout Shift (CLS)	5 %	15 %	+ 10

Všimněte si, že metrika Kumulativní posun layoutu (CLS) ztrojnásobila svůj vliv. Bodejď by ne, vždyť jde o jednu z Web Vitals.

Metriky Core Web Vitals teď mají 70procentní vliv na celkové skóre.

Ve stejném zdroji hledejme příčinu zvýšení vlivu Total Blocking Time. TBT sice není součástí Core Web Vitals, ale pro syntetická měření „zastupuje“ metriku First Input Delay (FID). Obě měří jinak podobnou věc – javascriptový výkon.

Jaký vliv to bude mít na skóring vašich URL? Podle FAQ od autorů Lighthouse ztratí zhruba pětina stránek o pět a více bodů a téměř třetina naopak o pět a více bodů získá navíc.

Přechod měření na #Lighthouse8 některým webům vylepšil Lighthouse Performance Score (LPS).
Zde např. homepage @tsbohemia.
Podle autorů se skóring významněji zlepší u 30 % URL. https://t.co/XXGXQC7kaB pic.twitter.com/5BnwkqH5LR
— PageSpeed.cz (@pagespeedcz) June 14, 2021

Pokud se chcete více hrabat ve vlivu jednotlivých metrik na celkové skóre, jako ideální nástroj doporučuji kalkulačku Lighthouse skóre (LPS).

Změna hodnotících křivek TBT a FCP

Metriky Total Blocking Time a First Contentful Paint byl zpřísněny. Nikoliv ale změnou hranic optimálních hodnot, ale změnou výpočetní křivky. Jsou to už poměrně detailní informace, které najdete na Github Issues: TBT, FCP.

Aktualizace metriky CLS

Možná víte, že metrika CLS se v poslední době nemálo změnila – počítá se během celé relace prohlížení stránky, dokud se neobjeví pětisekundové okno bez zaznamenaných posunů.

Vliv na syntetické měření to ale mít nemá:

… adjustment will likely not have much effect for the lab measurement, but instead will have a large effect on the field CLS for long-lived pages.

Nízký vliv CLS na dřívější skóring byl způsobený pravděpodobně tím, že šlo o novou metriku, jejíž algoritmus se navíc docela dost měnil. Lidé z Googlu vyloženě píší, že metrika už „dospěla“ a já doufám, že je to pravda a za půl roku se nebudeme muset učit další novou verzi.

Do reportu přidali filtr metrik

Jelikož Lighthouse přidává stále více bodů do sekcí Příležitosti a Diagnostika, hodí se rozdělení do jednotlivých sekcí:

Vy, kteří už jste mě někde slyšeli, možná víte, že k radám Lighthouse se pro pokročilejší optimalizaci rychlosti stavím poměrně skepticky. Nicméně pro základní práci na rychlosti je to výborné a filtr pomůže v přehlednosti.

Lighthouse Treemap

Lighthouse Treemap (Stromová mapa) vezme vaše javascriptové buildy a vizualizuje jejich vnitřní dělení na menší soubory. Stromová mapa je nyní k dispozici ve všech hlavních klientech Lighthouse, například i v PageSpeed Insights.

Podmínkou je, abyste k testovaném URL přiložili také Source Maps (Mapy zdrojů). Pak je to velmi užitečné pro audit stránky. Co tam všechno uvidíte?

Co je obsahem konkrétních souborů.
Jaký je v těchto souborech podíl nevyužitého kódu.
Zda nejsou některé moduly využívány duplicitně.

Přítomnost Treemap v PageSpeed Insights je skvělá zpráva.

Další novinky

Novinek mimo oblast Performance není mnoho, přibyl jen například audit best practice pro Content Security Policies a rozšířili testování přístupnosti. Tohle vydání je prostě hodně o rychlosti, což dává vzhledem ke změnám u Googlu, zohledňujícím Page Experience, velký smysl.

Další novinky najdete přímo v changelogu u vydání Lighthouse verze 8.

Kde je Ligthouse 8 nasazený?

Verze 8 populárního testeru je už nasazená v PageSpeed Insights, včetně API. K dispozici bude v DevTools od Chrome 93, už nyní pomocí osmičky můžete testovat v Chrome Canary.

Na osmou verzi přešla také většina nástrojů, které Lighthouse využívá interně, jako náš tester na PageSpeed.cz: