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

1. Web Performance Optimization Alessandro Martin [email_address] www.thinkpragmatic.net

3. Da cosa dipende?

4. Best practice

5. Analisi dal vivo

6. Conclusioni

7. -> Novità

8. La velocità è importante?

9. Google

10. Bing

11. e noi comuni mortali?

12. Campione di siti editoriali Fonte: http://www.watchingwebsites.com

13. Campione di siti ecommerce Fonte: http://www.watchingwebsites.com

14. Convinti?

15. Da cosa dipende la velocità di un sito?

17. Velocità codice ?

18. Velocità del database ?

19. no.

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. Fonte: http://yuiblog.com backend frontend

24. Risultati certi

25. Molti tool

26. Best practice ben definite...

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

30. Ogni richiesta HTTP occupa tempo

31. M eno richieste -> più velocità Browser Server

33. Image map

34. Immagini inline (data URI) <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;)) ?>

35. Riduci le richieste HTTP CSS sprites

36. Riduci le richieste HTTP CSS sprites

37. Riduci le richieste HTTP CSS sprites

38. Riduci le richieste HTTP CSS sprites

39. Content Delivery Network CDN server browser

41. CDN dei poveri ;-)

42. Abilita Gzip Zip... Unzip... Browser Accept-econding:gzip 1 Server 2 Browser Accept-econding:gzip 4 Server Content-econding:gzip 3

44. Metti gli script in fondo

46. Expire headers cache Server Browser 3 4 Browser Server Expires:Thu, 15 Apr 2019 1 2

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

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

54. Ancora vivi?

56. Yslow – analisi made in Yahoo!

57. PageSpeed – analisi made in Google

58. Spriteme – CSS sprites made easy

59. Smush – comprime le immagini

60. YUI Compressor – minifica JS e CSS

61. site-perf.com – analisi

62. Firebug – net panel

65. Chissenefrega.

68. Poco intrusiva

69. Più visite

70. Più conversioni

71. Meno risorse HW

72. Meno banda

73. Fast is a must

74. Grazie. (domande?) www.thinkpragmatic.net [email_address]

75. Bonus!

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); })();

78. Miglior uptime

79. Più dati

80. Google Webmaster Tool

82. http://www.flickr.com/photos/70121902@N00/2109197876/

83. http://www.flickr.com/photos/bayat/12635053/