Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Metriky rychlosti načítání

615 views

Published on

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.

Published in: Technology
  • Be the first to comment

Metriky rychlosti načítání

  1. 1. Metriky rychlosti načítání Martin Michálek Frontendisti Praha, 14. 3. 2018
  2. 2. PageSpeed Insights: Měření oproti checklistu
  3. 3. Lepší je měřit události
  4. 4. DevTools / Network: Události DCL a Load
  5. 5. Tyhle dvě události jsou málo. O UX při vykreslování nic neříkají
  6. 6. TTFB DCL FP TTI LoadFCP
  7. 7. TTFB TTI Load Time To First Byte: — Jak rychlý je server a síť? — Důležité pro Crawl Budget. DCL FP FCP
  8. 8. TTFB TTI Load DOM Content Loaded: — Stažení a rozparsovaní HTML. — Koreluje s „Bounce Rate“. DCL FP FCP
  9. 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. 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. 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. 12. TTFB TTI Load Load: — Všechno je stažené, včetně obrázků. — GA ukazují pro různé kontexty. DCL FP FCP
  13. 13. Jak ale měřit reálné uživatele?
  14. 14. Real User Monitoring
  15. 15. Chrome UX Report
  16. 16. Měření na reálných uživatelích a je vždy lepší než syntetická měření
  17. 17. Není to ale dost čísel?
  18. 18. SpeedIndex
  19. 19. Speed Index je skóre. Čím nižší, tím lepší Lze snadno porovnávat v čase nebo třeba s konkurencí
  20. 20. OK, to by bylo měření. Ale co optimalizace?
  21. 21. Timeline WebpageTest.org
  22. 22. K tomu vždy potřebujete vidět postup vykreslení, stahované soubory a události, které jsem zmiňoval
  23. 23. 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
  24. 24. Díky! @machal vzhurudolu.cz Doražte na školení V knížce jsou základy

×