Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů

2,606 views

Published on

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

Published in: Technology
  • Be the first to comment

Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů

  1. 1. Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů Martin Michálek @machal SEOloger, 26. ledna 2016
  2. 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. 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. 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. 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. 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. 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. 8. Marketing
  9. 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. 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. 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. 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. 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. 14. • Mnoho Javascriptů
 → async, zmenšit
 • Velké CSS 
 → Critical CSS
 • Webfonty
 → FOUT/FOIT? + FontFaceObserver
 • Velké obrázky
 → srcset/sizes, <picture>

  15. 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. 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.
  17. 17. 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.
  18. 18. 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.
  19. 19. 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.
  20. 20. 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
  21. 21. vzhurudolu.cz/kurzy @machal www.vzhurudolu.cz facebook.com/VzhuruDolu martin@vzhurudolu.cz 


×