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.

Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?

676 views

Published on

Přednáška z Czech Online Summit 2019. Praktická rychlost webu pro eshopaře, marketéry a UXáky. Jak ji měřit a jak raději ne. Co můžete vylepšit sami a jak? Jak zaúkolovat vývojáře a ohlídat alespoň základní věci bez znalostí technických detailů?

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?

  1. 1. Rychlost webu: 
 Co pro ni sami můžete udělat? Martin Michálek @machal
  2. 2. Rychlost webu: 
 Co pro ni sami můžete udělat? 1. Proč rychlost? 2. Metriky a nástroje 3. Technické příležitosti 4. Ještě před vývojáři Martin Michálek @machal
  3. 3. Rychlost webu: 
 Co pro ni sami můžete udělat? 1. Proč rychlost? 2. Metriky a nástroje 3. Technické příležitosti 4. Ještě před vývojáři Martin Michálek @machal
  4. 4. Martin Michálek: frontend designér, poradce KPI ♥ Page Speed Obchodní ukazatele webů kolerují s ukazateli rychlosti. Prokazují to výzkumy velkých firem.
  5. 5. https://wpostats.com/2015/11/04/walmart-revenue.html Load Time -1s → 2 % v konverzích Load Time -200ms → 1 % v příjmech
  6. 6. AMP weby dostávají přednost na některých místech
 výsledků vyhledávání Google Search používá rychlost 
 webu jako jeden 
 z řadících signálů
  7. 7. 4 %zahodili mobilní telefon, když 
 se web načítal pomalu. Zdroj: Harris Interactive
  8. 8. Rychlost webu: 
 Co pro ni sami můžete udělat? 1. Proč rychlost? 2. Metriky a nástroje 3. Technické příležitosti 4. Ještě před vývojáři Martin Michálek @machal
  9. 9. Google Analytics bohužel ve výchozím nastavení ukazují nedostatečné metriky. Čas celkovéno načtení a pak metriky týkající se serveru a sítě. Co se ale děje mezi těmito dvěma extrémy?
  10. 10. Time To First Byte První vykreslení obsahu První nečinnost procesoru První smysluplné vykreslení Load https://www.vzhurudolu.cz/prirucka/metriky-rychlosti Index rychlosti Doba do interaktivity
  11. 11. Pamatovat si všechny metriky nemusíte. Je tu sdružující skóre – to z nástroje PageSpeed Insights. To je velmi dobře nastavené a je možné se jím řídit.
  12. 12. Podívejme se na výsledky nástroje PageSpeed Insights. Data pole – čísla o rychlosti u reálných uživatelů vašeho webu. To je velmi důležité sledovat.
  13. 13. Laboratorní data – test vašeho webu strojem. Nejsou to data od uživatelů, ale zase jdou více do hloubky. A ukazují renderovací metriky, které už známe.
  14. 14. Rychlost webu: 
 Co pro ni sami můžete udělat? 1. Proč rychlost? 2. Metriky a nástroje 3. Technické příležitosti 4. Ještě před vývojáři Martin Michálek @machal
  15. 15. Příležitosti ke zlepšení jsou řazeny velmi dobře. Stačí se jimi řídit a web v hodnocení poskočí výše.
  16. 16. → vrdl.in/webp
  17. 17.
  18. 18. → vrdl.in/lazy
  19. 19. Rychlost webu: 
 Co pro ni sami můžete udělat? 1. Proč rychlost? 2. Metriky a nástroje 3. Technické příležitosti 4. Ještě před vývojáři Martin Michálek @machal
  20. 20. Co můžete ovlivnit? 1. Komplexní UI 2. Karusely 3. Video na pozadí 4. Nasazení chatu 5. Nasazení popupu Příliš komplexní rozhraní = složitější zpracování kódu, více JavaScriptu = pomalejší web.
  21. 21. Co můžete ovlivnit? 1. Komplexní UI 2. Karusely 3. Video na pozadí 4. Nasazení chatu 5. Nasazení popupu Karusel: SpeedIndex po náhradě statický obrázek: bellarose.cz
  22. 22. Co můžete ovlivnit? 1. Komplexní UI 2. Karusely 3. Video na pozadí 4. Nasazení chatu 5. Nasazení popupu motion.cz Video na pozadí? OK, ale ne na pomalých zařízeních. Na motion.cz to mají dobře.
  23. 23. Co můžete ovlivnit? 1. Komplexní UI 2. Karusely 3. Video na pozadí 4. Nasazení chatu 5. Nasazení popupu https://www.vzhurudolu.cz/blog/123-freshchat
  24. 24. Co můžete ovlivnit? 1. Komplexní UI 2. Karusely 3. Video na pozadí 4. Nasazení chatu 5. Nasazení popupu Optinmonster
  25. 25. developers.google.com JavaScript je drahý 170 kB JPEG není totéž jako 170 kB JavaScriptu. To první se v prohlížeči zpracovává milisekundy, druhé klidně v řádu sekund.
  26. 26. Martin Michálek @machal Shrnutí 1. Měřte, nejlépe často 2. Používejte PageSpeed Insights 3. Sledujte renderovací metriky 4. Přizvěte vývojáře do rozhodování
  27. 27. Děkuji! Martin Michálek @machal vrdl.cz/kurzy/rychlost-nacitani

×