Martin Michálek Martin Michálek  – 16. 4. 2019

V metrikách a událostech, které se týkají načítání a vykreslování stránky je děsný nepořádek. Pokusím se trochu uklidit.

Bude to užitečné hlavně pro ty z vás, kteří obor rychlosti načítání trochu více sledujete. Ostatní pošlu na konec článku do závěrečných doporučení.

A teď už vzhůru na ty metriky. Tenhle text slouží totiž především jako rozcestník.

Metriky Web Vitals

Web Vitals je označení pro metriky, které v roce 2020 vyhlásil Google. Jejich základní sadou jsou „Core Web Vitals“.

Podle Google by se měřením a optimalizací pro tyto ukazatele měl zabývat úplně každý, kdo se kolem webdesignu motá.

Jde o následující tři metriky.

Metrika Kdy vzniká?
Largest Contentful Paint (LCP) Největší vykreslení obsahu
First Input Delay (FID) První nečinnost procesoru
Cumulative Layout Shift (CLS) Kumulativní posun layoutu

Detailně: Web Vitals

Další metriky

Většina rychlostních metrik jsou prostě události, které po splnění určitých podmínek vznikají na časové ose postupu vykreslování stránky.

Metrika Kdy vzniká?
Time To First Byte (TTFB) Rychlost serveru
DOM Content Loaded (DCL) Rozparsování HTML prohlížečem
First Paint (FP) První vykreslení
First Contentful Paint (FCP) První vykreslení obsahu
First Meaningful Paint (FMP) První smysluplné vykreslení
Time to Interactive (TTI) První možnost interaktivity
Speed Index Vykreslení celého viewportu
Load Stažení všeho
Lighthouse Performance Score Všechny renderovací metriky

Metriky se dají získat různými způsoby a na to se teď zaměříme.

Dva způsoby získávání metrik

Ukazatele je možné získat strojem nebo spočítat z návštěv skutečných lidí.

Video: Metriky rychlosti načítání

O tématu jsem v březnu 2018 přednášel také na minikonferenci Frontendisti.cz

Syntetická měření

Na web pošlete robota, který simuluje reálného uživatele, jeho konkrétní prohlížeč, rozlišení, rychlost internetu a tak dále. Tohle je nyní převládající technika. Pracují tak všechny nástroje, o kterých jsem psal: Lighthouse, PageSpeed Insights, WebpageTest.org a další.

Měřením reálných uživatelů (RUM = Real User Monitoring)

Daleko lepší metodika. Do stránky si obvykle vložíte skript, který měří vaše reálné uživatele. Rozumné analytické nástroje to už dnes umí, jen jsou nastavené spíše na velké weby a firmy. Prostě na ně potřebujete peněz jako želez.

U většiny webů vám RUM metriky dnes ale zobrazí i PageSpeed Insights a to z veřejné databáze Chrome UX Report (CrUX). Dále umí schraňovat data od uživatelů i SpeedCurve, ale to je drahé.

Metriky zatím většinou vznikají syntetickým měřením. RUM nástroje jsou drahé. Kromě CrUX, kam je možné dostat se bezplatně.

Doporučení

Ano, já vím, je to trochu složité. Není ale asi potřeba, abyste si pamatovali metriky všechny a lpěli na nich. Zkusím vám na závěr doporučit jednoduchou strategii:

  • Zaměřte se zejména na metriky obsažené ve Web Vitals: LCP, FID a CLS.
  • Dále si hlídejte Lighthouse skóre pro oblast Performace, které zobrazuje také PageSpeed Insights.
  • V dlouhodobém horizontu usilujte o zlepšení v metrikách od reálných uživatelů. Nejlépe je získáte od Chrome UX Reportu, odkud je umí vytáhnout PageSpeed Insights.
  • Provnávejte výsledky vašich nejdůležitějších stránek s konkurencí. Viz můj článek o rychlosti pro designéry a marketéry.
  • Pokud potřebujete optimalizovat, dívejte se do časové osy vykreslování v prohlížeči. Buď v Chrome DevTools nebo WebpageTest.org. Viz můj článek o nástrojích.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?