Upload
andrea-cardinale
View
62
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Web Performance Optimization: come e perché
Citation preview
www.andrea-cardinale.it
@CardinaleAndrea
www.webandtech.it
Andrea CardinaleWeb Developer & Web Marketing SpecialistWeb Performance Specialist
+ Andrea Cardinale
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Perchè?
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Perchè?1) Ranking
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Using site speed in web search rankinghttp://googlewebmastercentral.blogspot.it/2010/04/using-site-speed-in-web-search-ranking.htmlWebmaster Level: AllFriday, April 09, 2010 at 11:00 AM
“You may have heard that here at Google we're obsessed with speed, in our products and on the web. As part of that effort, today we're including a new signal in our search ranking algorithms: site speed.”
Posted by Amit Singhal, Google Fellow and Matt Cutts, Principal Engineer, Google Search Quality Team
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Using site speed in web search rankinghttp://googlewebmastercentral.blogspot.it/2010/04/using-site-speed-in-web-search-ranking.htmlWebmaster Level: AllFriday, April 09, 2010 at 11:00 AM
“You may have heard that here at Google we're obsessed with speed, in our products and on the web. As part of that effort, today we're including a new signal in our search ranking algorithms: site speed.”
Posted by Amit Singhal, Google Fellow and Matt Cutts, Principal Engineer, Google Search Quality Team
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Perchè?1) Ranking
2) Conversioni
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Tasso di abbandono
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Ricerche / Analisi / Studi
Condotte da grandi aziende
(anche se un po' vecchiotte restano valide)
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Ricerche / Analisi / StudiBingUna pagina di 2 secondi più lenta provoca un calo del 4,3% dei ricavi/utente.
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Ricerche / Analisi / StudiGoogle400 millisecondi di ritardo causa un calo dello 0,59% nelle ricerche/utente.
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Ricerche / Analisi / StudiYahoo400 millisecondi di rallentamento provocano un calo del 5-9% del traffico.
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Ricerche / Analisi / StudiShopzillaVelocizzare il sito di 5 secondi ha aumentato il tasso di conversione del 7-12%, raddoppiato il numero di sessioni di search engine marketing, ed ha dimezzato il numero di server necessari.
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Ricerche / Analisi / StudiMozillaLa diminuizione di 2,2 secondi del caricamento delle loro landing pages ha aumentato le conversioni di download del 15,4%, ovvero 60 milioni di download di Firefox in più all'anno.
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Ricerche / Analisi / StudiNetflixLa sola adozione di un fattore di ottimizzazione, la compressione gzip, ha determina un aumento di velocità del 13-25% e ridotto il traffico di rete in uscita del 50%.
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Fonte: http://www.watchingwebsites.com
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Fonte: http://www.watchingwebsites.com
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Fonte: http://www.watchingwebsites.com
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Fonte: http://www.watchingwebsites.com
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Perchè?1) Ranking
2) Conversioni
3) Mobile
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Fonte: Human Highway
● 2012 => 4%
● 2013 => 10%
● crescita a tripla cifra(+165% anno su anno)
e-Shopping
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Fonte: What Users Want from Mobile
● 74% degli utenti abbandona dopo aver atteso il caricamento per cinque secondi
● Il 46% non ritornerà in un sito lento
● 71% degli utenti mobile si aspettano che sul proprio smartphone i siti web siano veloci almeno quanto lo sono sul proprio PC/Notebook
Performance
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Perchè?"10 Golden Rules for Successful Apps" by Fred WilsonFonte: http://blog.apps-builder.com/10-golden-rules-for-successful-apps/
1. Speed
"Speed is more than a feature.It’s the most important feature."
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
I tempi di caricamento dipendono per almeno
80%dal front-end
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Diminuire il numero di richieste
Averlo più piccolo (il tempo di ogni richiesta)
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
PageSpeedhttps://developers.google.com/speed/pagespeed/
Yahoo! YSlowhttp://developer.yahoo.com/yslow/
WebPagetesthttp://www.webpagetest.org/
GTmetrixhttp://gtmetrix.com/
Pingdomhttps://www.pingdom.com/
Akamai's Mobitesthttp://mobitest.akamai.com/m/index.cgi
Which loads faster?http://whichloadsfaster.com/
Load Impacthttp://loadimpact.com/
Speedoohttp://www.giorgiotave.it/speedoo/
WebPagetest
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Unire più files CSS / JS
Minori richieste al serverMinor tempo di latenza
primo.css + secondo.css + terzo.css unico.cssprimo.js + secondo.js + terzo.js unico.js
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Diminuire il peso dei CSS / JS
Riduzione download dati
Esempio: jQuery 1.8.3
Development version: 247KBMinified version: 93,6KB -62%
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Prima (16 richieste) Dopo (2 richieste)
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Diminuire il peso delle risorse
Riduzione download datiEsempio: jQuery 1.8.3
Development version: 247KBMinified version: 93,6KBGzipped version: 32KB -87%
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Evitare continui downloadsdella stessa risorsa
Minori richieste al server
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Sfruttiamo la cache del browser
Risorse statiche:Implementare una policy "Never expire" impostando una data molto lontana (es.: 1 anno)
Risorse dinamiche:Utilizzare una data appropriata per il Cache-Control header e utilizzare il Last-Modified header per segnalare un'eventuale update della risorsa
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Esempio tramite .htaccess<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType text/html A3600</IfModule>
<FilesMatch "\.(css|js|CSS|JS)$"> <IfModule mod_headers.c> Header set Pragma "public" Header set Cache-Control "public, must-revalidate, proxy-revalidate" </IfModule></FilesMatch>
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
First View(16.176s)
19 richieste
Repeat View(0.543s)
4 richieste
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Il browser e il server web riutilizzanola stessa connessione per trasferire i files
● Riduce la latenza dei trasferimenti HTTP
● Riduce l'utilizzo della CPU
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Cookie-less domain
Parallelize downloads across hostnames
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
www.miosito.itHTML + componenti dinamici
static1.miosito.it static2.miosito.itcomponenti statici (img, css, js)
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
● Consente di massimizzare downloads paralleli
● Massimo 2/4 domini altrimenti si ha una penalizzazione DNS lookup
● Evitiamo il trasferimento di inutili dati relativi ai cookies che non utilizziamo
● Esempi: Yahoo! → yimg.com YouTube → ytimg.com Amazon → images-amazon.com
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
<link rel="dns-prefetch" href="//fakecdn.domain.com">
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
diminuire i tempi di latenza
diminuire il carico di lavoro del server
CloudFronthttp://aws.amazon.com/cloudfront/
CloudFlarehttps://it.cloudflare.com/
Akamaihttp://www.akamai.com/
MaxCDNhttp://www.maxcdn.com/
Imgixhttp://www.imgix.com/
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Un'unica immagine per n immagini
Minori richieste al web server
Es.: Google CSS Sprite
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
offrire immagini non scalate
attributi width e height del tag img
corrispondenti alle dimensioni dell'immagine
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Ridurre la dimensione delle immagini
● JPEG progressive
● WebP
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
JPEG non ottimizzata
331.2KB
Progressive JPEG
306.6KB
-8%
WebP220.7KB
-33.3%
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
nuovo tool
www.reimgize.com
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Lazy loading
Non carichiamo l'immagine a priorima solo solo se è visibile
Aumento velocià percepitaEvitiamo richieste inutili
Risparmiamo banda
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Lazy loading
Non carichiamo l'immagine a priorima solo solo se è visibile
Aumento velocià percepitaEvitiamo richieste inutili
Risparmiamo banda
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Lazy loading
da 18 richieste (384KB) a 9 richieste (142KB)
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Single Point Of Failure
Esempiby Steve Souders
http://stevesouders.com/tests/spof/slow-script.php?t=1368886996
La causa principalescript esterni
Altre cause:fogli di stile @font-face inline
Fogli di stile con @font-face Script seguito da @font-face
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Single Point Of Failure
Finche lo script non viene caricato
la pagina mostrerà una schermata bianca
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Script esterni
Facebook widgetTwitter widget
Advertising scripts
altri widgets altri scripts
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Asynchronous / Deferprima
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
Asynchronous / Defer
dopo
Blog : www.andrea-cardinale.itE-mail : [email protected]
Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale
Andrea Cardinale
● modulo per Apache● permette l’ottimizzazione automatica di pagine web● Comprende le ultime tecniche di ottimizzazione web● 40 filtri di ottimizzazione configurabili● Possibilità di convertire le immagini in webP
Ottima soluzione per ottimizzarevelocemente e senza agire sul codice
siti già realizzati osu cui è difficile applicare soluzioni custom
www.andrea-cardinale.it
@CardinaleAndrea
www.webandtech.it
Andrea CardinaleWeb Developer & Web Marketing SpecialistWeb Performance Specialist
+ Andrea Cardinale