Optimalizace webových aplikací

Optimalizace webových aplikací

@OndrejMirtes a @VasekPurchart na Web Inkognito VŠE.

95a298d2bffa1b46fd023a286a8a7e86?s=128

Ondřej Mirtes

May 03, 2013
Tweet

Transcript

  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  
  9. CSS  sprites

  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...);  
  12. Opakující  se  pozadí

  13. Opakující  se  pozadí

  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  
  17. Vektorová  grafika

  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í     ☠  
  22. Průběh  načtení  stránky

  23. F12  tools •  Firefox  –  Firebug  (addon)  

  24. F12  tools •  Chrome  

  25. Komunikace  se  serverem

  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>  
  35. Chrome  Audit

  36. Ukládání  dat  u  uživatele

  37. Applica#on  Cache

  38. Web(local)  storage

  39. Web  SQL

  40. IndexedDB

  41. Dynamické  načítání  obsahu

  42. Vizuální  zrychlení

  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