Rychlost webu je jeden z faktorů, který rozhoduje o tom, jak se bude uživatel při jeho procházení cítit. Kde všude hledat příčiny pomalosti, jak rychlost testovat a jak to rešit s vývojáři.

2. HLEDÁNÍ PŘIČIN POMALÉHO
WEBU A JAK TO ŘEŠIT
Michal Voják
@MichalVojak

3. @MichalVojak
HLEDÁNÍ PŘIČIN POMALÉHO
WEBU A JAK TO ŘEŠIT
Michal Voják

4. Měříte pravidelně rychlost na vašem
webu nebo na webu vašich klientů?

5. Proč řešit rychlost
Jak měřit
Co má na rychlost webu vliv
Co má smysl řešit a jak to řešit s vývojáři
OBSAH

6. PROČ ŘEŠIT RYCHLOST

7. Desktop a mobilní verze
8,66 s.
‘
https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/
Hodnotící faktor pro Google
Důležité v rámci crawl bugetu (pro obrovské weby)
UX - Velký vliv na návštěvníky webu
AdWords kampaně

8. Pod 100ms Okamžitá reakce
Více jak 1 sekundu Uživatel pozná prodlevu, ale neruší ho to
Více jak 10 vteřin Uživatel ztrácí pozornost
https://www.nngroup.com/articles/response-times-3-important-limits/
Důležité časy

9. https://www.section.io/blog/page-load-time-bounce-rate/

10. https://www.section.io/blog/page-load-time-bounce-rate/

11. 1 veteřina zpoždění …
Amazon’s calculated that a page load slowdown of just one
second could cost it $1.6 billion in sales each year.
Google has calculated that by slowing its search results by
just four tenths of a second they could lose 8 million
searches per day–meaning they’d serve up many millions
fewer online adverts.

12. https://www.vzhurudolu.cz/blog/58-rychlost-srovname-cz
PŘÍPADOVÁ STUDIE Z ČR

13. https://www.vzhurudolu.cz/blog/58-rychlost-srovname-cz
PŘÍPADOVÁ STUDIE Z ČR

14. https://developers.google.com/web/fundamentals/performance/rail
UŽIVATELEM VNÍMANÉ NAČÍTÁNÍ

15. JAK MĚŘIT

16. Nástroje pro měření
Google Chrome Dev Tools / Lighthouse
webpagetest.org
developers.google.com/speed/pagespeed/insights
testmysite.withgoogle.com/intl/en-gb
analytics.google.com
tools.pingdom.com
loadimpact.com
gtmetrix.com

17. Nástroje pro měření
Google Chrome Dev Tools / Lighthouse
webpagetest.org
developers.google.com/speed/pagespeed/insights
testmysite.withgoogle.com/intl/en-gb
analytics.google.com
tools.pingdom.com
loadimpact.com
gtmetrix.com

19. Mobil a desktop

20. Rychlost webu je potřeba řešit už od
začátku projektu.
Pokud se to dělá nakonec, tak to stojí
více peněz.

21. STANOVENÍ CÍLŮ
Načtení webu
pod 3 vteřiny
Velikost
pod 500 kb
Pod 50 zdrojů
HTTP / HTTPS

22. CO MÁ NA RYCHLOST WEBU VLIV

24. • Serverová část
• Rychlost serveru (CPU, RAM, SSD/HDD atd..)
• Konektivita serveru
• Geolokace serveru
• Vytíženost
• Webový server
• IIS, Apache, Nginx
• GZIP
• HTTP/2
Serverová a backendová část
• Databáze
• Typ databáze
• Cache na DB
• Ukládání na disk / v paměti
• Aplikace
• Cache obsahu
• Počet dotazů do DB
• Architektura aplikace
• ……

25. Zdoje na stránce
• Velké množství JS
• Velké množství CSS
• Mnoho obrázků
• Externí JS
• JS pro měřící a A/B testy
• Web fonty
Frontendová část
Velikost stránky
• Velké CSS
• Velké JS
• Neoptimalizované obrázky
• Web fonty
Obrázky
• Velikost
• Komprese
• Načítají se dříve než by měly

26. CO MÁ SMYSL ŘEŠIT A JAK
TO ZADAT VÝVOJÁŘŮM

27. Server a backend - doporučení
✓ Architektura aplikace
✓ Nastavte GZIP
✓ Zapněte HTTP/2
✓ Rychlost serveru
✓ Konektivita a geolokace
✓ Cache webu a DB
✓ Optimalizace DB

28. Na frontendu - zdroje na stránce

29. Počet zdrojů na stránce
HTTP / HTTPS

30. <script type='text/javascript' src='/wp-content/plugins/bbpress-pencil-unread/_inc/js/bbppu.js?ver=1.3.0'></script>
<script type='text/javascript' src='/wp-content/plugins/ultimate-slack-notifications/public/js/ppwpslack-public.js?ver=1.0.0'></script>
<script type='text/javascript' src='/wp-content/themes/ipt_kb/lib/bootstrap/js/bootstrap.min.js?ver=1.7.0'></script>
<script type='text/javascript' src='/wp-content/themes/ipt_kb/lib/bootstrap/js/jquery.ipt-kb-bootstrap.js?ver=1.7.0'></script>
<script type='text/javascript' src='/wp-content/themes/ipt_kb/lib/sticky-kit/jquery.sticky-kit.min.js?ver=1.7.0'></script>
<script type='text/javascript' src=‘/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js?ver=7.0.6'></script>
<script type='text/javascript' src='/wp-content/plugins/bbpress-canned-replies/js/canned-replies.js?ver=1397253104'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src=‘/wp-includes/js/main.min.js’ async></script>
Počet a velikost JS

31. <link rel='stylesheet' href='/wp-content/plugins/facebook-like-box-responsive/facebook-like-responsive.css?ver=4.9.6' type='text/css' media='all' />
<link rel=‘stylesheet' href='/wp-content/plugins/svg-support/css/svgs-attachment.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' ref='/wp-content/plugins/bbpress-canned-replies/css/front-end.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' href='/wp-content/plugins/bbpress-private-replies/css/frond-end.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ver=4.3.0' type='text/css' media='all' />
<link rel=‘stylesheet' href='/wp-content/plugins/bbpress-pencil-unread/_inc/css/bbppu.css?ver=1.3.0' type='text/css' media='all' />
<link rel='stylesheet' href=‘/wp-content/themes/ipt_kb/css/bbpress.css?ver=2.5.14-6684' type='text/css' media='screen' />
<link rel='stylesheet' href='/wp-content/plugins/smart-bbpress-nverify/css/render.min.css?ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' href='/wp-content/plugins/everlightbox/public/css/everlightbox.css?ver=1.0.25' type='text/css' media='all' />
<link rel=‘stylesheet' href='/wp-content/plugins/ipt-bbpress-support/static/css/core.css?ver=0.1.1' type='text/css' media='all' />
<link rel=‘stylesheet' href='/wp-content/plugins/ultimate-slack-notifications/public/css/ppwpslack-public.css?ver=1.0.0' type='text/css' media='all' />
<link rel='stylesheet' href='/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Oswald%7CRoboto%3A400%2C400italic%2C700%2C700italic&#038;ver=1.7.0' type='text/css' media='all' />
<link rel='stylesheet' href='/wp-content/themes/ipt_kb/style.css?ver=1.7.0' type='text/css' media='all' />
<link rel='stylesheet' href='/wp-content/themes/ipt_kb/lib/bootstrap/css/bootstrap.min.css?ver=1.7.0' type='text/css' media='all' />
<link rel=‘stylesheet' href='/wp-content/themes/ipt_kb/lib/bootstrap/css/bootstrap-theme.min.css?ver=1.7.0' type='text/css' media='all' />
<link rel=‘stylesheet' href='/wp-content/themes/ipt_kb/lib/icomoon/icomoon.css?ver=1.7.0' type='text/css' media='all' />
<link rel='stylesheet' href='/wp-content/plugins/buddy-bbpress-support-topic/css/bpbbpst-bbpress-widget.css?ver=2.1.4' type='text/css' media='all' />
<link rel='stylesheet' href='/wp-content/plugins/jetpack/modules/widgets/social-icons/social-icons.css?ver=20170506' type='text/css' media='all' />
<link rel='stylesheet' href='/wp-content/plugins/easy-bootstrap-shortcodes/styles/ebs_dynamic_css.php?ver=4.9.6' type='text/css' media='all' />
<link rel=‘stylesheet' href=‘/wp-content/plugins/jetpack/css/jetpack.css?ver=6.1.1' type='text/css' media='all' />
<link rel=‘stylesheet' href=‘/wp-content/all.min.css’ type='text/css' media='all' />
Počet a velikost CSS

32. Critical CSS
<style>
CSS pro 800px obsahu,
kde se návštěvník nachází.
</style>

33. Zdroj: Martin Michálek, Seologer, 26.1.2016
Nejen velikost ale i latence

34. Počet zdrojů na stránce
HTTP/2

35. Frontend - zdroje
✓ CSS do jednoho souboru HTTP/HTTPS
✓ JS do jednoho souboru HTTP/HTTPS
✓ Nepoužívat velké knihovny, kde používáte 5 %
✓ Nenačítat to co nemusíte v hlavičce (critical css)
✓ JS defer / async
✓ Odebrat zdroje co nepotřebujete

36. Na frontendu - obrázky a video

37. Lazy-loading pro obrázky

38. <img data-src=“obrazek.jpg”>

40. Reálná velikost obrázků

41. Frontend - obrázky a videa
✓ Formát webp
✓ Responsivní obrázky
✓ Když to jde použít SVG
✓ Zmenšit velikost obrázků
✓ Načítat jen to, co je potřeba
✓ U videa myslete na různé zařízení

42. Na frontendu - fonty

43. WEBFONTY

44. Frontend - fonty
✓ Co nejméně webových fotnů
✓ Můžete použít asynchronní načítání fontů
✓ Správně definované fonty

45. Na frontendu - externí JS

46. Lazy-loading pro třetí strany

47. Měřící nástroje, A/B testy a nahrávání

48. Frontend - externí JS
✓ Youtube, Facebook dělejte přes lazy-loading
✓ Některé JS se dají načítat asynchronně
✓ Když neměříte, nemějte JS kód na stránce

49. Další způsoby, jak zrychlit weby
Instant articles

50. Checklist
www.aw-dev.cz/checklist-rychlost-webu

51. CO SI Z TOHO ODNÉST
Na rychlosti záleží
Měřte rychlost vašich webů
Nad rychlostí webu přemýšlejte už v návrhu
Optimalizace není jen o frontendu

52. @MichalVojak
facebook.com
/awdevcz
www.aw-dev.cz twitter.com/
awdevcz
Linkedin.com
/company/awdevcz
| Děláme internet lepší
Pojďme udělat váš web rychlejší
www.aw-dev.cz/checklist-rychlost-webu