50 tips su web performance optimization per siti ad alto traffico @ wpcamp bologna 2013

WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13

50 tips su Web Performance Optimization per siti ad alto traffico

di ANDREA CARDINALI

“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)

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

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

“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


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 istantanea1 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)


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

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

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

DESKTOP: <15% 1sec


DA COSA DIPENDE LA VELOCITA’?


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

Potenza dell’hardware?

Velocità del database?

Velocità del codice?



NO



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



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 http3. Parallelizzare il download4. Caching5. Lazy Loading (principalmente immagini)6. Ritardare l’esecuzione degli script non fondamentali (es. social buttons)



ELABORAZIONE PAGINA HTML



ANALISI PERFORMANCEMetrica 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/

http://www.minifycss.com/css-compressor/



http://refresh-sf.com/yui/

http://refresh-sf.com/yui/

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




Load time 3,60 sec

Peso 546kb


Diminuito # richieste



PARALLELIZZARE DOWNLOADCSS 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 footerif(is_page()){wp_enqueue_script(‘myscript’);}

}



PARALLELIZZARE DOWNLOAD - 2• Utilizzare domini diversi• Utilizzare librerie ospitate su domini esterni• Utilizzare Fake CDN [link a post]

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/jquery/1.8.3/jquery.min.js',null,null,true);}

Non utilizzare più di 3-4 domini differenti

Browser N° max per host *

IE <8 2

IE 8 -9 6

IE 10 8

Chrome 6

FF 6

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

ATTENZIONE: numero max di connessioni /host

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]

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

ABILITARE SU APACHEInserire nel .htaccessMeglio se in httpd.conf (più performante)




Load time 2,9 sec

Peso 228kb


Metrica Valore

Load time -17 %

Peso -43 %



ABILITARE KeepAlive

KeepAlive OnKeepAliveTimeout 5MaxKeepAliveRequests 30

• 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)



ANALISI PERFORMANCE -KEEPALIVEMetrica Valore

Load time 2,79 sec

Peso 228kb


Metrica Valore

Load time -9,6 %

Peso -



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

DOMINI COOKIELESS PER RISORSE STATICHE

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



CACHING DELLE RISORSE STATICHEVANTAGGI• 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

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

wp_enqueue_script (‘myscript’,$path.’script.js’);

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

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

ERRATO (NON CORRETTO):

CORRETTO:



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 ETagFileETag None#caching per un meseHeader 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 readySoluzioni:• 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

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

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

TRANSIENT API

WP_Object_Cache

wp_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

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

http://codex.wordpress.org/Transients_API

http://codex.wordpress.org/Transients_API

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



APC (ADVANCED PHP CACHING)

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

• 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://wordpress.org/extend/plugins/apc/









APC

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

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



APC (BENCHMARK)

1

23

Configurazione Req/sec. Aumento

Default (Apache + php) 3,37 -

APC On (solo opcode) 8 +237%

APC + Object Cache 65 +2000%



ANALISI PERFORMANCE - APCMetrica 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: 396ms

APC OFF: 902 ms

-57 %



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.htmlhttp://codex.wordpress.org/Nginx

http://nginx.com/cs/nginx-automattic.html



http://codex.wordpress.org/Nginx

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)

http://www.loadimpact.com/

http://www.gtmetrix.com/

http://tools.pingdom.com/

WEB PERFORMANCE OPTIMIZATION – NEW RELIC


• Installazione in 5 minuti• Real time• Pagine più lente• Query più dispendiose• Storico

http://newrelic.com

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/

http://www.cloudflare.com/

WEB PERFORMANCE OPTIMIZATION – MOD PAGE SPEED


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

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

https://developers.google.com/speed/pagespeed/mod?hl=it

https://developers.google.com/speed/pagespeed/mod?hl=it

http://seoblog.giorgiotave.it/sito-veloce-mod-pagespeed/2770

http://seoblog.giorgiotave.it/sito-veloce-mod-pagespeed/2770



DOMANDE?


RELATORE

Andrea Cardinali

Web: www.andreacardinali.it

Twitter: @andreacardinaliGoogle + : Andrea Cardinali

GRAZIE!

http://www.andreacardinali.it/

https://twitter.com/andreacardinali

https://twitter.com/andreacardinali

50 tips su web performance optimization per siti ad alto traffico @ wpcamp bologna 2013

Technology

web performanceoptimization

site speed

stanfordwordcamp bologna

if it is fast and ugly

ourproducts and on the

secondi risposta istantanea

tempi di risposta

that effort