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.

Blbosti kolem webové rychlosti

420 views

Published on

Lidé se často zaměřují na chybné ukazatele. Na co se dívat a na co naopak ne? Co o reálné rychlosti načítání říkají Google Analytics, co datová velikost stránky a co nástroj Lighthouse?

Published in: Technology
  • Be the first to comment

Blbosti kolem webové rychlosti

  1. 1. Blbosti kolem webové rychlosti Brno, 11. prosince 2018 Martin Michálek @machal
  2. 2. „Mě se to 
 načítá rychle… Máte to pomalý Poradce k rychlosti Klient (a padouch)
  3. 3. vzhurudolu.cz/p/metriky-rychlosti Nejdříve pojďme sjednotit nástroje a metodiku měření. Co je „pomalý“? Jaké metriky používáme?
  4. 4. Zlepšili jsme load time.
  5. 5. Zlepšili jsme load time. Zlepšení celkového času načtení je určitě fajn. Co když ale timeline vypadá jako tady nahoře? Jsou prostě lepší metriky na měření rychlosti webu.
  6. 6. Zamakali jsme na backendu, web teď bude rychlý.
  7. 7. Zamakali jsme na backendu, web teď bude rychlý. Backend… Opět: Je to fajn. Ale jak vidíte ve vodopádu načítání frontendových zdrojů, je to obvykle menší část problému.
  8. 8. Zamakali jsme na backendu, web teď bude rychlý.
  9. 9. Zlepšili jsme rychlost načtení.
  10. 10. ééééééé…
  11. 11. ééééééé… Co je to rychlost načtení?
  12. 12. Uživatelský prožitek z načítání a vykreslování webu. (To na čem záleží.) Metriky popisující prožitek.
  13. 13. Máme pomalý web, protože nám běží na WordPressu.
  14. 14. Máme pomalý web, protože nám běží na WordPressu. vzhurudolu.cz/b/125-wordpress-richman
  15. 15. Máme pomalý web, protože nám běží na WordPressu. vzhurudolu.cz/b/125-wordpress-richman
  16. 16. Máme pomalý web, protože nám běží na WordPressu. vzhurudolu.cz/b/125-wordpress-richman No jasně! To, že za pomalý web může platforma je (ve většině případů) jen mýtus. Naprostá většina problémů vzniká na straně implementátora nebo uživatele platformy.
  17. 17. Google Analytics nám ukazují dobrá čísla, takže rychlost je v pořádku.
  18. 18. Google Analytics nám ukazují dobrá čísla, takže rychlost je v pořádku.
  19. 19. Google Analytics nám ukazují dobrá čísla, takže rychlost je v pořádku. Chápete to správně. Google Analytics ve výchozím nastavení ukazují jen hodnoty pro backend a celkový čas načtení. Je to fajn, ale nic extra o UX to nevypovídá.
  20. 20. Snížili jsme počet requestů, web bude rychlejší.
  21. 21. Snížili jsme počet requestů, web bude rychlejší. vzhurudolu.cz Snížení počtu requestů samo o sobě opět nic nevypovídá. V kódu Vzhůru dolů jsem například dobrovolně počet requestů zvýšil. Víte proč?
  22. 22. Snížili jsme počet requestů, web bude rychlejší. csswizardry.com/2018/11/css-and-network-performance/ A tuhle krásnou věc – rozdělení CSS podle komponent – už dnešní prohlížeče umí. Další důvod počet requestů naopak zvýšit.
  23. 23. Snížili jsme počet requestů, web bude rychlejší. vzhurudolu.cz/prirucka/http-2 HTTP/2 je společný „jmenovatel“ všech změn. Zase tak moc na počtu requestů nezáleží. Zapněte si jej.
  24. 24. Optimalizovali jsme obrázky, čímž se web zrychlil.
  25. 25. Optimalizovali jsme obrázky, čímž se web zrychlil. Optimalizace obrázků je fajn. O tom žádná. Ale <img> je neblokující zdroj. Vykreslování vám nepokazí.
  26. 26. • Lazy loading — ušetří data a prioritizuje CSS zdroje • Datový objem — zrychlí zobrazení (WebP, MozJPEG, Kraken…) Obrázky nejsou blokující zdroj, ale… vzhurudolu.cz/p/metriky-rychlosti
  27. 27. Měli jsme 100/100 ve starých pagespeed insights. Muhehe!
  28. 28. Máme 100/100 v nových pagespeed insights.
  29. 29. Stručný závěr pro začátečníky: Používejte tyhle nástroje a držte se jejich doporučení. A čtěte Vzhůru dolů. 😇
  30. 30. Děkuji! Martin Michálek @machal

×