SlideShare a Scribd company logo

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

Desingdev
Desingdev

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.

1 of 52
Download to read offline
Hledání příčin pomalého webu a jak to řešit
HLEDÁNÍ PŘIČIN POMALÉHO
WEBU A JAK TO ŘEŠIT
Michal Voják
@MichalVojak
@MichalVojak
HLEDÁNÍ PŘIČIN POMALÉHO
WEBU A JAK TO ŘEŠIT
Michal Voják
Měříte pravidelně rychlost na vašem
webu nebo na webu vašich klientů?
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
PROČ ŘEŠIT RYCHLOST

Recommended

Semantický web (Martin Šimko)
Semantický web (Martin Šimko)Semantický web (Martin Šimko)
Semantický web (Martin Šimko)Taste Medio
 
Sémantický web - má nás to vůbec zajímat?
Sémantický web - má nás to vůbec zajímat?Sémantický web - má nás to vůbec zajímat?
Sémantický web - má nás to vůbec zajímat?Martin Šimko
 
Nejčastejší problémy WordPress webů
Nejčastejší problémy WordPress webůNejčastejší problémy WordPress webů
Nejčastejší problémy WordPress webůVladimír Smitka
 
Pavel ungr designed_for_seo
Pavel ungr designed_for_seoPavel ungr designed_for_seo
Pavel ungr designed_for_seoH1.cz
 
WordCamp Praha 2016 - Bezpečnost WordPress
WordCamp Praha 2016 - Bezpečnost WordPressWordCamp Praha 2016 - Bezpečnost WordPress
WordCamp Praha 2016 - Bezpečnost WordPressVladimír Smitka
 
WordPress - základy bezpečnosti
WordPress - základy bezpečnostiWordPress - základy bezpečnosti
WordPress - základy bezpečnostiVladimír Smitka
 
WordPress: Základy - bezpečnost 3x3
WordPress: Základy - bezpečnost 3x3WordPress: Základy - bezpečnost 3x3
WordPress: Základy - bezpečnost 3x3Vladimír Smitka
 

More Related Content

What's hot

Bezpečnost WordPress pro začátečníky
Bezpečnost WordPress pro začátečníkyBezpečnost WordPress pro začátečníky
Bezpečnost WordPress pro začátečníkyVladimír Smitka
 
Základní pluginy pro WordPress 25-6-2016
Základní pluginy pro WordPress 25-6-2016Základní pluginy pro WordPress 25-6-2016
Základní pluginy pro WordPress 25-6-2016Radek Kucera
 
Základní pluginy pro WordPress
Základní pluginy pro WordPressZákladní pluginy pro WordPress
Základní pluginy pro WordPressRadek Kucera
 
Jak si (ne)nechat hacknout Wordpress stránky
Jak si (ne)nechat hacknout Wordpress stránkyJak si (ne)nechat hacknout Wordpress stránky
Jak si (ne)nechat hacknout Wordpress stránkyVladimír Smitka
 
Broken linkbuilding od B do G - SEO Restart
Broken linkbuilding od B do G - SEO RestartBroken linkbuilding od B do G - SEO Restart
Broken linkbuilding od B do G - SEO RestartFilip Podstavec
 
Seologer naživo - Analýza logů
Seologer naživo - Analýza logůSeologer naživo - Analýza logů
Seologer naživo - Analýza logůFilip Podstavec
 
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a  rychlost načítání (WordCamp Praha 2017)WordPress šablony a  rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
 
WordCamp Brno 2017 - rychlý a bezpečný web
WordCamp Brno 2017  - rychlý a bezpečný webWordCamp Brno 2017  - rychlý a bezpečný web
WordCamp Brno 2017 - rychlý a bezpečný webVladimír Smitka
 
Bezpečnost WP, tipy pro každého - wordCamp Praha 2015
Bezpečnost WP, tipy pro každého - wordCamp Praha 2015Bezpečnost WP, tipy pro každého - wordCamp Praha 2015
Bezpečnost WP, tipy pro každého - wordCamp Praha 2015Vladimír Smitka
 
Bezpečnost Wordpressu - 4. WP konference
Bezpečnost Wordpressu - 4. WP konferenceBezpečnost Wordpressu - 4. WP konference
Bezpečnost Wordpressu - 4. WP konferenceVladimír Smitka
 

What's hot (13)

Bezpečnost WordPress pro začátečníky
Bezpečnost WordPress pro začátečníkyBezpečnost WordPress pro začátečníky
Bezpečnost WordPress pro začátečníky
 
Základní pluginy pro WordPress 25-6-2016
Základní pluginy pro WordPress 25-6-2016Základní pluginy pro WordPress 25-6-2016
Základní pluginy pro WordPress 25-6-2016
 
Základní pluginy pro WordPress
Základní pluginy pro WordPressZákladní pluginy pro WordPress
Základní pluginy pro WordPress
 
Jak si (ne)nechat hacknout Wordpress stránky
Jak si (ne)nechat hacknout Wordpress stránkyJak si (ne)nechat hacknout Wordpress stránky
Jak si (ne)nechat hacknout Wordpress stránky
 
Broken linkbuilding od B do G - SEO Restart
Broken linkbuilding od B do G - SEO RestartBroken linkbuilding od B do G - SEO Restart
Broken linkbuilding od B do G - SEO Restart
 
Wordfence 2016
Wordfence 2016Wordfence 2016
Wordfence 2016
 
Seologer naživo - Analýza logů
Seologer naživo - Analýza logůSeologer naživo - Analýza logů
Seologer naživo - Analýza logů
 
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a  rychlost načítání (WordCamp Praha 2017)WordPress šablony a  rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
 
WordCamp Brno 2017 - rychlý a bezpečný web
WordCamp Brno 2017  - rychlý a bezpečný webWordCamp Brno 2017  - rychlý a bezpečný web
WordCamp Brno 2017 - rychlý a bezpečný web
 
Bezpečnost WP, tipy pro každého - wordCamp Praha 2015
Bezpečnost WP, tipy pro každého - wordCamp Praha 2015Bezpečnost WP, tipy pro každého - wordCamp Praha 2015
Bezpečnost WP, tipy pro každého - wordCamp Praha 2015
 
Bezpečnost Wordpressu - 4. WP konference
Bezpečnost Wordpressu - 4. WP konferenceBezpečnost Wordpressu - 4. WP konference
Bezpečnost Wordpressu - 4. WP konference
 
Výkon WordPress
Výkon WordPressVýkon WordPress
Výkon WordPress
 
Editace šablony & child theme
Editace šablony & child themeEditace šablony & child theme
Editace šablony & child theme
 

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

Webový front-end ve službách mobilního vývojáře
Webový front-end  ve službách mobilního  vývojáře Webový front-end  ve službách mobilního  vývojáře
Webový front-end ve službách mobilního vývojáře Martin Michálek
 
Vytvořeno pro SEO (Designed for SEO)
Vytvořeno pro SEO (Designed for SEO)Vytvořeno pro SEO (Designed for SEO)
Vytvořeno pro SEO (Designed for SEO)Pavel Ungr
 
Nové »bezhlavé« CMS — přechod od monolitů ke službám
Nové »bezhlavé« CMS — přechod od monolitů ke službámNové »bezhlavé« CMS — přechod od monolitů ke službám
Nové »bezhlavé« CMS — přechod od monolitů ke službámJaroslav Vrána
 
Generátory statických webů
Generátory statických webůGenerátory statických webů
Generátory statických webůMichal Doležel
 
Tomáš Poner a Vladislav Musílek, Nejlepší affiliate pluginy pro WordPress
Tomáš Poner a Vladislav Musílek, Nejlepší affiliate pluginy pro WordPressTomáš Poner a Vladislav Musílek, Nejlepší affiliate pluginy pro WordPress
Tomáš Poner a Vladislav Musílek, Nejlepší affiliate pluginy pro WordPressColpirio.com s.r.o.
 
Optimalizace obrázků v (responsivních) šablonách
Optimalizace obrázků v (responsivních) šablonáchOptimalizace obrázků v (responsivních) šablonách
Optimalizace obrázků v (responsivních) šablonáchSUPERKODERS
 
Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...
Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...
Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...Sun Marketing
 
Webová prezentace - case study - DHL Express (Slovakia)
Webová prezentace - case study - DHL Express (Slovakia)Webová prezentace - case study - DHL Express (Slovakia)
Webová prezentace - case study - DHL Express (Slovakia)Sun Marketing
 
Responzivní webdesign (pro MS Fest)
Responzivní webdesign (pro MS Fest)Responzivní webdesign (pro MS Fest)
Responzivní webdesign (pro MS Fest)Martin Michálek
 
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptČtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptCtvrtkoncz
 
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeRychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeMartin Michálek
 
20110511 Vývoj software - produktivně, efektivně, kvalitně
20110511 Vývoj software - produktivně, efektivně, kvalitně20110511 Vývoj software - produktivně, efektivně, kvalitně
20110511 Vývoj software - produktivně, efektivně, kvalitněJiří Mareš
 
Webová prezentace - case study - Squaris Consultants
Webová prezentace - case study - Squaris ConsultantsWebová prezentace - case study - Squaris Consultants
Webová prezentace - case study - Squaris ConsultantsSun Marketing
 
Optimalizace webových aplikací
Optimalizace webových aplikacíOptimalizace webových aplikací
Optimalizace webových aplikacíVašek Purchart
 

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

TNPW2-2014-03
TNPW2-2014-03TNPW2-2014-03
TNPW2-2014-03
 
Web na dlani
Web na dlaniWeb na dlani
Web na dlani
 
TNPW2-2016-03
TNPW2-2016-03TNPW2-2016-03
TNPW2-2016-03
 
Webový front-end ve službách mobilního vývojáře
Webový front-end  ve službách mobilního  vývojáře Webový front-end  ve službách mobilního  vývojáře
Webový front-end ve službách mobilního vývojáře
 
Vytvořeno pro SEO (Designed for SEO)
Vytvořeno pro SEO (Designed for SEO)Vytvořeno pro SEO (Designed for SEO)
Vytvořeno pro SEO (Designed for SEO)
 
Nové »bezhlavé« CMS — přechod od monolitů ke službám
Nové »bezhlavé« CMS — přechod od monolitů ke službámNové »bezhlavé« CMS — přechod od monolitů ke službám
Nové »bezhlavé« CMS — přechod od monolitů ke službám
 
Generátory statických webů
Generátory statických webůGenerátory statických webů
Generátory statických webů
 
TNPW2-2013-03
TNPW2-2013-03TNPW2-2013-03
TNPW2-2013-03
 
Tomáš Poner a Vladislav Musílek, Nejlepší affiliate pluginy pro WordPress
Tomáš Poner a Vladislav Musílek, Nejlepší affiliate pluginy pro WordPressTomáš Poner a Vladislav Musílek, Nejlepší affiliate pluginy pro WordPress
Tomáš Poner a Vladislav Musílek, Nejlepší affiliate pluginy pro WordPress
 
Optimalizace obrázků v (responsivních) šablonách
Optimalizace obrázků v (responsivních) šablonáchOptimalizace obrázků v (responsivních) šablonách
Optimalizace obrázků v (responsivních) šablonách
 
Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...
Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...
Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...
 
Webová prezentace - case study - DHL Express (Slovakia)
Webová prezentace - case study - DHL Express (Slovakia)Webová prezentace - case study - DHL Express (Slovakia)
Webová prezentace - case study - DHL Express (Slovakia)
 
Responzivní webdesign (pro MS Fest)
Responzivní webdesign (pro MS Fest)Responzivní webdesign (pro MS Fest)
Responzivní webdesign (pro MS Fest)
 
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScriptČtvrtkon #71 - Marian Benčat - Angular a NativeScript
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
 
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeRychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
 
20110511 Vývoj software - produktivně, efektivně, kvalitně
20110511 Vývoj software - produktivně, efektivně, kvalitně20110511 Vývoj software - produktivně, efektivně, kvalitně
20110511 Vývoj software - produktivně, efektivně, kvalitně
 
TNPW2-2012-03
TNPW2-2012-03TNPW2-2012-03
TNPW2-2012-03
 
Webová prezentace - case study - Squaris Consultants
Webová prezentace - case study - Squaris ConsultantsWebová prezentace - case study - Squaris Consultants
Webová prezentace - case study - Squaris Consultants
 
TNPW2-2013-02
TNPW2-2013-02TNPW2-2013-02
TNPW2-2013-02
 
Optimalizace webových aplikací
Optimalizace webových aplikacíOptimalizace webových aplikací
Optimalizace webových aplikací
 

More from Desingdev

Efektivní vývoj produktů a prioritizace backlogu
Efektivní vývoj produktů a prioritizace backloguEfektivní vývoj produktů a prioritizace backlogu
Efektivní vývoj produktů a prioritizace backloguDesingdev
 
Jak se nezbláznit z Discovery Backlogu (Opportunity Solution Tree).pdf
Jak se nezbláznit z Discovery Backlogu (Opportunity Solution Tree).pdfJak se nezbláznit z Discovery Backlogu (Opportunity Solution Tree).pdf
Jak se nezbláznit z Discovery Backlogu (Opportunity Solution Tree).pdfDesingdev
 
Jak na ux pro cookies lištu 2022
Jak na ux pro cookies lištu 2022Jak na ux pro cookies lištu 2022
Jak na ux pro cookies lištu 2022Desingdev
 
UX monday - uživatelské testování
UX monday - uživatelské testováníUX monday - uživatelské testování
UX monday - uživatelské testováníDesingdev
 
Rozumí zákazníci vašemu webu
Rozumí zákazníci vašemu webuRozumí zákazníci vašemu webu
Rozumí zákazníci vašemu webuDesingdev
 
User experience v praxi
User experience v praxiUser experience v praxi
User experience v praxiDesingdev
 
AMP (Accelerated Mobile Pages) - SEO restart 2016
AMP (Accelerated Mobile Pages) - SEO restart 2016AMP (Accelerated Mobile Pages) - SEO restart 2016
AMP (Accelerated Mobile Pages) - SEO restart 2016Desingdev
 
Michal Voják o Cookies - AW-dev
Michal Voják o Cookies - AW-devMichal Voják o Cookies - AW-dev
Michal Voják o Cookies - AW-devDesingdev
 

More from Desingdev (8)

Efektivní vývoj produktů a prioritizace backlogu
Efektivní vývoj produktů a prioritizace backloguEfektivní vývoj produktů a prioritizace backlogu
Efektivní vývoj produktů a prioritizace backlogu
 
Jak se nezbláznit z Discovery Backlogu (Opportunity Solution Tree).pdf
Jak se nezbláznit z Discovery Backlogu (Opportunity Solution Tree).pdfJak se nezbláznit z Discovery Backlogu (Opportunity Solution Tree).pdf
Jak se nezbláznit z Discovery Backlogu (Opportunity Solution Tree).pdf
 
Jak na ux pro cookies lištu 2022
Jak na ux pro cookies lištu 2022Jak na ux pro cookies lištu 2022
Jak na ux pro cookies lištu 2022
 
UX monday - uživatelské testování
UX monday - uživatelské testováníUX monday - uživatelské testování
UX monday - uživatelské testování
 
Rozumí zákazníci vašemu webu
Rozumí zákazníci vašemu webuRozumí zákazníci vašemu webu
Rozumí zákazníci vašemu webu
 
User experience v praxi
User experience v praxiUser experience v praxi
User experience v praxi
 
AMP (Accelerated Mobile Pages) - SEO restart 2016
AMP (Accelerated Mobile Pages) - SEO restart 2016AMP (Accelerated Mobile Pages) - SEO restart 2016
AMP (Accelerated Mobile Pages) - SEO restart 2016
 
Michal Voják o Cookies - AW-dev
Michal Voják o Cookies - AW-devMichal Voják o Cookies - AW-dev
Michal Voják o Cookies - AW-dev
 

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

  • 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
  • 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
  • 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.
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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