Me­t­ri­ky rych­los­ti webů: Prů­vod­ce s de­tail­ním vy­svět­le­ním

Naposledy upraveno: 16. 4. 2019 – Autor: Martin Michálek

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í.

Video: Metriky rychlosti načítání

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

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

Jak jdou události v čase?

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í
First Input Delay (FID) První nečinnost procesoru
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

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:

  • Hlídejte si hlavně Lighthouse skóre pro oblast Performace, které zobrazuje také PageSpeed Insight. Po nedávné aktualizaci se totiž skládá ze všech významných renderovacích metrik.
  • 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