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.

Web rychlý jako blesk (s důrazem na AMP)

140 views

Published on

Projdeme si agrumenty, proč je důležité lpět na rychlosti načítání webu. Ukážeme si několik častých chyb a jak je možné webařské týmy kontrolovat. No a samozřejmě – jakou roli v tom celém hraje nová technologie AMP od Google. Máte ji nasadit?

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web rychlý jako blesk (s důrazem na AMP)

  1. 1. Web rychlý jako blesk Martin Michálek @machal
  2. 2. 1. Argumenty pro rychlost 2. Jsou weby rychlé? 3. Metriky pro rychlost 4. Nástroje 5. Chyby a doporučení 6. AMP HTML Martin Michálek @machal vzhurudolu.cz Web rychlý jako blesk
  3. 3. Martin Michálek: frontend designér, poradce KPI ♥ Page Speed
  4. 4. https://wpostats.com/2015/11/04/walmart-revenue.html Load Time -1s → 2 % v konverzích Load Time -200ms → 1 % v příjmech
  5. 5. Před Po CR na mobilech +25% https://www.vzhurudolu.cz/blog/58-rychlost-srovname-cz
  6. 6. LTE to zcela neřeší. Není všude a nemá latenci pevného připojení.https://digi.ctu.cz/lte-pokryti/
  7. 7. 1. Argumenty pro rychlost 2. Jsou weby rychlé? 3. Metriky pro rychlost 4. Nástroje 5. Chyby a doporučení 6. AMP HTML Martin Michálek @machal vzhurudolu.cz Web rychlý jako blesk
  8. 8. Martin Michálek: frontend designér, poradce ~2 MB
  9. 9. Průměrný web = Doom https://www.wired.com/2016/04/average-webpage-now-size-original-doom/
  10. 10. 1. Argumenty pro rychlost 2. Jsou weby rychlé? 3. Metriky pro rychlost 4. Nástroje 5. Chyby a doporučení 6. AMP HTML Martin Michálek @machal vzhurudolu.cz Web rychlý jako blesk
  11. 11. Time To First Byte Time To Interactive Speed Index Load Metriky rychlosti https://www.vzhurudolu.cz/prirucka/metriky-rychlosti
  12. 12. SpeedIndex Průměrný web 20–40 s Cuketka (článek) 13 s Lékarna.cz (produkt) 7 s Vzhůru dolů (článek) 4,5 s Optimum (by Google Lighthouse) < 2 s SpeedIndex from WebpageTest.org on 3G Slow SpeedIndex
  13. 13. 1. Argumenty pro rychlost 2. Jsou weby rychlé? 3. Metriky pro rychlost 4. Nástroje 5. Chyby a doporučení 6. AMP HTML Martin Michálek @machal vzhurudolu.cz Web rychlý jako blesk
  14. 14. Google PageSpeed Insights Dva pohledy Rychlost u uživatelů Chyby z pohledu rychlosti
  15. 15. Doporučení ke zlepšení Výsledky v rychlosti Celkové skóre Google Lighthouse
  16. 16. 1. Argumenty pro rychlost 2. Jsou weby rychlé? 3. Metriky pro rychlost 4. Nástroje 5. Chyby a doporučení 6. AMP HTML Martin Michálek @machal vzhurudolu.cz Web rychlý jako blesk
  17. 17. 1. Audit (Lighthouse, PageSpeed Insights) 2. Limity (o 20 % lepší než konkurence) 3. Průběžné měření (např. SpeedCurve) 4. Pozor na komponenty třetích stran (A/B testy, chat,…) 5. Nejčastější problém? Blokující Javascript 6. Nejrychlejší optimalizace? font-display: fallback 7. Obsahový web? Zvažte AMP Doporučení https://www.vzhurudolu.cz/prirucka/rychlost-designeri
  18. 18. 1. Argumenty pro rychlost 2. Jsou weby rychlé? 3. Měření rychlosti 4. Nástroje 5. Chyby a doporučení 6. AMP HTML Martin Michálek @machal vzhurudolu.cz Web rychlý jako blesk
  19. 19. HTML, CSS AMP
 HTML HTML Objevení robotem Optimalizace Web Distribuce Platformy
  20. 20. AMP Stories
  21. 21. Běžný web AMP na CDN AMP preload Cuketka (článek) 13 s 12 s 0,16 s Lékarna.cz (produkt) 7 s 8,4 s 0,21 s Vzhůru dolů (článek) 4,4 s 8,2 s 0,24 s Optimum (by Google Lighthouse) > 2 s SpeedIndex from WebpageTest.org on 3G Slow Speed Index s AMP
  22. 22. Martin Michálek: frontend designér, poradce AMPNon-AMP +10% PAGE VIEWS
  23. 23. 1. Udělejte audit 2. Nastavte limity 3. Průběžně kontrolujte 4. Zvažte AMP HTML a AMP Stories Web rychlý jako blesk: Shrnutí
  24. 24. Děkuji! Martin Michálek @machal

×