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 sami
můžete udělat?
Martin Michálek
@machal
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ě ...
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ě ...
Martin Michálek: frontend designér, poradce
KPI ♥ Page Speed
Obchodní ukazatele webů kolerují s ukazateli rychlosti.
Proka...
https://wpostats.com/2015/11/04/walmart-revenue.html
Load Time -1s
→ 2 % v konverzích
Load Time -200ms
→ 1 % v příjmech
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 

...
4 %zahodili mobilní telefon, když 

se web načítal pomalu.
Zdroj: Harris Interactive
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ě ...
Google Analytics bohužel ve výchozím nastavení ukazují nedostatečné metriky.
Čas celkovéno načtení a pak metriky týkající ...
Time To First Byte
První vykreslení obsahu
První nečinnost procesoru
První smysluplné vykreslení
Load
https://www.vzhurudo...
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 nastav...
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 j...
Laboratorní data – test vašeho webu strojem.
Nejsou to data od uživatelů, ale zase jdou více do hloubky. A ukazují rendero...
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říležitosti ke zlepšení jsou řazeny velmi dobře.
Stačí se jimi řídit a web v hodnocení poskočí výše.
→ vrdl.in/webp
❌
→ vrdl.in/lazy
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ě ...
Co můžete ovlivnit?
1. Komplexní UI
2. Karusely
3. Video na pozadí
4. Nasazení chatu
5. Nasazení popupu
Příliš komplexní r...
Co můžete ovlivnit?
1. Komplexní UI
2. Karusely
3. Video na pozadí
4. Nasazení chatu
5. Nasazení popupu
Karusel:
SpeedInde...
Co můžete ovlivnit?
1. Komplexní UI
2. Karusely
3. Video na pozadí
4. Nasazení chatu
5. Nasazení popupu
motion.cz
Video na...
Co můžete ovlivnit?
1. Komplexní UI
2. Karusely
3. Video na pozadí
4. Nasazení chatu
5. Nasazení popupu
https://www.vzhuru...
Co můžete ovlivnit?
1. Komplexní UI
2. Karusely
3. Video na pozadí
4. Nasazení chatu
5. Nasazení popupu
Optinmonster
developers.google.com
JavaScript je drahý
170 kB JPEG není totéž jako 170 kB JavaScriptu.
To první se v prohlížeči zpracov...
Martin Michálek
@machal
Shrnutí
1. Měřte, nejlépe často
2. Používejte PageSpeed Insights
3. Sledujte renderovací metriky
4...
Děkuji!
Martin Michálek
@machal
vrdl.cz/kurzy/rychlost-nacitani
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Upcoming SlideShare
Loading in …5
×

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

839 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

×