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?

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/

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

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

ATTENZIONE: numero max di connessioni /host

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

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

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

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

ERRATO (NON CORRETTO):

CORRETTO:

ABILITARE CACHING APACHE• Con Apache, necessario mod_header e mod_expires

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

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://pecl.php.net/package/APC

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

APC (BENCHMARK)

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

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

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

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

DOMANDE?

RELATORE

Andrea Cardinali

Web: www.andreacardinali.it

Twitter: @andreacardinaliGoogle + : Andrea Cardinali

GRAZIE!

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

web performanceoptimization

site speed

stanfordwordcamp bologna

if it is fast and ugly

ourproducts and on the

secondi risposta istantanea

tempi di risposta

that effort

Technology

welcome to repository stik siti khadijah - stik siti …

siti zaiton - fuzzy1

universiti putra malaysia -...

swiss bologna epfl bootstrap morning.… · swiss education...

evoluzione del traffico low cost a livello europeo e...

cbhf2 slim - siti...

siti web e-commerce mobile - spazio it · spazio it –siti...

il digital porta traffico allo store - accenture · il...

siti clipping 2011

alma mater studiorum - università di bologna in bologna,...

il digital porta traffico allo store...il digital porta...

norme uni 10439 - 2001 - requisiti illuminotecnici strade...

analisi dei servizi ecosistemici nei siti pilota - parte 2:...

wedding : fais + siti

siti nurkhasanah kalil

3. siti rohmawati

siti astycha 25014050

siti ermawati 5g

di paolantonio - siti

phototalk siti hajar1