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.
Web Performance  Optimization Alessandro Martin [email_address] www.thinkpragmatic.net
Agenda <ul><li>La velocità è importante?
Da cosa dipende?
Best practice
Analisi dal vivo
Conclusioni
->  Novità </li></ul>
La velocità è  importante?
Google
Bing
e noi  comuni  mortali?
Campione di siti editoriali Fonte: http://www.watchingwebsites.com
Campione di siti ecommerce Fonte: http://www.watchingwebsites.com
Convinti?
Da cosa dipende la  velocità   di un sito?
Ha il maggiore impatto: <ul><li>Velocità del  server ?
Velocità  codice ?
Velocità del  database ? </li></ul>
no.
2 o 3 cose che sapete GET /pippo.html GET /style.css GET /script.js GET /img.jpg pippo.html style.css script.js img.jpg Br...
Fonte: http://yuiblog.com backend frontend
<ul>80%   del tempo di caricamente  percepito dall'utente è speso nel  frontend </ul>è qui che dobbiamo lavorare..
Buone notizie <ul><li>Ottimizzare il frontend è  facile
Risultati  certi
Molti  tool
Best practice  ben definite... </li></ul>
 
Riduci le Richieste HTTP Usa un  Content Delivery Network Sfrutta Gzip Metti gli Script alla Fine Aggiungi un  Expires Hea...
Riduci le richieste HTTP <ul><li>1 componente = 1 richiesta HTTP
Ogni richiesta HTTP occupa  tempo
M eno richieste -> più  velocità </li></ul>Browser Server
Riduci le richieste HTTP <ul><li>JS e CSS combinati
Image map
Immagini  inline  (data URI) </li></ul><img src=&quot; data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3...
Riduci le richieste HTTP CSS sprites
Riduci le richieste HTTP CSS sprites
Riduci le richieste HTTP CSS sprites
Riduci le richieste HTTP CSS sprites
Content Delivery Network CDN server browser
Content Delivery Network <script src=&quot;http://www.google.com/jsapi&quot;></script> <script> // Load jQuery google.load...
CDN dei poveri ;-)  </li></ul>
Abilita Gzip Zip... Unzip... Browser Accept-econding:gzip 1 Server 2 Browser Accept-econding:gzip 4 Server Content-econdin...
Abilita Gzip <ul>90%  dei browser supporta GZIP puoi zippare HTML, CSS, JS </ul>
Metti gli script in fondo
Metti gli script in fondo <ul>Vanno (quasi) </ul>sempre in fondo
Expire headers cache Server Browser   3 4 Browser Server Expires:Thu, 15 Apr 2019 1 2
Expires headers <ul>~80%  delle pageview hanno una CACHE inizializzata Fonte:   http://developer.yahoo.com/performance/rul...
Expires headers <ul>Imposta  la scadenza nel futuro </ul>
Configura gli Etag Browser Server HTTP/1.1 200 OK Last-Modified: Tue.... ETag: &quot;10c24bc-4ab-457e1c1f&quot; Content-Le...
Configura gli Etag <ul><li>Dipendono dal server fisico
Spesso  è meglio  disabilitarli </li><ul><li>Apache ->  FileETag none   </li></ul></ul>
Upcoming SlideShare
Loading in …5
×

Web Performance Optimization

23,912 views

Published on

Web Performance Optimization: ottimizzare la velocità di un sito.

Published in: Technology

Web Performance Optimization

  1. 1. Web Performance Optimization Alessandro Martin [email_address] www.thinkpragmatic.net
  2. 2. Agenda <ul><li>La velocità è importante?
  3. 3. Da cosa dipende?
  4. 4. Best practice
  5. 5. Analisi dal vivo
  6. 6. Conclusioni
  7. 7. -> Novità </li></ul>
  8. 8. La velocità è importante?
  9. 9. Google
  10. 10. Bing
  11. 11. e noi comuni mortali?
  12. 12. Campione di siti editoriali Fonte: http://www.watchingwebsites.com
  13. 13. Campione di siti ecommerce Fonte: http://www.watchingwebsites.com
  14. 14. Convinti?
  15. 15. Da cosa dipende la velocità di un sito?
  16. 16. Ha il maggiore impatto: <ul><li>Velocità del server ?
  17. 17. Velocità codice ?
  18. 18. Velocità del database ? </li></ul>
  19. 19. no.
  20. 20. 2 o 3 cose che sapete GET /pippo.html GET /style.css GET /script.js GET /img.jpg pippo.html style.css script.js img.jpg Browser Server
  21. 21. Fonte: http://yuiblog.com backend frontend
  22. 22. <ul>80% del tempo di caricamente percepito dall'utente è speso nel frontend </ul>è qui che dobbiamo lavorare..
  23. 23. Buone notizie <ul><li>Ottimizzare il frontend è facile
  24. 24. Risultati certi
  25. 25. Molti tool
  26. 26. Best practice ben definite... </li></ul>
  27. 28. Riduci le Richieste HTTP Usa un Content Delivery Network Sfrutta Gzip Metti gli Script alla Fine Aggiungi un Expires Header Minimizza Javascript e CSS
  28. 29. Riduci le richieste HTTP <ul><li>1 componente = 1 richiesta HTTP
  29. 30. Ogni richiesta HTTP occupa tempo
  30. 31. M eno richieste -> più velocità </li></ul>Browser Server
  31. 32. Riduci le richieste HTTP <ul><li>JS e CSS combinati
  32. 33. Image map
  33. 34. Immagini inline (data URI) </li></ul><img src=&quot; data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7 &quot; width=&quot;16&quot; height=&quot;14&quot; alt=&quot;embedded folder icon&quot;> <?php echo base64_encode(file_get_contents(&quot;../images/folder16.gif&quot;)) ?>
  34. 35. Riduci le richieste HTTP CSS sprites
  35. 36. Riduci le richieste HTTP CSS sprites
  36. 37. Riduci le richieste HTTP CSS sprites
  37. 38. Riduci le richieste HTTP CSS sprites
  38. 39. Content Delivery Network CDN server browser
  39. 40. Content Delivery Network <script src=&quot;http://www.google.com/jsapi&quot;></script> <script> // Load jQuery google.load(&quot;jquery&quot;, &quot;1&quot;) ; //do some stuff... </script> <ul><li>Costoso (es. Akamai)
  40. 41. CDN dei poveri ;-) </li></ul>
  41. 42. Abilita Gzip Zip... Unzip... Browser Accept-econding:gzip 1 Server 2 Browser Accept-econding:gzip 4 Server Content-econding:gzip 3
  42. 43. Abilita Gzip <ul>90% dei browser supporta GZIP puoi zippare HTML, CSS, JS </ul>
  43. 44. Metti gli script in fondo
  44. 45. Metti gli script in fondo <ul>Vanno (quasi) </ul>sempre in fondo
  45. 46. Expire headers cache Server Browser 3 4 Browser Server Expires:Thu, 15 Apr 2019 1 2
  46. 47. Expires headers <ul>~80% delle pageview hanno una CACHE inizializzata Fonte: http://developer.yahoo.com/performance/rules.html#expires </ul>
  47. 48. Expires headers <ul>Imposta la scadenza nel futuro </ul>
  48. 49. Configura gli Etag Browser Server HTTP/1.1 200 OK Last-Modified: Tue.... ETag: &quot;10c24bc-4ab-457e1c1f&quot; Content-Length: 12195 1 2 Server 304 Not modified Browser If-None-Match: &quot;10c24bc-4ab-457e1c1f&quot; 3 4
  49. 50. Configura gli Etag <ul><li>Dipendono dal server fisico
  50. 51. Spesso è meglio disabilitarli </li><ul><li>Apache -> FileETag none </li></ul></ul>
  51. 52. Minimizzare JS e CSS (function(){ var // Will speed up references to window, and allows munging its name. window = this, // Will speed up references to undefined, and allows munging its name. undefined, // Map over jQuery in case of overwrite _jQuery = window.jQuery, (function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},D=/^[^<]*(<(.|s)+>)[^>]*$|^#([w-]+)$/,f=/^.[^:#[.,]*$/;o.fn=o.prototype={init:function(E,H){E=E||document;if(E.nodeType){this[0]=E;this.length=1;this.context=E;return this}if(typeof E===&quot;string&quot;){var G=D.exec(E);if(G&&(G[1]||!H)){if(G[1]){E=o.clean([G[1]],H)}else{var I=document.getElementById(G[3]); 117KB 56KB
  52. 53. Minimizzare JS e CSS <ul>piccolo </ul>è meglio
  53. 54. Ancora vivi?
  54. 55. Strumenti <ul><li>Hammer Head – tempi di caricamento
  55. 56. Yslow – analisi made in Yahoo!
  56. 57. PageSpeed – analisi made in Google
  57. 58. Spriteme – CSS sprites made easy
  58. 59. Smush – comprime le immagini
  59. 60. YUI Compressor – minifica JS e CSS
  60. 61. site-perf.com – analisi
  61. 62. Firebug – net panel </li></ul>
  62. 63. <ul>YSlow </ul>Live http://www.trenitalia.com http://www.repubblica.it
  63. 64. <ul>La velocità influenza il ranking? </ul>
  64. 65. Chissenefrega.
  65. 66. <ul>la velocità porta benefici in ogni caso </ul>
  66. 67. <ul><li>Una grande opportunità
  67. 68. Poco intrusiva
  68. 69. Più visite
  69. 70. Più conversioni
  70. 71. Meno risorse HW
  71. 72. Meno banda </li></ul>
  72. 73. Fast is a must
  73. 74. Grazie. (domande?) www.thinkpragmatic.net [email_address]
  74. 75. Bonus!
  75. 76. Bonus: GA goes Async var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.setAttribute('async', 'true'); document.documentElement.firstChild.appendChild(ga); })();
  76. 77. GA goes async <ul><li>Più veloce
  77. 78. Miglior uptime
  78. 79. Più dati </li></ul>
  79. 80. Google Webmaster Tool
  80. 81. Immagini Creative Commons <ul><li>http://www.flickr.com/photos/56367751@N00/278662472/
  81. 82. http://www.flickr.com/photos/70121902@N00/2109197876/
  82. 83. http://www.flickr.com/photos/bayat/12635053/ </li></ul>

×