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?

1. Web rychlý
jako blesk
Martin Michálek
@machal

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. Martin Michálek: frontend designér, poradce
KPI ♥ Page Speed

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. Před
Po
CR na mobilech +25%
https://www.vzhurudolu.cz/blog/58-rychlost-srovname-cz

6. LTE to zcela neřeší. Není
všude a nemá latenci
pevného připojení.https://digi.ctu.cz/lte-pokryti/

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. Martin Michálek: frontend designér, poradce
~2 MB

9. Průměrný
web = Doom
https://www.wired.com/2016/04/average-webpage-now-size-original-doom/

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. Time To First Byte
Time To Interactive
Speed Index
Load
Metriky rychlosti
https://www.vzhurudolu.cz/prirucka/metriky-rychlosti

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. 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. Google PageSpeed Insights
Dva pohledy
Rychlost u uživatelů
Chyby z pohledu rychlosti

15. Doporučení ke zlepšení
Výsledky v rychlosti
Celkové skóre
Google Lighthouse

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. 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. 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. HTML, CSS
AMP
HTML
HTML
Objevení robotem
Optimalizace
Web
Distribuce Platformy

21. AMP Stories

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

23. Martin Michálek: frontend designér, poradce
AMPNon-AMP
+10%
PAGE VIEWS

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

25. Děkuji!
Martin Michálek
@machal