50 tips su Web Performance Optimization per siti ad alto traffico @ WpCamp Bologna 2013

50 tips su Web Performance
Optimization per siti ad alto traffico
di ANDREA CARDINALI

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013
@WORDCAMPBOLOGNA # WPCAMPBO13

“If it is fast and ugly, they will use it
and curse you;
if it is slow, they will not use it”
David Cheriton
(Docente Univ.Stanford)

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

WEB PERFORMANCE OPTIMIZATION

PERCHE’ LA VELOCITA’ E’ IMPORTANTE?
• Migliora la User Experience
• Diminuisce il bounce rate (tasso d’abbandono)
• Aumentano le pageviews ( a parità di tempo speso sul sito)
• Aumentano le conversioni (soprattutto negli ecommerce)
• Diminuiscono i costi (hardware e banda)

Inoltre…
E’ un fattore di ranking

“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.”

Amit Singhal & Matt Cuts - 09 Aprile 2010

http://googlewebmastercentral.blogspot.it/2010/04/using-site-speed-in-web-search-ranking.html


QUANTO VELOCE?
LA RISPOSTA E’ NELLA PSICOLOGIA UMANA.
L’utente arriva sul nostro sito con un intento ben preciso.

Memoria a breve termine limitata: più aspettiamo, più il compito da eseguire risulta
difficile.
Bisogno di controllo: l’attesa e l’impossibilità di controllare la situazione genera
frustrazione e ansia.

3 LIMITI PER I TEMPI DI RISPOSTA:

0.1 secondi – risposta istantanea
1 secondo – l’utente percepisce un ritardo e sa che è dovuto al computer che sta
elaborando le informazioni e quindi il flusso dei pensieri non viene interrotto.
10 secondi – Tempo massimo per mantenere l’attenzione dell’utente. L’utente non ha il
controllo su quello che sta accadendo e inizia a crescere il senso di frustrazione.
ABBANDONO DEL SITO

Fonte: Jackob Nielsen http://www.nngroup.com/articles/website-response-times/


QUANTO VELOCE? (NEL MONDO REALE)

GLOBALE:
DESKTOP: 2,8 sec
MOBILE: 4,5 sec

ITALIA:
DESKTOP: 3,4 sec
MOBILE: 5,6 sec

DESKTOP: <15% 1sec

Fonte: http://analytics.blogspot.it/2012/04/global-site-speed-overview-how-fast-are.html


DA COSA DIPENDE LA VELOCITA’?

Potenza dell’hardware?

Velocità del database?

Velocità del codice?

http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/


NO


90 % DEL TEMPO DI CARICAMENTO
È UTILIZZATO PER LE RISORSE ESTERNE



http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/


COME VELOCIZZARE IL SITO?
1. Ridurre il peso della pagina e delle risorse che la compongono
• Minify
• Immagini ottimizzate
• Compressione gzip
2. Ridurre il n° di richieste http
3. Parallelizzare il download
4. Caching
5. Lazy Loading (principalmente immagini)
6. Ritardare l’esecuzione degli script non fondamentali (es. social buttons)



ELABORAZIONE PAGINA HTML



ANALISI PERFORMANCE
Metrica Valore
Load time 3,62 sec
Peso 560kb
N° richieste http 25



DIMINUIRE PESO DELLA PAGINA
• Minify html
• Minify js
• Minify css
• immagini ottimizzate (Yahoo smush.it)
• non scalare immagini con html

RISORSE UTILI:
http://www.minifycss.com/css-compressor/
http://refresh-sf.com/yui/ (YUI Compressor)
http://jscompress.com/



RIDURRE RICHESTE HTTP
• combine dei files
• combine intelligente
• css sprites
• utilizzare @media print invece di un foglio di stile per la stampa
• image inline (data uri)
• css3 per sfondi con gradient

ATTENZIONE: Immagini inline non supportate da <IE7



VELOCIZZARE IL RENDERING DELLA PAGINA
• Css nell’header
• Script nel footer
• Diminuire il numero di elementi del DOM
• Script eseguiti al .load() invece che al .ready().
• Lazy load Immagini
• Script che interagiscono con il DOM devono utilizzare selettori efficienti
• Script asincroni
• Regole css efficienti



ANALISI PERFORMANCE
Metrica Valore
Load time 3,60 sec
Peso 546kb

Diminuito # richieste



PARALLELIZZARE DOWNLOAD
CSS IN CIMA (NELL’HEAD)
• vengono scaricati in parallelo
• permettono al browser di eseguire più velocemente il rendering della pagina

JAVASCRIPT IN FONDO (ideale prima di </body> o comunque dopo i css)
• bloccano il rendering della pagina
• vengono scaricati ed eseguiti
• caricarli solo dove necessario

add_action(‘wp_enqueue_scripts’,’crd_registra_js’);
function crd_registra_js()
{
$path=get_template_directory_uri().'/assets/js/’;
wp_register_script(‘myscript’,‘script.min.js', array('jquery'),null, true);
//5 parametro per caricare lo script nel footer
if(is_page())
{
wp_enqueue_script(‘myscript’);
}
}



PARALLELIZZARE DOWNLOAD - 2
• Utilizzare domini diversi Browser N° max per host *
• Utilizzare librerie ospitate su domini esterni
IE <8 2
• Utilizzare Fake CDN [link a post]
IE 8 -9 6
ATTENZIONE: numero max di connessioni /host IE 10 8
Chrome 6
FF 6
Non utilizzare più di 3-4 domini differenti

add_action('wp_enqueue_scripts',’crd_inizializza_js'));

function crd_inizializza_js()
{
wp_deregister_script('jquery‘);
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/j
query/1.8.3/jquery.min.js',null,null,true);
}

Elenco completo: http://www.browserscope.org/?category=network


ABILITARE COMPRESSIONE GZIP
• Riduce notevolmente il peso della pagina (anche del 80%)
• Vantaggi maggiori sui files con contenuto testuale

Abilitare compressione su Apache: [link]

ABILITARE SU APACHE
Inserire nel .htaccess
Meglio se in httpd.conf (più performante)

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain
text/xml text/css application/x-javascript
application/javascript
</IfModule>



ANALISI PERFORMANCE
Metrica Valore
Load time 2,9 sec
Peso 228kb

Metrica Valore
Load time -17 %
Peso -43 %



ABILITARE KeepAlive
• Creare una nuova connessione http è dispendioso (tempo e risorse)
• Una singola connessione http viene utilizzata per rispondere a più richieste

Abilitare KeepAlive su Apache (httpd.conf)
KeepAlive On
KeepAliveTimeout 5
MaxKeepAliveRequests 30



ANALISI PERFORMANCE -KEEPALIVE
Metrica Valore
Load time 2,79 sec
Peso 228kb

Metrica Valore
Load time -9,6 %
Peso -



DOMINI COOKIELESS PER RISORSE STATICHE

Nel caso utilizziate una fake cdn, mpostare in wp-config il solo dominio principale.

define ('COOKIE_DOMAIN', 'www.domain.com');



CACHING DELLE RISORSE STATICHE
VANTAGGI
• Caricamenti successivi della pagina (o del sito) molto più veloci
• Si risparmia banda

-98 %



IMPOSTARE IL CACHING
• La query string nell’url della risorsa impedisce il caching

ERRATO (NON CORRETTO):
wp_enqueue_script (‘myscript’,$path.’script.js’);

<script src='/wp-content/themes/test/script.js?ver=3.5.1'></script>

CORRETTO:
wp_enqueue_script (‘myscript’,$path.’script.js’,false,null);

<script src='/wp-content/themes/test/script.js'></script>



ABILITARE CACHING APACHE
• Con Apache, necessario mod_header e mod_expires

<IfModule mod_headers.c>
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|cur)$">
Header unset ETag
FileETag None
#caching per un mese
Header set Cache-Control "max-age=2678400, public"
</FilesMatch>
</IfModule>

Se il vostro sito utilizza un solo server si possono abilitare gli ETAG



DEFER JAVASCRIPT (SOCIAL BUTTONS)

non caricarli al document ready
Soluzioni:
• setTimeout
• immagine statica sostituita all’hover dai widget (mashable.com)
• cambio viewport
• mia con getScript


SERVER TUNING



CHE COSA CAUSA IL RALLENTAMENTO?



CACHING IN WORDPRESS
TRANSIENT API
• Utile per salvare il risultato di elaborazioni lunghe (richieste http, query complesse)
• Persistente: viene salvato in wp_options come array serializzato

set_transient(‘nome_valore’, $valore, $scadenza)
get_transient (‘nome_valore’)

WP_Object_Cache
• Non persistente di default (viene eliminato alla fine del ciclo di vita della pagina)
• Diversi plugin (W3TC, APC Object Cache, WP File Cache) la rendono persistente

wp_cache_*

http://codex.wordpress.org/Transients_API http://codex.wordpress.org/Class_Reference/WP_Object_Cache


APC (ADVANCED PHP CACHING)
• Php è un linguaggio interpretato
• APC salva l’opcode in RAM
• WP supporta APC a livello di Object Cache (http://wordpress.org/extend/plugins/apc/)
• W3TC supporta APC a tutti i livelli (Db,Page,Object)

http://pecl.php.net/package/APC


APC

PARAMETRI FONDAMENTALI
• apc.enabled=1
• apc.shm_size
• apc.ttl
• apc.user_ttl

http://pecl.php.net/package/APC


APC (BENCHMARK)

1

3
2

Configurazione Req/sec. Aumento
Default (Apache + php) 3,37 -
APC On (solo opcode) 8 +237%
APC + Object Cache 65 +2000%


ANALISI PERFORMANCE - APC
Metrica Valore
Load time 1,97 sec
Peso 277kb *

Metrica Valore
Load time -7,5 %
Peso -
Response time -57%

* Il peso è aumentato perché è stata aggiunta un immagine. Ininfluente ai fini del test


CONFRONTO RESPONSE TIME

APC OFF: 902 ms

-57 %

APC OFF: 396ms



MYSQLND
• Disponibile a partire da php 5.3
• Default per php 5.4
• Ottimizzata per php (non è general purpose come mysqlibclient)
• Utilizza la il 50% in meno di memoria rispetto a php-mysql
• Su PECL c’è un estensione (mysqlnd_qc) per il caching delle query tramite apc

http://dev.mysql.com/downloads/connector/php-mysqlnd/


• Di default (ovvero senza tuning) è in grado di gestire 10k connessioni simultanee con
circa 2M di RAM (chiedete di fare lo stesso ad Apache)
• Può essere utilizzato come reverse proxy, web server o entrambi
• Utilizzato da wordpress.com, gravatar. com, cloudflare,pinterest, andreacardinali.it :)

http://nginx.com/cs/nginx-automattic.html
http://codex.wordpress.org/Nginx

WEB PERFORMANCE OPTIMIZATION – STRUMENTI BENCHMARKING

PLUGIN BROWSER
• Yslow
• Google Page Speed

SERVIZI ONLINE
• http://www.loadimpact.com (test di carico con connessione contemporanee)
• http://www.gtmetrix.com (confronta i risultati di Yslow e Google Page Speed)
• http://tools.pingdom.com

JAVASCRIPT
• Google Analytics (_trackPageSpeed)
• New Relic (RUA: Real User Monitoring: aggiunge un file js in fondo ad ogni pagina)


WEB PERFORMANCE OPTIMIZATION – NEW RELIC

• Installazione in 5 minuti
• Real time
• Pagine più lente
• Query più dispendiose
• Storico
http://newrelic.com

WEB PERFORMANCE OPTIMIZATION – CLOUD FLARE

• cdn automatico per pagine e contenuti statici con data center in 23 stati
• Dns anycast
• Threats protection
• Caching automatico
• Implementazione tutte le best practices esposte
• Combine, minify,gzip ecc..

http://www.cloudflare.com/

WEB PERFORMANCE OPTIMIZATION – MOD PAGE SPEED

• Fa tutto lui 
• Modulo x Apache ed Nginx
• 40 filtri configurabili

https://developers.google.com/speed/pagespeed/mod?hl=it
http://seoblog.giorgiotave.it/sito-veloce-mod-pagespeed/2770


DOMANDE?


RELATORE

GRAZIE!
Andrea Cardinali
Web: www.andreacardinali.it

Twitter: @andreacardinali
Google + : Andrea Cardinali


50 tips su Web Performance Optimization per siti ad alto traffico @ WpCamp Bologna 2013

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (8)

Ähnlich wie 50 tips su Web Performance Optimization per siti ad alto traffico @ WpCamp Bologna 2013

Ähnlich wie 50 tips su Web Performance Optimization per siti ad alto traffico @ WpCamp Bologna 2013 (20)

Mehr von Andrea Cardinali

Mehr von Andrea Cardinali (19)

50 tips su Web Performance Optimization per siti ad alto traffico @ WpCamp Bologna 2013