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

Agenda La velocità è importante? Da cosa dipende? Best practice Analisi dal vivo Conclusioni -> Novità

La velocità è importante?

Da cosa dipende?

Best practice

Analisi dal vivo

Conclusioni

-> Novità

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: Velocità del server ? Velocità codice ? Velocità del database ?

Velocità del server ?

Velocità codice ?

Velocità del database ?

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 Browser Server

Fonte: http://yuiblog.com backend frontend

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

Buone notizie Ottimizzare il frontend è facile Risultati certi Molti tool Best practice ben definite...

Ottimizzare il frontend è facile

Risultati certi

Molti tool

Best practice ben definite...

Riduci le Richieste HTTP Usa un Content Delivery Network Sfrutta Gzip Metti gli Script alla Fine Aggiungi un Expires Header Minimizza Javascript e CSS

Riduci le richieste HTTP 1 componente = 1 richiesta HTTP Ogni richiesta HTTP occupa tempo M eno richieste -> più velocità Browser Server

1 componente = 1 richiesta HTTP

Ogni richiesta HTTP occupa tempo

M eno richieste -> più velocità

Riduci le richieste HTTP JS e CSS combinati Image map 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;)) ?>

JS e CSS combinati

Image map

Immagini inline (data URI)

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(&quot;jquery&quot;, &quot;1&quot;) ; //do some stuff... </script> Costoso (es. Akamai) CDN dei poveri ;-)

Costoso (es. Akamai)

CDN dei poveri ;-)

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

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

Metti gli script in fondo

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

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

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

Expires headers Imposta la scadenza nel futuro

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

Configura gli Etag Dipendono dal server fisico Spesso è meglio disabilitarli Apache -> FileETag none

Dipendono dal server fisico

Spesso è meglio disabilitarli

Apache -> FileETag none

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

Minimizzare JS e CSS piccolo è meglio

Ancora vivi?

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

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

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

La velocità influenza il ranking?

Chissenefrega.

la velocità porta benefici in ogni caso

Una grande opportunità Poco intrusiva Più visite Più conversioni Meno risorse HW Meno banda

Una grande opportunità

Poco intrusiva

Più visite

Più conversioni

Meno risorse HW

Meno banda

Fast is a must

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

Bonus!

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

GA goes async Più veloce Miglior uptime Più dati

Più veloce

Miglior uptime

Più dati

Google Webmaster Tool

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/

http://www.flickr.com/photos/56367751@N00/278662472/

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

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