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?

1. Blbosti kolem
webové rychlosti
Brno, 11. prosince 2018
Martin Michálek
@machal

2. „Mě se to
načítá
rychle…
Máte to
pomalý
Poradce k rychlosti
Klient (a padouch)

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. Zlepšili jsme
load time.

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. Zamakali jsme
na backendu,
web teď bude
rychlý.

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. Zamakali jsme
na backendu,
web teď bude
rychlý.

9. Zlepšili jsme
rychlost načtení.

10. ééééééé…

11. ééééééé…
Co je to
rychlost
načtení?

12. Uživatelský prožitek z načítání
a vykreslování webu.
(To na čem záleží.)
Metriky popisující prožitek.

13. Máme pomalý web,
protože nám běží
na WordPressu.

14. Máme pomalý web,
protože nám běží
na WordPressu.
vzhurudolu.cz/b/125-wordpress-richman

15. Máme pomalý web,
protože nám běží
na WordPressu.
vzhurudolu.cz/b/125-wordpress-richman

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. Google Analytics nám
ukazují dobrá čísla, takže
rychlost je v pořádku.

18. Google Analytics nám
ukazují dobrá čísla, takže
rychlost je v pořádku.

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. Snížili jsme počet
requestů, web bude
rychlejší.

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. 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. 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. Optimalizovali jsme
obrázky, čímž se web
zrychlil.

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. • 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. Měli jsme 100/100
ve starých pagespeed
insights. Muhehe!

28. Máme 100/100
v nových pagespeed
insights.

30. 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ů. 😇

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