La presentazione tratta l'importanza dell'ottimizzazione delle prestazioni web, evidenziando che la velocità del frontend è cruciale per l'esperienza utente. Vengono suggerite pratiche ottimali come la riduzione delle richieste HTTP, l'utilizzo di CDN, la compressione Gzip e la gestione degli header di scadenza. Infine, l'ottimizzazione non solo migliora la velocità, ma può anche portare a un aumento del traffico e delle conversioni.

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

2. Agenda La velocità è importante?

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?

16. Ha il maggiore impatto: Velocità del server ?

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

22. 80% del tempo di caricamente percepito dall'utente è speso nel frontend è qui che dobbiamo lavorare..

23. Buone notizie Ottimizzare il frontend è facile

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

29. Riduci le richieste HTTP 1 componente = 1 richiesta HTTP

30. Ogni richiesta HTTP occupa tempo

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

32. Riduci le richieste HTTP JS e CSS combinati

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

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> Costoso (es. Akamai)

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

43. Abilita Gzip 90% dei browser supporta GZIP puoi zippare HTML, CSS, JS

44. Metti gli script in fondo

45. Metti gli script in fondo Vanno (quasi) sempre in fondo

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

47. Expires headers ~80% delle pageview hanno una CACHE inizializzata Fonte: http://developer.yahoo.com/performance/rules.html#expires

48. Expires headers Imposta la scadenza nel futuro

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

50. Configura gli Etag Dipendono dal server fisico

51. Spesso è meglio disabilitarli Apache -> FileETag none

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

53. Minimizzare JS e CSS piccolo è meglio

54. Ancora vivi?

55. Strumenti Hammer Head – tempi di caricamento

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

63. YSlow Live http://www.trenitalia.com http://www.repubblica.it

64. La velocità influenza il ranking?

65. Chissenefrega.

66. la velocità porta benefici in ogni caso

67. Una grande opportunità

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

77. GA goes async Più veloce

78. Miglior uptime

79. Più dati

80. Google Webmaster Tool

81. Immagini Creative Commons http://www.flickr.com/photos/56367751@N00/278662472/

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

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