vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
TRANSCRIPT
Vše co potřebuje markeťák vědět
o rychlostní optimalizaci webů
Martin Michálek @machal
SEOloger, 26. ledna 2016
“ 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.
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í“.
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ů
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ů
• <100msokamžitá reakce
• >1spoznáme prodlevu, ale nepřerušíme úkol
• >10sztrácíme pozornost
Člověk
Nielsen (1993) / Miller (1968)
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.
Marketing
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.
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ů
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.
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.
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ů
• Mnoho Javascriptů→ async, zmenšit
• Velké CSS → Critical CSS
• Webfonty→ FOUT/FOIT? + FontFaceObserver
• Velké obrázky→ srcset/sizes, <picture>
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ů
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.
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.
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.
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.
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
