SlideShare une entreprise Scribd logo
1  sur  37
Télécharger pour lire hors ligne
jak zrychlit
načítání webu?
Tomáš Krejčí
@tomkrej | superkoderi.cz
Frontendisti Praha
3. 6. 2015
Prezentace jak zrychlit načítání webu
Prezentace jak zrychlit načítání webu
Musí mít
• paralax
• obrovské průhledné fotky
• nespočet různých jQuery pluginů
• speciální funkčností na touch zařízeních
• minimálně 5 speciálních přechodů mezi stránkami
• animace
• a další…
Navíc musí být
• responsivní
• má vypadat stejně ve všech prohlížečích
• i pro IE7
Hlavně se musí
rychle načítat!
… co s tím?
Prezentace jak zrychlit načítání webu
Prezentace jak zrychlit načítání webu
zamyšlení
Potřebuji vůbec použít
jQuery?
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
96 KB
jQuery UI
Date picker
• Celá jQuery UI

JS.min - 240 KB

CSS.min - 30 KB + 14 KB (thema) + 15 KB (structure)

Obrázky - 35 KB
• Pouze plugin UI

JS.min - 40 KB

CSS.min - 19 KB + 14 KB (thema) + 15 KB (structure)

Obrázky - 35 KB
• Samostatný plugin od autora

JS.min - 40 KB

CSS.min - 4.4 KB

Obrázky - 4 KB

http://keith-wood.name/datepick.HTML
286 KB
78 KB
Potřebuji plugin?
jquery.easytabs
• S pluginem

26.8 / 9.4 (minifikovaná verze) KB
• Napsáno custom

0.4 KB
jquery.scrollTo
• S pluginem

2.4 / 5.7 (minifikovaná verze) KB
• Napsáno custom

0.3 KB
snížení počtu
requestů
Slučujte JS / CSS
• Slučujte a minifikujte na serveru
• https://code.google.com/p/minify/
• http://yui.github.io/yuicompressor/
• Při kódování
• Grunt task

https://github.com/gruntjs/grunt-contrib-uglify
• Další nástroje:
Koala …
Používejte Sprity
• online - http://spriteme.org/
• grunt task - https://github.com/karfcz/grunt-sprite-packer
• kompilační nástroj jako je compass
• Vlastní subdomény
• Služby třetích stran Google fonty, typekit apod.
Stahování zdrojů z více domén
datová optimalizace
Obrázky
• Picture element
• SVG ikonky / ikon fonty
• base 64
• progresivní JPEG
• Compressive images *
• Minifikace obrázků *
Compressive images
© Machal 5.10.2014 Frontendisti - Ostrava | https://www.youtube.com/watch?v=zsE6caTsi1M
Minifikace obrázků
Spousta nástrojů: Kraken.io, Smush.it, TinyPNG a
další…
Já používám:
• Grunt task

https://github.com/gruntjs/grunt-contrib-imagemin
• JPEGmini *
• Posterizace *
• ImageOptim *
JPEGmini
http://www.jpegmini.com/ | Appka
Posterizace
Standardní PNG Posterizované PNG
382,8 KB
748.3 KB 365.5 KB
Magickéčíslo37
- Obraz / Přízpůsobení / Posterizace

- Image / Adjustments / Posterize
ImageOptim
https://imageoptim.com/
+/- 15 %
Nezapomeňte minifikovat i
všechny textové zdroje
• HTML
• CSS
• JS
• SVG
Pozor na fonty
• Nepoužívejte spoustu řezů
• Zkuste znovu vygenerovat ;)
Google font – Open Sans – Regular a Bold
90 KB
*.woff - 53 KB
*.woff2 - 40 KB
50 KB
server
Nastavení serveru
• expires header
• gzip
• nastavení kešování
Serverová detekce
• free

http://mobiledetect.net/
• placené

https://deviceatlas.com/

http://wurfl.sourceforge.net/

http://www.detectright.com/
• vlastní

kombinace MobileDetect a Modernizr
Pomalá odezva ze
serveru
prasárny

(časté chyby)
• display:none; u src elementů
• respond.js

https://github.com/robinpokorny/grunt-legacssy
• @import ve stylech či inline styly v HTML
• prázdné src a href atributy
• zmenšování obrázku za pomocí atributů width a height
• nenastavené width a height na <img />
• nevkládat inline JS doprostřed stránky a už vůbec né za tag
<body>
• nepoužívejte PNG pokud se jedná o fotky
• načítaní CSS a JS ze správných míst
• obrovské obrázky v responsivní verzi
• kompilace preprocesoru až na frontendu
budoucnost HTTP/2
• je binární
• Lépe zpracovává požadavky
• cache pushing
• komprese HTTP hlaviček
• lepší zabezpečení
Které prohlížeče už jej dokáží
zpracovat?
Jak použít HTTP/2 dnes
na svém projektu?
https://github.com/icing/mod_h2
nastroje jak měřit
rychlost webu
• PageSpeed
• Yslow
• Chrome DevTools
• Network
• Record Filmstrip

https://twitter.com/malyw/status/581877260082388992
• Další
• http://tools.pingdom.com/fpt/
• http://www.webpagetest.org/
• http://gtmetrix.com/
Děkuji za pozornost!
Tomáš Krejčí
@tomkrej | superkoderi.cz

Contenu connexe

Tendances

Glami - jak řešíme performance, aneb jak neshodit web TV reklamou
Glami - jak řešíme performance, aneb jak neshodit web TV reklamouGlami - jak řešíme performance, aneb jak neshodit web TV reklamou
Glami - jak řešíme performance, aneb jak neshodit web TV reklamouPetr Bechyně
 
Dobrý skautský web
Dobrý skautský webDobrý skautský web
Dobrý skautský webMichal Janata
 
Retina displeje pro webdesignéry
Retina displeje pro webdesignéryRetina displeje pro webdesignéry
Retina displeje pro webdesignéryMartin Michálek
 
Základní pluginy pro WordPress
Základní pluginy pro WordPressZákladní pluginy pro WordPress
Základní pluginy pro WordPressRadek Kucera
 
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůVše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek
 
Jak zrychlit WP pomocí cachovacích pluginů
Jak zrychlit WP pomocí cachovacích pluginůJak zrychlit WP pomocí cachovacích pluginů
Jak zrychlit WP pomocí cachovacích pluginůJakub Klapka
 
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)Martin Michálek
 
Principy cachování ve WordPressu
Principy cachování ve WordPressuPrincipy cachování ve WordPressu
Principy cachování ve WordPressuDavid Biňovec
 
Vyhledávače a JavaScript
Vyhledávače a JavaScriptVyhledávače a JavaScript
Vyhledávače a JavaScriptTaste Medio
 
SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)
SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)
SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)Pavel Ungr
 
SeznamBot a renderování stránek - 30.3.2019 COE2019
SeznamBot a renderování stránek - 30.3.2019 COE2019SeznamBot a renderování stránek - 30.3.2019 COE2019
SeznamBot a renderování stránek - 30.3.2019 COE2019Martin Kirschner
 
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
 

Tendances (14)

Glami - jak řešíme performance, aneb jak neshodit web TV reklamou
Glami - jak řešíme performance, aneb jak neshodit web TV reklamouGlami - jak řešíme performance, aneb jak neshodit web TV reklamou
Glami - jak řešíme performance, aneb jak neshodit web TV reklamou
 
Dobrý skautský web
Dobrý skautský webDobrý skautský web
Dobrý skautský web
 
Bez HTML5/CSS3 to nejde
Bez HTML5/CSS3 to nejdeBez HTML5/CSS3 to nejde
Bez HTML5/CSS3 to nejde
 
Retina displeje pro webdesignéry
Retina displeje pro webdesignéryRetina displeje pro webdesignéry
Retina displeje pro webdesignéry
 
Základní pluginy pro WordPress
Základní pluginy pro WordPressZákladní pluginy pro WordPress
Základní pluginy pro WordPress
 
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůVše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
 
Jak zrychlit WP pomocí cachovacích pluginů
Jak zrychlit WP pomocí cachovacích pluginůJak zrychlit WP pomocí cachovacích pluginů
Jak zrychlit WP pomocí cachovacích pluginů
 
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)
 
Principy cachování ve WordPressu
Principy cachování ve WordPressuPrincipy cachování ve WordPressu
Principy cachování ve WordPressu
 
Vyhledávače a JavaScript
Vyhledávače a JavaScriptVyhledávače a JavaScript
Vyhledávače a JavaScript
 
SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)
SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)
SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)
 
SeznamBot a renderování stránek - 30.3.2019 COE2019
SeznamBot a renderování stránek - 30.3.2019 COE2019SeznamBot a renderování stránek - 30.3.2019 COE2019
SeznamBot a renderování stránek - 30.3.2019 COE2019
 
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
 
WordPress šablony
WordPress šablony WordPress šablony
WordPress šablony
 

Similaire à Prezentace jak zrychlit načítání webu

Č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
 
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.
 
Rizika použití WordPressu
Rizika použití WordPressuRizika použití WordPressu
Rizika použití WordPressuSUPERKODERS
 
Hobby Developer 3.0: Tipy a triky pro web
Hobby Developer 3.0: Tipy a triky pro webHobby Developer 3.0: Tipy a triky pro web
Hobby Developer 3.0: Tipy a triky pro webTomáš Muchka
 
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
 
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...Martin Pešout
 
Hledání příčin pomalého webu a jak to řešit
Hledání příčin pomalého webu a jak to řešitHledání příčin pomalého webu a jak to řešit
Hledání příčin pomalého webu a jak to řešitDesingdev
 
Continuous integration pro Symfony/PHP aplikaci s Dockerem v GitLabu [CZ]
Continuous integration pro Symfony/PHP aplikaci s Dockerem v GitLabu [CZ]Continuous integration pro Symfony/PHP aplikaci s Dockerem v GitLabu [CZ]
Continuous integration pro Symfony/PHP aplikaci s Dockerem v GitLabu [CZ]Vašek Purchart
 
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
 
Google Tag Manager a analytika ve WordPress
Google Tag Manager a analytika ve WordPressGoogle Tag Manager a analytika ve WordPress
Google Tag Manager a analytika ve WordPressVladimír Smitka
 
Použití Next.js a Reactí UI khinihovny v aplikaci
Použití Next.js a Reactí UI khinihovny v aplikaciPoužití Next.js a Reactí UI khinihovny v aplikaci
Použití Next.js a Reactí UI khinihovny v aplikaciMartin Krištof
 
Prototypování webových aplikací
Prototypování webových aplikacíPrototypování webových aplikací
Prototypování webových aplikacíJakub Španihel
 
Výběr vhodných technologii pro startup v prostředí cloudu
Výběr vhodných technologii pro startup v prostředí clouduVýběr vhodných technologii pro startup v prostředí cloudu
Výběr vhodných technologii pro startup v prostředí clouduJan Kodera
 
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
 

Similaire à Prezentace jak zrychlit načítání webu (20)

Výkon WordPress
Výkon WordPressVýkon WordPress
Výkon WordPress
 
Č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
 
TNPW2-2014-03
TNPW2-2014-03TNPW2-2014-03
TNPW2-2014-03
 
TNPW2-2016-03
TNPW2-2016-03TNPW2-2016-03
TNPW2-2016-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
 
TNPW2-2012-03
TNPW2-2012-03TNPW2-2012-03
TNPW2-2012-03
 
Rizika použití WordPressu
Rizika použití WordPressuRizika použití WordPressu
Rizika použití WordPressu
 
Hobby Developer 3.0: Tipy a triky pro web
Hobby Developer 3.0: Tipy a triky pro webHobby Developer 3.0: Tipy a triky pro web
Hobby Developer 3.0: Tipy a triky pro web
 
TNPW2-2013-03
TNPW2-2013-03TNPW2-2013-03
TNPW2-2013-03
 
Nejčastejší problémy WordPress webů
Nejčastejší problémy WordPress webůNejčastejší problémy WordPress webů
Nejčastejší problémy WordPress webů
 
Axure RP training
Axure RP trainingAxure RP training
Axure RP training
 
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...
Vývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...
 
Hledání příčin pomalého webu a jak to řešit
Hledání příčin pomalého webu a jak to řešitHledání příčin pomalého webu a jak to řešit
Hledání příčin pomalého webu a jak to řešit
 
Continuous integration pro Symfony/PHP aplikaci s Dockerem v GitLabu [CZ]
Continuous integration pro Symfony/PHP aplikaci s Dockerem v GitLabu [CZ]Continuous integration pro Symfony/PHP aplikaci s Dockerem v GitLabu [CZ]
Continuous integration pro Symfony/PHP aplikaci s Dockerem v GitLabu [CZ]
 
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
 
Google Tag Manager a analytika ve WordPress
Google Tag Manager a analytika ve WordPressGoogle Tag Manager a analytika ve WordPress
Google Tag Manager a analytika ve WordPress
 
Použití Next.js a Reactí UI khinihovny v aplikaci
Použití Next.js a Reactí UI khinihovny v aplikaciPoužití Next.js a Reactí UI khinihovny v aplikaci
Použití Next.js a Reactí UI khinihovny v aplikaci
 
Prototypování webových aplikací
Prototypování webových aplikacíPrototypování webových aplikací
Prototypování webových aplikací
 
Výběr vhodných technologii pro startup v prostředí cloudu
Výběr vhodných technologii pro startup v prostředí clouduVýběr vhodných technologii pro startup v prostředí cloudu
Výběr vhodných technologii pro startup v prostředí cloudu
 
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
 

Plus de SUPERKODERS

SVG SUPERWORKFLOW
SVG SUPERWORKFLOWSVG SUPERWORKFLOW
SVG SUPERWORKFLOWSUPERKODERS
 
Proč je <iRozhlas / SUPER>
Proč je <iRozhlas / SUPER>Proč je <iRozhlas / SUPER>
Proč je <iRozhlas / SUPER>SUPERKODERS
 
Jak funguje prohlížeč
Jak funguje prohlížečJak funguje prohlížeč
Jak funguje prohlížečSUPERKODERS
 
Typické chyby responzivních podkladů
Typické chyby responzivních podkladůTypické chyby responzivních podkladů
Typické chyby responzivních podkladůSUPERKODERS
 
Jak pracovat s fonty na front endu
Jak pracovat s fonty na front enduJak pracovat s fonty na front endu
Jak pracovat s fonty na front enduSUPERKODERS
 
Užitečné zdroje a nástroje pro tvorbu HTML e-mailů
Užitečné zdroje a nástroje pro tvorbu HTML e-mailůUžitečné zdroje a nástroje pro tvorbu HTML e-mailů
Užitečné zdroje a nástroje pro tvorbu HTML e-mailůSUPERKODERS
 
Stylus - css preprocessor
Stylus - css preprocessorStylus - css preprocessor
Stylus - css preprocessorSUPERKODERS
 

Plus de SUPERKODERS (7)

SVG SUPERWORKFLOW
SVG SUPERWORKFLOWSVG SUPERWORKFLOW
SVG SUPERWORKFLOW
 
Proč je <iRozhlas / SUPER>
Proč je <iRozhlas / SUPER>Proč je <iRozhlas / SUPER>
Proč je <iRozhlas / SUPER>
 
Jak funguje prohlížeč
Jak funguje prohlížečJak funguje prohlížeč
Jak funguje prohlížeč
 
Typické chyby responzivních podkladů
Typické chyby responzivních podkladůTypické chyby responzivních podkladů
Typické chyby responzivních podkladů
 
Jak pracovat s fonty na front endu
Jak pracovat s fonty na front enduJak pracovat s fonty na front endu
Jak pracovat s fonty na front endu
 
Užitečné zdroje a nástroje pro tvorbu HTML e-mailů
Užitečné zdroje a nástroje pro tvorbu HTML e-mailůUžitečné zdroje a nástroje pro tvorbu HTML e-mailů
Užitečné zdroje a nástroje pro tvorbu HTML e-mailů
 
Stylus - css preprocessor
Stylus - css preprocessorStylus - css preprocessor
Stylus - css preprocessor
 

Prezentace jak zrychlit načítání webu