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.

Hledání příčin pomalého webu a jak to řešit

1,856 views

Published on

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.

Published in: Technology
  • Be the first to comment

Hledání příčin pomalého webu a jak to řešit

  1. 1. HLEDÁNÍ PŘIČIN POMALÉHO WEBU A JAK TO ŘEŠIT Michal Voják @MichalVojak
  2. 2. @MichalVojak HLEDÁNÍ PŘIČIN POMALÉHO WEBU A JAK TO ŘEŠIT Michal Voják
  3. 3. Měříte pravidelně rychlost na vašem webu nebo na webu vašich klientů?
  4. 4. 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
  5. 5. PROČ ŘEŠIT RYCHLOST
  6. 6. 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ě
  7. 7. 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
  8. 8. https://www.section.io/blog/page-load-time-bounce-rate/
  9. 9. https://www.section.io/blog/page-load-time-bounce-rate/
  10. 10. 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.
  11. 11. https://www.vzhurudolu.cz/blog/58-rychlost-srovname-cz PŘÍPADOVÁ STUDIE Z ČR
  12. 12. https://www.vzhurudolu.cz/blog/58-rychlost-srovname-cz PŘÍPADOVÁ STUDIE Z ČR
  13. 13. https://developers.google.com/web/fundamentals/performance/rail UŽIVATELEM VNÍMANÉ NAČÍTÁNÍ
  14. 14. JAK MĚŘIT
  15. 15. 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
  16. 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. 17. Mobil a desktop
  18. 18. 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.
  19. 19. STANOVENÍ CÍLŮ Načtení webu pod 3 vteřiny Velikost pod 500 kb Pod 50 zdrojů HTTP / HTTPS
  20. 20. CO MÁ NA RYCHLOST WEBU VLIV
  21. 21. • 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 • ……
  22. 22. 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
  23. 23. CO MÁ SMYSL ŘEŠIT A JAK TO ZADAT VÝVOJÁŘŮM
  24. 24. Server a backend - doporučení ✓ Architektura aplikace ✓ Nastavte GZIP ✓ Zapněte HTTP/2 ✓ Rychlost serveru ✓ Konektivita a geolokace ✓ Cache webu a DB ✓ Optimalizace DB
  25. 25. Na frontendu - zdroje na stránce
  26. 26. Počet zdrojů na stránce HTTP / HTTPS
  27. 27. <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
  28. 28. <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&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
  29. 29. Critical CSS <style> CSS pro 800px obsahu, kde se návštěvník nachází. </style>
  30. 30. Zdroj: Martin Michálek, Seologer, 26.1.2016 Nejen velikost ale i latence
  31. 31. Počet zdrojů na stránce HTTP/2
  32. 32. 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
  33. 33. Na frontendu - obrázky a video
  34. 34. Lazy-loading pro obrázky
  35. 35. <img data-src=“obrazek.jpg”>
  36. 36. Reálná velikost obrázků
  37. 37. 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í
  38. 38. Na frontendu - fonty
  39. 39. WEBFONTY
  40. 40. Frontend - fonty ✓ Co nejméně webových fotnů ✓ Můžete použít asynchronní načítání fontů ✓ Správně definované fonty
  41. 41. Na frontendu - externí JS
  42. 42. Lazy-loading pro třetí strany
  43. 43. Měřící nástroje, A/B testy a nahrávání
  44. 44. 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
  45. 45. Další způsoby, jak zrychlit weby Instant articles
  46. 46. Checklist www.aw-dev.cz/checklist-rychlost-webu
  47. 47. 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
  48. 48. @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

×