Successfully reported this slideshow.
Your SlideShare is downloading. ×

Web Performance Optimization

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
jQuery e i suoi plugin
jQuery e i suoi plugin
Loading in …3
×

Check these out next

1 of 51 Ad

More Related Content

Similar to Web Performance Optimization (20)

Advertisement

Recently uploaded (20)

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=/^[^<]*(<(.|)+>)[^>]*$|^#([-]+)$/,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>

Editor's Notes

  • Per rispondere a questa domanda vediamo alcuni dati resi pubblici da alcuni grossi player alcune settimane fa
  • Vediamo il fenome un po&apos; più nel dettaglio: questo grafico rappresenta tutti i file che vengono scaricati richiedendo una particolare pagina (la hp di Y!). La lunghezza di ogni segmento blue indica il tempo impiegato per scaricare completamente il file Notiamo due cose: - come dicevamo prima ci sono tanti pezzi che compongono una pagina. Il primo ad essere scaricato è il file HTML che ovviamente contiene le informazioni per comporre tutta la pagina - La cosa più interessante però è che il tempo impiegato per scaricare il file HTMLè davvero breve rispetto a quello di tutta la pagina... 10/20% circa - Quando il server eroga il file HTML ha già fatto uery al DB, ha eseguito il codice, ecc... - chiamiamo backend...
  • Se dedicassi 5 minuti a parlare di ciascuna di queste avremmo davanti un&apos;ora e dieci piuttosto noiosa... per cui ho pensato di limitarmi a 6 di queste, anche in questo caso quelle più efficienti

×