Proč vlastně řešit rychlost načtení? Proč v souvislostí s rychlostí nemluvit jen o rychlosti načtení stránky? Jak zjistit nedostatky webu související s rychlostí? A co chtít po kodérech, když je objevíte? http://www.vzhurudolu.cz/prednaska/seologer-178

1. Vše co potřebuje
markeťák vědět
o rychlostní
optimalizaci webů
Martin Michálek
@machal
SEOloger, 26. ledna 2016

2. “You should know
that speed is product
feature number one.
Mezi lídry ve zrychlování webu je samozřejmě Google, ale rychlost
významným způsobem řeší všechny velké webové firmy.

3. 400
800
1200
1600
Průměr Google PlusZdroj
Průměrná velikost
stránky vs. datový
objem Google Plus.
„Průměrná stránka dnes stáhne něco kolem 1,5 MB. Například nový Google Plus si ale
dal limit 60kB pro HTML, 60kB pro CSS a 60kB pro JS pro „úvodní načtení“.

4. 1. Proč?
2. Není to jen „rychlost načtení“
3. Obvyklí podezřelí
4. Nástroje
Vše co potřebuje markeťák vědět
o rychlostní optimalizaci webů

5. 1. Proč?
2. Není to jen „rychlost načtení“
3. Obvyklí podezřelí
4. Nástroje
Vše co potřebuje markeťák vědět
o rychlostní optimalizaci webů

6. • <100ms
okamžitá reakce
• >1s
poznáme prodlevu, ale nepřerušíme úkol
• >10s
ztrácíme pozornost
Člověk
Nielsen (1993) / Miller (1968)

7. Byznys
1 vteřina zpoždění načtení stránky…
… o 11% méně shlédnutí stránky,
… o 16% horší spokojenost zákazníků,
… o 7% nižší konverze.

8. Marketing

9. Mobilní připojení
Připojení Max. rychlost Mbit/s Latence ms
2G/EDGE 0,1 - 0,4 300 - 1000
3G 0,5 - 5 100 - 500
4G/LTE 1 - 50 < 100
Zdroj: Ilya Grigorik – High Performance Browser Networking
Můžete namítat, že mobilní sítě se ohromně zrychlily. Na druhou stranu – LTE nemají
a nebudou mít všichni. Sebelepší mobilní připojení se navíc nikdy nedorovná pevnému.

10. 1. Proč?
2. Není to jen „rychlost načtení“
3. Obvyklí podezřelí
4. Nástroje
Vše co potřebuje markeťák vědět
o rychlostní optimalizaci webů

11. 1.5MB
1.5MB
načtenízobrazení
Obě stránky stahují 1,5 MB. Druhou ale někdo optimalizoval. Zobrazuje se postupně
a uživatel dostane obsah dříve. I když ve finále stáhne stejný objem dat.

12. http://www.vzhurudolu.cz/blog/32-the-need-for-speed
Dobré si uvědomit i pozitivní vliv postupného vykreslování, například pomocí
placeholderů, na vnímání uživatele. Vše je lepší než koukat na bílou stránku.

13. 1. Proč?
2. Není to jen „rychlost načtení“
3. Obvyklí podezřelí
4. Nástroje
Vše co potřebuje markeťák vědět
o rychlostní optimalizaci webů

14. • Mnoho Javascriptů
→ async, zmenšit
• Velké CSS
→ Critical CSS
• Webfonty
→ FOUT/FOIT? + FontFaceObserver
• Velké obrázky
→ srcset/sizes, <picture>

15. 1. Proč?
2. Není to jen „rychlost načtení“
3. Obvyklí podezřelí
4. Nástroje
Vše co potřebuje markeťák vědět
o rychlostní optimalizaci webů

16. Pokud rychlost nijak neřešíte, začnete s auditem na PageSpeed Insight. Dokud nemáte
skóre na 80-90 bodech, nemá smysl řešit další nástroje.

18. WebPageTest umí spočítat SpeedIndex. To je něco jako PageRank pro rychlost. Čím
menší tím lepší. Vynikající hodnoty jsou už kolem 1000.

19. Zajímavé přehledy ale dostanete i z Google Analytics. Jsou to vlastně PageSpeed Insights,
jen pro různé prohlížeče, lokality a stránky.

20. SpeedCurve – jeden z nástrojů co umožňuje sledovat tzv. Performance Budget. Například
hraniční SpeedIndex, přes který se nesmíte dostat. Vytváří se tím přirozený tlak na
přidávání nových komponent do stránky. Výkonnost se dostane do kultury firmy.

21. RAIL
vzor pro výkon od Google
odpověď na akci
uživatele do 100ms
rámečky animace
každých 16ms
vytěž maximum
z doby, kdy nepracuješ
dodej obsah
do 1000 ms
https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail

22. vzhurudolu.cz/kurzy
@machal
www.vzhurudolu.cz
facebook.com/VzhuruDolu
martin@vzhurudolu.cz