Web Performance Optimization

Un sito web più veloce influisce positivamente sull'esperienza
dell'utente e sulle performance sui motori di ricerca. In questa
sessione vedremo come analizzare e migliorare i tempi di caricamento
delle pagine facendo riferimento a strumenti specializzati e best
practice per ottenere subito i migliori risultati con uno sforzo
contenuto.

Transcript

1. Web Performance Optimization Alessandro Martin alessandro.martin@yahoo.it www.thinkpragmatic.net
2. 2 Agenda  La velocità è importante?  Da cosa dipende?  Best practice  Analisi dal vivo  Conclusioni  → Novità
3. La velocità è importante?
4. 4 Google
5. 5 Bing
6. 6 e noi comuni mortali?
7. 7 Campione di siti editoriali Fonte: http://www.watchingwebsites.com
8. 8 Campione di siti ecommerce Fonte: http://www.watchingwebsites.com
9. 9 Convinti?
10. 10 Da cosa dipende la velocità di un sito?
11. 11 Ha il maggiore impatto:  Velocità del server?  Velocità codice?  Velocità del database?
12. 12 no.
13. 13 2 o 3 cose che sapete Browser Server GET /pippo.html GET /style.css GET /script.js GET /img.jpg pippo.html style.css script.js img.jpg
14. 14 Fonte: http://yuiblog.com backend frontend
15. 15 80% del tempo di caricamente percepito dall'utente è speso nel frontend è qui che dobbiamo lavorare..
16. 16 Buone notizie  Ottimizzare il frontend è facile  Risultati certi  Molti tool  Best practice ben definite...
18. 18 Riduci le Richieste HTTP Usa un Content Delivery Network Sfrutta Gzip Metti gli Script alla Fine Aggiungi un Expires Header Minimizza Javascript e CSS
19. 19 Riduci le richieste HTTP  1 componente = 1 richiesta HTTP  Ogni richiesta HTTP occupa tempo  Meno richieste → più velocità Browser Server
20. 20 Riduci le richieste HTTP  JS e CSS combinati  Image map  Immagini inline (data URI) <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//U b//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hL njM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJ jPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14" alt="embedded folder icon"> <?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>
21. 21 Riduci le richieste HTTP CSS sprites
22. 22 Riduci le richieste HTTP CSS sprites
23. 23 Riduci le richieste HTTP CSS sprites
24. 24 Riduci le richieste HTTP CSS sprites
25. 25 Content Delivery Network CDN server browser
26. 26 Content Delivery Network <script src="http://www.google.com/jsapi"></script> <script> // Load jQuery google.load("jquery", "1"); //do some stuff... </script>  Costoso (es. Akamai)  CDN dei poveri ;-)
27. 27 Abilita Gzip Zip... Unzip... Browser Accept-econding:gzip 1 Server 2 Browser Accept-econding:gzip 4 Server Content-econding:gzip 3
28. 28 Abilita Gzip 90% dei browser supporta GZIP puoi zippare HTML, CSS, JS
29. 29 Metti gli script in fondo
30. 30 Metti gli script in fondo Vanno (quasi) sempre in fondo
31. 31 Expire headers Server Browser Browser Server Expires:Thu, 15 Apr 2019 1 2 3 4 cache
32. 32 Expires headers ~80% delle pageview hanno una CACHE inizializzata Fonte: http://developer.yahoo.com/performance/rules.html#expires
33. 33 Expires headers Imposta la scadenza nel futuro
34. 36 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;ret urn this}if(typeof E==="string"){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
35. 37 Minimizzare JS e CSS piccolo è meglio
36. 38 Ancora vivi?
37. 39 Strumenti  Hammer Head – tempi di caricamento  Yslow – analisi made in Yahoo!  PageSpeed – analisi made in Google  Spriteme – CSS sprites made easy  Smush – comprime le immagini  YUI Compressor – minifica JS e CSS  site-perf.com – analisi  Firebug – net panel
38. 40 YSlow Live http://www.trenitalia.com http://www.repubblica.it
39. 41 La velocità influenza il ranking?
40. 42 Chissenefrega.
41. 43 la velocità porta benefici in ogni caso
42. 44  Una grande opportunità  Poco intrusiva  Più visite  Più conversioni  Meno risorse HW  Meno banda
43. 45 Fast is a must
44. 46 Grazie. (domande?) www.thinkpragmatic.net alessandro.martin@yahoo.it
45. 47 Bonus!
46. 48 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); })();
47. 49 GA goes async  Più veloce  Miglior uptime  Più dati
48. 50 Google Webmaster Tool
49. 51 Immagini Creative Commons  http://www.flickr.com/photos/56367751@N00/278662472/  http://www.flickr.com/photos/70121902@N00/2109197876/  http://www.flickr.com/photos/bayat/12635053/