SlideShare une entreprise Scribd logo
1  sur  44
Télécharger pour lire hors ligne
Op#malizace  webových  aplikací
Ondřej  Mirtes
@OndrejMirtes	
  
Vašek  Purchart
@VasekPurchart	
  
Spojování  souborů
•  reset.css	
  
•  layout.css	
  
•  typography.css	
  
•  naviga;on.css	
  
•  bu=ons.css	
  
•  forms.css	
  
•  tables.css	
  
•  editor.css	
  
all.css	
  
Minifikace
#navigation	
  ul	
  {	
  
	
  	
  font-­‐size:	
  24px;	
  
	
  	
  line-­‐height:	
  40px;	
  
}	
  
#navigation	
  ul	
  li	
  {	
  
	
  	
  padding:	
  0;	
  
}	
  
#navigation	
  ul	
  li	
  a	
  {	
  
	
  	
  border:	
  0;	
  
	
  	
  color:	
  #333;	
  
}	
  
#navigation	
  ul	
  li	
  a	
  .count	
  
{	
  
	
  	
  font-­‐size:	
  14px;	
  
	
  	
  color:	
  #c41700;	
  
}	
  
#navigation	
  ul{font-­‐size:	
  
24px;line-­‐height:	
  40px;}
#navigation	
  ul	
  li{padding:
0;#navigation	
  ul	
  li	
  
a{border:	
  0;color:	
  #333;}
#navigation	
  ul	
  li	
  
a	
  .count{font-­‐size:
14px;color:	
  #c41700;}	
  
#navigation	
  ul	
  li	
  a:hover	
  
{color:#c41700;#navigation	
  
ul	
  li	
  ul{padding:	
  0;font-­‐
size:	
  18px;}#navigation	
  ul	
  
li.active	
  >	
  a	
  
{color:#c41700;#navigation	
  
ul	
  li:before{display:	
  
none;}select.submenu	
  
{display:	
  none;}	
  
CSS  &  JavaScript  připojujte  externě
<html>	
  
<head>	
  
	
  	
  	
  	
  <style>	
  
	
  	
  	
  	
  	
  	
  	
  	
  #navigation	
  ul	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  font-­‐size:	
  24px;	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  line-­‐height:	
  40px;	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  #navigation	
  ul	
  li	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  padding:	
  0;	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  ...	
  
	
  	
  	
  	
  </style>	
  
</head>	
  
...	
  
CSS  &  JavaScript  připojujte  externě
<head>	
  
	
  <link	
  rel="stylesheet"	
  
	
   	
  	
  	
  type="text/css"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  href="all.css">	
  
</head>	
  
CSS  &  JavaScript  připojujte  externě
<html>	
  
<body>	
  
	
  	
  	
  	
  <script>	
  
	
  	
  	
  	
  	
  	
  	
  $('#container')	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  .click(function(e)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  //	
  ...	
  
	
  	
  	
  	
  	
  	
  	
  });	
  
	
  	
  	
  	
  </script>	
  
</body>	
  
...	
  
CSS  &  JavaScript  připojujte  externě
<script	
  src="all.js"></script>	
  
Kam  připojit  JavaScript?
•  Náročná	
  blokující	
  operace	
  
•  Těsně  před  </body>
•  Prohlížeč	
  dá	
  při	
  načítání	
  přednost	
  
viditelným	
  prvkům	
  jako	
  jsou	
  obrázky	
  
CSS  sprites
CSS  sprites
.question-­‐mark-­‐icon	
  {	
  
	
  
	
  	
  	
  	
  width:	
  15px;	
  
	
  	
  	
  	
  height:	
  19px;	
  
	
  	
  	
  	
  background-­‐image:	
  
	
  	
  	
  url(sprites.png);	
  
	
  	
  	
  	
  background-­‐position:	
  
	
  	
  	
  -­‐103px	
  -­‐172px;	
  
	
  
}	
  
Obrázky  s  data  URI
•  Zakódování	
  obrázku	
  do	
  řetězce	
  
•  V	
  Internet	
  Exploreru	
  s	
  problémy	
  
	
  
background-­‐image:	
  url(data:image/
png;base64,iVBORw0KGgoAAAA...);	
  
Opakující  se  pozadí
Opakující  se  pozadí
JPEG
PNG
•  Bezeztrátová	
  komprese	
  
•  Vhodný	
  pro	
  ikony	
  a	
  webdesign	
  
•  U	
  fotografií	
  příliš	
  narůstá	
  velikost	
  
Vektorová  grafika
•  CSS3	
  –	
  kulaté	
  rohy,	
  barevné	
  přechody,	
  sZny	
  
•  SVG	
  –	
  obrázky	
  zapsané	
  v	
  XML	
  
•  Sady	
  ikon	
  jako	
  speciální	
  fonty	
  
– Font	
  Awesome	
  
Vektorová  grafika
Doporučení  k  obrázkům
•  V	
  HTML	
  by	
  měly	
  mít	
  uvedené	
  rozměry	
  
•  Zabrání	
  se	
  nechtěným	
  skokům	
  při	
  načítání	
  
<img	
  src="image.jpg"	
  width="150"	
  height="100">	
  
Doporučení  k  obrázkům
•  Barva	
  pozadí	
  by	
  měla	
  odpovídat	
  grafice,	
  která	
  
se	
  přes	
  něj	
  načte	
  
Content  Delivery  Network  (CDN)
•  Určitě	
  využijete	
  pro	
  načtení	
  frameworků	
  
•  Pozor	
  na	
  práci	
  off-­‐line	
  
•  Pro	
  vlastní	
  sta;cké	
  soubory	
  
– Amazon	
  S3,	
  CloudFront	
  
– Velcí	
  hráči	
  si	
  budují	
  vlastní	
  CDN	
  
•  Max.	
  2-­‐6	
  souběžných	
  požadavků	
  na	
  doménu	
  
– Řeší	
  se	
  rozložením	
  na	
  více	
  subdomén	
  
Obsluha  sta#ckých  souborů  přes  PHP
•  Jen	
  při	
  potřebě	
  zabezpečení	
  souborů	
  pro	
  
přihlášené	
  uživatele	
  
•  Spouštění	
  aplikace	
  je	
  náročné	
  a	
  prodlužuje	
  
odezvu	
  
•  Server	
  za	
  nás	
  implementuje	
  např.	
  navazování	
  
stahování	
  
	
  
☠	
  
Průběh  načtení  stránky
F12  tools
•  Firefox	
  –	
  Firebug	
  (addon)	
  
F12  tools
•  Chrome	
  
Komunikace  se  serverem
Last-­‐Modified,  If-­‐Modified-­‐Since
•  První	
  dotaz	
  
Response:	
  
Last-­‐Modified:	
  Fri,	
  3	
  May	
  2013	
  12:00:00	
  GMT	
  
Last-­‐Modified,  If-­‐Modified-­‐Since
•  První	
  dotaz	
  
Response:	
  
Last-­‐Modified:	
  Fri,	
  3	
  May	
  2013	
  12:00:00	
  GMT	
  
	
  
•  další	
  dotazy	
  
Request:	
  
If-­‐Modified-­‐Since:	
  Fri,	
  3	
  May	
  2013	
  12:00:00	
  GMT	
  
	
  
•  304	
  Not	
  Modified	
  
ETag,  If-­‐None-­‐Match
•  První	
  dotaz	
  
Response:	
  
ETag:	
  "686897696a7c876b7e	
  "	
  
ETag,  If-­‐None-­‐Match
•  První	
  dotaz	
  
Response:	
  
ETag:	
  "686897696a7c876b7e	
  "	
  
	
  
•  další	
  dotazy	
  
Request:	
  
If-­‐None-­‐Match:	
  "686897696a7c876b7e	
  "	
  
	
  
•  304	
  Not	
  Modified	
  
Expires
•  První	
  dotaz:	
  
Response:	
  	
  
Expires:	
  Mon,	
  3	
  Jun	
  2013	
  12:00:00	
  GMT	
  
Expires
•  První	
  dotaz:	
  
Response:	
  	
  
Expires:	
  Mon,	
  3	
  Jun	
  2013	
  12:00:00	
  GMT	
  
	
  
•  další	
  dotazy	
  
Nic,	
  pokud	
  neexpirovalo	
  
Cache-­‐Control:  max-­‐age
•  První	
  dotaz:	
  
Response:	
  	
  
Cache-­‐Control:	
  max-­‐age=2678400	
  
Vyhnue  se  cachování
•  Cache-­‐Control:	
  no-­‐cache	
  
•  staré	
  Expires	
  
gzip  komprese
•  Pro	
  HTML,	
  CSS,	
  JavaScript	
  
•  V	
  .htaccess:	
  
	
  <IfModule	
  mod_deflate.c>	
  
	
  AddOutputFilterByType	
  DEFLATE	
  text/html	
  text/
plain	
  text/xml	
  text/css	
  application/x-­‐javascript	
  text/
javascript	
  application/javascript	
  application/json	
  
</IfModule>	
  
Chrome  Audit
Ukládání  dat  u  uživatele
Applica#on  Cache
Web(local)  storage
Web  SQL
IndexedDB
Dynamické  načítání  obsahu
Vizuální  zrychlení
Server
•  Návrh	
  aplikace	
  
•  Volba	
  frameworků	
  
•  Nastavení	
  a	
  volba	
  serveru	
  
•  Op;malizace	
  aplikačního	
  kódu	
  
•  Opcode	
  cache	
  
•  Cachování	
  dat	
  
Databáze
•  Databázové	
  indexy	
  
•  Pozor	
  na	
  počet	
  dotazů	
  
•  Stahovat	
  jen	
  potřebná	
  data	
  

Contenu connexe

Tendances

Tendances (20)

Zrychlování webu
Zrychlování webuZrychlování webu
Zrychlování webu
 
Výkon WordPress
Výkon WordPressVýkon WordPress
Výkon WordPress
 
CSS
CSSCSS
CSS
 
WP výkon a jeho profilování
WP výkon a jeho profilováníWP výkon a jeho profilování
WP výkon a jeho profilování
 
Vyhledávače a JavaScript
Vyhledávače a JavaScriptVyhledávače a JavaScript
Vyhledávače a JavaScript
 
WordPress - základy bezpečnosti
WordPress - základy bezpečnostiWordPress - základy bezpečnosti
WordPress - základy bezpečnosti
 
Optimalizace rychlosti stránek
Optimalizace rychlosti stránekOptimalizace rychlosti stránek
Optimalizace rychlosti stránek
 
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)
 
Hashování hesel
Hashování heselHashování hesel
Hashování hesel
 
Zabezpečení Slevomatu
Zabezpečení SlevomatuZabezpečení Slevomatu
Zabezpečení Slevomatu
 
CSS preprocesory
CSS preprocesoryCSS preprocesory
CSS preprocesory
 
Základní pluginy pro WordPress
Základní pluginy pro WordPressZákladní pluginy pro WordPress
Základní pluginy pro WordPress
 
NMI14 Michal Špaček - Jak vytvářet, ukládat, používat hesla, jaké nástroje k ...
NMI14 Michal Špaček - Jak vytvářet, ukládat, používat hesla, jaké nástroje k ...NMI14 Michal Špaček - Jak vytvářet, ukládat, používat hesla, jaké nástroje k ...
NMI14 Michal Špaček - Jak vytvářet, ukládat, používat hesla, jaké nástroje k ...
 
WordCamp Praha 2016 - Bezpečnost WordPress
WordCamp Praha 2016 - Bezpečnost WordPressWordCamp Praha 2016 - Bezpečnost WordPress
WordCamp Praha 2016 - Bezpečnost WordPress
 
WordPress ve světě hostingu, Václav Peter
WordPress ve světě hostingu, Václav PeterWordPress ve světě hostingu, Václav Peter
WordPress ve světě hostingu, Václav Peter
 
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
 
Lukáš Pítra: Analýza klíčových slov (Shopcamp 2014)
Lukáš Pítra: Analýza klíčových slov (Shopcamp 2014)Lukáš Pítra: Analýza klíčových slov (Shopcamp 2014)
Lukáš Pítra: Analýza klíčových slov (Shopcamp 2014)
 
Kontinualni testovani a monitoring SEO - SEO robot
Kontinualni testovani a monitoring SEO - SEO robotKontinualni testovani a monitoring SEO - SEO robot
Kontinualni testovani a monitoring SEO - SEO robot
 
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
 
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
 

En vedette

Japan Group Project
Japan Group ProjectJapan Group Project
Japan Group Project
adevendo
 
Visual Essay Presentation1
Visual Essay Presentation1Visual Essay Presentation1
Visual Essay Presentation1
srr26
 

En vedette (16)

cv
cvcv
cv
 
Japan Group Project
Japan Group ProjectJapan Group Project
Japan Group Project
 
CV
CVCV
CV
 
St. John's Annual Luau 2008 Highlights
St. John's Annual Luau 2008 HighlightsSt. John's Annual Luau 2008 Highlights
St. John's Annual Luau 2008 Highlights
 
Do UFOs Exist?
Do UFOs Exist?Do UFOs Exist?
Do UFOs Exist?
 
IM
IMIM
IM
 
Sunday School
Sunday SchoolSunday School
Sunday School
 
Visual Essay Presentation1
Visual Essay Presentation1Visual Essay Presentation1
Visual Essay Presentation1
 
St. John's Members Visit Maupiti
St. John's Members Visit MaupitiSt. John's Members Visit Maupiti
St. John's Members Visit Maupiti
 
Sendspace
SendspaceSendspace
Sendspace
 
Easter 2009
Easter 2009Easter 2009
Easter 2009
 
G ph32011
G ph32011G ph32011
G ph32011
 
VŠE Doctrine 2 úvod
VŠE Doctrine 2 úvodVŠE Doctrine 2 úvod
VŠE Doctrine 2 úvod
 
Binder1
Binder1Binder1
Binder1
 
Etica para que
Etica para queEtica para que
Etica para que
 
Ethiopia
EthiopiaEthiopia
Ethiopia
 

Similaire à Optimalizace webových aplikací

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
 
Výkonnost webových aplikací
Výkonnost webových aplikacíVýkonnost webových aplikací
Výkonnost webových aplikací
Taste Medio
 

Similaire à Optimalizace webových aplikací (20)

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
 
PHP Vysočina - WordPress - 25.10.2018
PHP Vysočina - WordPress - 25.10.2018PHP Vysočina - WordPress - 25.10.2018
PHP Vysočina - WordPress - 25.10.2018
 
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
 
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
 
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
 
Hon za fonty na webu
Hon za fonty na webuHon za fonty na webu
Hon za fonty na 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 NativeScript
 
Bezpečnost Wordpressu - 4. WP konference
Bezpečnost Wordpressu - 4. WP konferenceBezpečnost Wordpressu - 4. WP konference
Bezpečnost Wordpressu - 4. WP konference
 
TNPW2-2013-03
TNPW2-2013-03TNPW2-2013-03
TNPW2-2013-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-2014-03
TNPW2-2014-03TNPW2-2014-03
TNPW2-2014-03
 
Základy internetu
Základy internetuZáklady internetu
Základy internetu
 
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
 
Keyup presentation about Gulp
Keyup presentation about GulpKeyup presentation about Gulp
Keyup presentation about Gulp
 
Oxygen Builder - Kyslík pro WordPress
Oxygen Builder - Kyslík pro WordPressOxygen Builder - Kyslík pro WordPress
Oxygen Builder - Kyslík pro WordPress
 
Výkonnost webových aplikací
Výkonnost webových aplikacíVýkonnost webových aplikací
Výkonnost webových aplikací
 
TNPW2-2012-03
TNPW2-2012-03TNPW2-2012-03
TNPW2-2012-03
 
Generátory statických webů
Generátory statických webůGenerátory statických webů
Generátory statických webů
 
Web na dlani
Web na dlaniWeb na dlani
Web na dlani
 

Optimalizace webových aplikací

  • 1. Op#malizace  webových  aplikací Ondřej  Mirtes @OndrejMirtes   Vašek  Purchart @VasekPurchart  
  • 2. Spojování  souborů •  reset.css   •  layout.css   •  typography.css   •  naviga;on.css   •  bu=ons.css   •  forms.css   •  tables.css   •  editor.css   all.css  
  • 3. Minifikace #navigation  ul  {      font-­‐size:  24px;      line-­‐height:  40px;   }   #navigation  ul  li  {      padding:  0;   }   #navigation  ul  li  a  {      border:  0;      color:  #333;   }   #navigation  ul  li  a  .count   {      font-­‐size:  14px;      color:  #c41700;   }   #navigation  ul{font-­‐size:   24px;line-­‐height:  40px;} #navigation  ul  li{padding: 0;#navigation  ul  li   a{border:  0;color:  #333;} #navigation  ul  li   a  .count{font-­‐size: 14px;color:  #c41700;}   #navigation  ul  li  a:hover   {color:#c41700;#navigation   ul  li  ul{padding:  0;font-­‐ size:  18px;}#navigation  ul   li.active  >  a   {color:#c41700;#navigation   ul  li:before{display:   none;}select.submenu   {display:  none;}  
  • 4. CSS  &  JavaScript  připojujte  externě <html>   <head>          <style>                  #navigation  ul  {                          font-­‐size:  24px;                          line-­‐height:  40px;                  }                  #navigation  ul  li  {                          padding:  0;                  }                  ...          </style>   </head>   ...  
  • 5. CSS  &  JavaScript  připojujte  externě <head>    <link  rel="stylesheet"          type="text/css"                      href="all.css">   </head>  
  • 6. CSS  &  JavaScript  připojujte  externě <html>   <body>          <script>                $('#container')                        .click(function(e)  {                              //  ...                });          </script>   </body>   ...  
  • 7. CSS  &  JavaScript  připojujte  externě <script  src="all.js"></script>  
  • 8. Kam  připojit  JavaScript? •  Náročná  blokující  operace   •  Těsně  před  </body> •  Prohlížeč  dá  při  načítání  přednost   viditelným  prvkům  jako  jsou  obrázky  
  • 10. CSS  sprites .question-­‐mark-­‐icon  {            width:  15px;          height:  19px;          background-­‐image:        url(sprites.png);          background-­‐position:        -­‐103px  -­‐172px;     }  
  • 11. Obrázky  s  data  URI •  Zakódování  obrázku  do  řetězce   •  V  Internet  Exploreru  s  problémy     background-­‐image:  url(data:image/ png;base64,iVBORw0KGgoAAAA...);  
  • 14. JPEG
  • 15. PNG •  Bezeztrátová  komprese   •  Vhodný  pro  ikony  a  webdesign   •  U  fotografií  příliš  narůstá  velikost  
  • 16. Vektorová  grafika •  CSS3  –  kulaté  rohy,  barevné  přechody,  sZny   •  SVG  –  obrázky  zapsané  v  XML   •  Sady  ikon  jako  speciální  fonty   – Font  Awesome  
  • 18. Doporučení  k  obrázkům •  V  HTML  by  měly  mít  uvedené  rozměry   •  Zabrání  se  nechtěným  skokům  při  načítání   <img  src="image.jpg"  width="150"  height="100">  
  • 19. Doporučení  k  obrázkům •  Barva  pozadí  by  měla  odpovídat  grafice,  která   se  přes  něj  načte  
  • 20. Content  Delivery  Network  (CDN) •  Určitě  využijete  pro  načtení  frameworků   •  Pozor  na  práci  off-­‐line   •  Pro  vlastní  sta;cké  soubory   – Amazon  S3,  CloudFront   – Velcí  hráči  si  budují  vlastní  CDN   •  Max.  2-­‐6  souběžných  požadavků  na  doménu   – Řeší  se  rozložením  na  více  subdomén  
  • 21. Obsluha  sta#ckých  souborů  přes  PHP •  Jen  při  potřebě  zabezpečení  souborů  pro   přihlášené  uživatele   •  Spouštění  aplikace  je  náročné  a  prodlužuje   odezvu   •  Server  za  nás  implementuje  např.  navazování   stahování     ☠  
  • 23. F12  tools •  Firefox  –  Firebug  (addon)  
  • 26. Last-­‐Modified,  If-­‐Modified-­‐Since •  První  dotaz   Response:   Last-­‐Modified:  Fri,  3  May  2013  12:00:00  GMT  
  • 27. Last-­‐Modified,  If-­‐Modified-­‐Since •  První  dotaz   Response:   Last-­‐Modified:  Fri,  3  May  2013  12:00:00  GMT     •  další  dotazy   Request:   If-­‐Modified-­‐Since:  Fri,  3  May  2013  12:00:00  GMT     •  304  Not  Modified  
  • 28. ETag,  If-­‐None-­‐Match •  První  dotaz   Response:   ETag:  "686897696a7c876b7e  "  
  • 29. ETag,  If-­‐None-­‐Match •  První  dotaz   Response:   ETag:  "686897696a7c876b7e  "     •  další  dotazy   Request:   If-­‐None-­‐Match:  "686897696a7c876b7e  "     •  304  Not  Modified  
  • 30. Expires •  První  dotaz:   Response:     Expires:  Mon,  3  Jun  2013  12:00:00  GMT  
  • 31. Expires •  První  dotaz:   Response:     Expires:  Mon,  3  Jun  2013  12:00:00  GMT     •  další  dotazy   Nic,  pokud  neexpirovalo  
  • 32. Cache-­‐Control:  max-­‐age •  První  dotaz:   Response:     Cache-­‐Control:  max-­‐age=2678400  
  • 33. Vyhnue  se  cachování •  Cache-­‐Control:  no-­‐cache   •  staré  Expires  
  • 34. gzip  komprese •  Pro  HTML,  CSS,  JavaScript   •  V  .htaccess:    <IfModule  mod_deflate.c>    AddOutputFilterByType  DEFLATE  text/html  text/ plain  text/xml  text/css  application/x-­‐javascript  text/ javascript  application/javascript  application/json   </IfModule>  
  • 36. Ukládání  dat  u  uživatele
  • 43. Server •  Návrh  aplikace   •  Volba  frameworků   •  Nastavení  a  volba  serveru   •  Op;malizace  aplikačního  kódu   •  Opcode  cache   •  Cachování  dat  
  • 44. Databáze •  Databázové  indexy   •  Pozor  na  počet  dotazů   •  Stahovat  jen  potřebná  data