Speed Index, TTFB, FP, FCP, DCL a další podivné zkratky. Které vám ale mohou pomoci s chápáním rychlosti načítání vašeho webu.

1. Metriky
rychlosti
načítání
Martin Michálek
Frontendisti Praha, 14. 3. 2018

2. PageSpeed Insights:
Měření oproti checklistu

3. Lepší je
měřit události

4. DevTools / Network:
Události DCL a Load

5. Tyhle dvě události
jsou málo. O UX
při vykreslování
nic neříkají

6. TTFB DCL FP TTI LoadFCP

7. TTFB TTI Load
Time To First Byte:
— Jak rychlý je server a síť?
— Důležité pro Crawl Budget.
DCL FP FCP

8. TTFB TTI Load
DOM Content Loaded:
— Stažení a rozparsovaní HTML.
— Koreluje s „Bounce Rate“.
DCL FP FCP

9. TTFB TTI Load
First Paint:
— Cokoliv jiného než bílá obrazovka.
— Uživatel: „Děje se něco?“
— Ve WPT je „Start Render“
DCL FP FCP

10. TTFB TTI Load
First Contentful Paint:
— První vykreslení obsahu.
— Uživatel: „Je to užitečné?“
— V Lighthouse je „First Meaningful Paint“
DCL FP FCP

11. TTFB TTI Load
Time To Interactive:
— Stránka je renderovaná a zároveň interaktivní.
— Uživatel: „Je to použitelné?“
— WPT ukazuje „First Interactive“
DCL FP FCP

12. TTFB TTI Load
Load:
— Všechno je stažené, včetně obrázků.
— GA ukazují pro různé kontexty.
DCL FP FCP

13. Jak ale
měřit reálné
uživatele?

14. Real
User
Monitoring

15. Chrome UX Report

17. Měření na reálných
uživatelích a je vždy
lepší než syntetická
měření

18. Není to ale
dost čísel?

19. SpeedIndex

20. Speed Index je skóre.
Čím nižší, tím lepší
Lze snadno porovnávat
v čase nebo třeba
s konkurencí

21. OK, to by bylo měření.
Ale co optimalizace?

22. Timeline WebpageTest.org

23. K tomu vždy potřebujete
vidět postup vykreslení,
stahované soubory
a události, které jsem
zmiňoval

24. 1. Hlídat SpeedIndex/TTFB/load
2. Hlídat konkurenci
3. Větší weby a budoucnost: RUM
metriky a automatizace
4. Nutno optimalizovat? Šup do
timeline
Doporučení na závěr

25. Díky!
@machal
vzhurudolu.cz
Doražte
na školení
V knížce
jsou základy