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

vzhurudolu.cz/kurzy

@machal www.vzhurudolu.cz

facebook.com/VzhuruDolu martin@vzhurudolu.cz