SlideShare a Scribd company logo
Web Performance  Optimization Alessandro Martin [email_address] www.thinkpragmatic.net
Agenda ,[object Object]
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: ,[object Object]
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
[object Object],è qui che dobbiamo lavorare..
Buone notizie ,[object Object]
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 ,[object Object]
Ogni richiesta HTTP occupa  tempo
M eno richieste -> più  velocità Browser Server
Riduci le richieste HTTP ,[object Object]
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;)) ?>
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> ,[object Object]
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 ,[object Object]
Metti gli script in fondo
Metti gli script in fondo ,[object Object],sempre in fondo
Expire headers cache Server Browser   3 4 Browser Server Expires:Thu, 15 Apr 2019 1 2
Expires headers ,[object Object]
Expires headers ,[object Object]
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 ,[object Object]
Spesso  è meglio  disabilitarli ,[object Object]

More Related Content

Similar to Web Performance Optimization

Pycon Jungle
Pycon JunglePycon Jungle
Pycon Jungle
guest6b08a5
 
Yagwto
YagwtoYagwto
JAMP DAY 2010 - ROMA (3)
JAMP DAY 2010 - ROMA (3)JAMP DAY 2010 - ROMA (3)
JAMP DAY 2010 - ROMA (3)jampslide
 
Programmare Google Maps con Javascript
Programmare Google Maps con JavascriptProgrammare Google Maps con Javascript
Programmare Google Maps con Javascript
extrategy
 
Js intro
Js introJs intro
Oo Javascript
Oo JavascriptOo Javascript
Oo Javascript
maraexception
 
Django: utilizzo avanzato e nuove funzionalità
Django: utilizzo avanzato e nuove funzionalitàDjango: utilizzo avanzato e nuove funzionalità
Django: utilizzo avanzato e nuove funzionalità
skam
 
Web Application Insecurity Uncensored
Web Application Insecurity UncensoredWeb Application Insecurity Uncensored
Web Application Insecurity Uncensored
jekil
 
Presentazione wicket
Presentazione wicketPresentazione wicket
Presentazione wicket
Andrea Del Bene
 
Abusing HTML 5 Client-side Storage
Abusing HTML 5 Client-side StorageAbusing HTML 5 Client-side Storage
Abusing HTML 5 Client-side Storageameft
 
Introduzione a jQuery
Introduzione a jQueryIntroduzione a jQuery
Introduzione a jQuerySandro Marcon
 
Introduzione ad angular 7/8
Introduzione ad angular 7/8Introduzione ad angular 7/8
Introduzione ad angular 7/8
Valerio Radice
 
Write less do more...with jQuery
Write less do more...with jQueryWrite less do more...with jQuery
Write less do more...with jQuery
XeDotNet
 
April 2010 - Seam unifies JEE5
April 2010 - Seam unifies JEE5April 2010 - Seam unifies JEE5
April 2010 - Seam unifies JEE5JBug Italy
 
Seam unifies Java EE by Massimiliano Ciccazzo
Seam unifies Java EE by Massimiliano CiccazzoSeam unifies Java EE by Massimiliano Ciccazzo
Seam unifies Java EE by Massimiliano Ciccazzo
Java User Group Roma
 

Similar to Web Performance Optimization (20)

Pycon Jungle
Pycon JunglePycon Jungle
Pycon Jungle
 
Yagwto
YagwtoYagwto
Yagwto
 
JAMP DAY 2010 - ROMA (3)
JAMP DAY 2010 - ROMA (3)JAMP DAY 2010 - ROMA (3)
JAMP DAY 2010 - ROMA (3)
 
Programmare Google Maps con Javascript
Programmare Google Maps con JavascriptProgrammare Google Maps con Javascript
Programmare Google Maps con Javascript
 
Js intro
Js introJs intro
Js intro
 
eZ publish - Extension
eZ publish - ExtensioneZ publish - Extension
eZ publish - Extension
 
Oai Data Adapter
Oai Data AdapterOai Data Adapter
Oai Data Adapter
 
Oo Javascript
Oo JavascriptOo Javascript
Oo Javascript
 
Django: utilizzo avanzato e nuove funzionalità
Django: utilizzo avanzato e nuove funzionalitàDjango: utilizzo avanzato e nuove funzionalità
Django: utilizzo avanzato e nuove funzionalità
 
Wpo extended
Wpo extendedWpo extended
Wpo extended
 
Web Application Insecurity Uncensored
Web Application Insecurity UncensoredWeb Application Insecurity Uncensored
Web Application Insecurity Uncensored
 
Dojo nuovo look alle vostre applicazioni web Domino
Dojo nuovo look alle vostre applicazioni web DominoDojo nuovo look alle vostre applicazioni web Domino
Dojo nuovo look alle vostre applicazioni web Domino
 
Presentazione wicket
Presentazione wicketPresentazione wicket
Presentazione wicket
 
Abusing HTML 5 Client-side Storage
Abusing HTML 5 Client-side StorageAbusing HTML 5 Client-side Storage
Abusing HTML 5 Client-side Storage
 
Introduzione a jQuery
Introduzione a jQueryIntroduzione a jQuery
Introduzione a jQuery
 
Dal Click Al Web Server
Dal Click Al Web ServerDal Click Al Web Server
Dal Click Al Web Server
 
Introduzione ad angular 7/8
Introduzione ad angular 7/8Introduzione ad angular 7/8
Introduzione ad angular 7/8
 
Write less do more...with jQuery
Write less do more...with jQueryWrite less do more...with jQuery
Write less do more...with jQuery
 
April 2010 - Seam unifies JEE5
April 2010 - Seam unifies JEE5April 2010 - Seam unifies JEE5
April 2010 - Seam unifies JEE5
 
Seam unifies Java EE by Massimiliano Ciccazzo
Seam unifies Java EE by Massimiliano CiccazzoSeam unifies Java EE by Massimiliano Ciccazzo
Seam unifies Java EE by Massimiliano Ciccazzo
 

More from Alessandro Martin

Form Analytics & Optimization
Form Analytics & OptimizationForm Analytics & Optimization
Form Analytics & Optimization
Alessandro Martin
 
Conversion Optimization Tools
Conversion Optimization ToolsConversion Optimization Tools
Conversion Optimization Tools
Alessandro Martin
 
CRO & B2B: A Love Story
CRO & B2B: A Love StoryCRO & B2B: A Love Story
CRO & B2B: A Love Story
Alessandro Martin
 
KISS Your SEO
KISS Your SEOKISS Your SEO
KISS Your SEO
Alessandro Martin
 
SEO Video
SEO VideoSEO Video
Gestione del crawling e indicizzazione
Gestione del crawling e indicizzazioneGestione del crawling e indicizzazione
Gestione del crawling e indicizzazione
Alessandro Martin
 

More from Alessandro Martin (6)

Form Analytics & Optimization
Form Analytics & OptimizationForm Analytics & Optimization
Form Analytics & Optimization
 
Conversion Optimization Tools
Conversion Optimization ToolsConversion Optimization Tools
Conversion Optimization Tools
 
CRO & B2B: A Love Story
CRO & B2B: A Love StoryCRO & B2B: A Love Story
CRO & B2B: A Love Story
 
KISS Your SEO
KISS Your SEOKISS Your SEO
KISS Your SEO
 
SEO Video
SEO VideoSEO Video
SEO Video
 
Gestione del crawling e indicizzazione
Gestione del crawling e indicizzazioneGestione del crawling e indicizzazione
Gestione del crawling e indicizzazione
 

Web Performance Optimization

Editor's Notes

  1. Per rispondere a questa domanda vediamo alcuni dati resi pubblici da alcuni grossi player alcune settimane fa
  2. 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...
  3. 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