WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015

WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
W.P.O.
WORDPRESS PERFORMANCE
OPTIMIZATION
1
Andrea Cardinali – T.C. Informatica

DI COSA PARLERO’
• Perché è importante avere un sito veloce
• Cosa vuol dire veloce
• Da cosa dipende la velocità del sito
• Come velocizzare un sito
2

#PERFMATTERS
3

UTENTI SEMPRE PIÚ MOBILE
• Utente in movimento
• Utente distratto da quello che accade intorno a lui
• Copertura 3G ancora inaffidabile
• Piani tariffari a volume
4

WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 5
IN ITALIA LA VELOCITÀ DI CONNESSIONE
MEDIA È COMPRESA TRA I 4 e i 10 Mbps
Fonte: Akamai - State of the Internet Report Q2 - 2015

UNA PAGINA PESA IN
MEDIA 1.9 MB
Fonte: web.archive.org Top 1000 sites Nov.15

#PERFISMONEY
7

IL TEMPO È DENARO
8

#PERFISSEO
9

SEO – VELOCITÁ FATTORE DI RANKING
• Il tempo di caricamento della pagina è un fattore di
ranking
• Un sito eccessivamente lento avrà un rank
peggiore rispetto ad un altro più veloce
• Google Adwords (che non c’entra con la SEO) tiene
conto della velocità nell’assegnare il QUALITY
SCORE
• Il successo del mdr dipende dalla qualità dei
risultati forniti
10
http://www.lowlevel.it/i-siti-veloci-hanno-ranking-migliori-macche-e-una-bufala/

SEO - CRAWL BUDGET
• Lo spider dedica ad ogni sito un tempo prefissato
per scansionare ed indicizzare le pagine (c.d. crawl
budget).
• A parità di tempo un sito veloce permette al crawler
di scansionare più pagine
• Un’indicizzazione frequente e completa incide
positivamente sul posizionamento
• I vostri clienti sono gli utenti e non i crawlers
11

#PERFISUX
12

UN RITARDO DI 500ms NEL CARICAMENTO
DELLA PAGINA HA COMPORTATO UNA
MAGGIOR FRUSTRAZIONE DELL'UTENTE,
MINOR COINVOLGIMENTO, IMPATTO
EMOZIONALE NEGATIVO SUL BRAND
Fonte: Radware – Mobile Web Stress Nov. 2013
13

L’80% DEGLI UTENTI È DISPOSTO AD
ASPETTARE AL MASSIMO 3 SECONDI
PRIMA DI ABBANDONARE IL SITO.
Fonte: Radware Fastview 2015
14

IL 33% DEGLI UTENTI INSODDISFATTI
RACCONTERÀ LA SUA UX NEGATIVA
15

IL 60% DEGLI UTENTI MOBILE SI
ASPETTA LA STESSA USER
EXPERIENCE SU MOBILE E
DESKTOP
16

UTENTI ED ESPERIENZA DI NAVIGAZIONE
• Il successo del sito e del brand dipendono
dall’esperienza di navigazione vissuta
dall’utente
• Le conversioni e il bounce rate sono
influenzati significativamente dalla UX
• Se la UX è negativa, voi ( o il vostro cliente)
state perdendo soldi
17

COSA SIGNIFICA VELOCE ?
18

LA RISPOSTA E’ NELLA PSICOLOGIA UMANA
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.
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.
19
Fonte: Jackob Nielsen http://www.nngroup.com/articles/website-response-times/1

SITO VELOCE = 1 SECONDO
20

É TUTTA COLPA DEL BACKEND ?
21

>80% DEL TEMPO DIPENDE DAL
FRONTEND
22

>80% DEL TEMPO DIPENDE DAL
FRONTEND
23

AUMENTARE LA VELOCITA’
24

CIÒ CHE NON È MISURABILE NON È
MIGLIORABILE
25
“ “
Galileo Galilei

TOOLS PER MISURARE LA VELOCITÁ
• GT METRIX
• WEBPAGETEST.ORG
• TOOLS.PINGDOM.COM
R.U.M. (REAL USER MONITORING)
GOOGLE ANALYTICS
APP DYNAMICS
NEW RELIC
26

VELOCITÁ SECONDO IL W3C
27
T.T.I. TIME TO INTERACTIVE DOCUMENT
TIP: Digita Performance.timing nella consolle

DIMINUIRE IL PESO DELLA PAGINA
28

DIMINUIRE IL PESO DELLA PAGINA
• Ridurre css inutilizzato (Framework css)
• Minify html, css, js
• Compressione Gzip per risorse statiche
 Con risorse testuali risparmio fino al 70%
• Inclusione condizionale dei css/js necessari
29
RISORSE UTILI:
http://www.minifycss.com/css-compressor/
http://refresh-sf.com/yui/ (YUI Compressor)
http://jscompress.com/
https://github.com/addyosmani/critical (rimuove CSS inutilizzato)

INCLUSIONE CONDIZIONALE CSS/JS
30
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’);
if(is_page())
{
wp_enqueue_script(‘myscript’);
}
}

RIDURRE RICHIESTE HTTP
31

ESEMPIO DI RICHIESTE HTTP
32

RIDURRE RICHIESTE HTTP
• Abilitare Keep-Alive
• Combine css, js
• Css sprites
• Inclusione condizionale js/css
• Abilitare Caching
33

ABILITARE CACHING
34

ABILITARE CACHING
• Il caching permette al browser di scaricare solo i
files che non ha in cache.
• Caricamenti successivi della pagina ( o del sito)
molto più veloci
• Si risparmia banda
35

AUMENTARE LA VELOCITA
PERCEPITA
36

PRIORITÀ AI CONTENUTI VISIBILI
37

AUMENTARE LA VELOCITÁ PERCEPITA
38
• Dare priorità ai contenuti above the fold (visibili):
 Ordine di caricamento di css/js
 lazy load di immagini e risorse
 critical render path
• JPEG progressive
• Caching + precaricamento
 DNS prefetch (preresolve)
 Rel=«subresource»
 Prefetching delle risorse
 Prerendering delle risorse

ORDINE DI CARICAMENTO CSS/JS
39
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 in serie ed eseguiti

JS DEFER / JS ASINCRONI
40
function add_async_defer_forscript($url)
{
if (strpos($url, '#asyncload')===false)
return str_replace('#asyncload', '', $url)." async=‘async’";
else if (strpos($url, '#deferload')===true)
return str_replace('#deferload', '', $url)." defer=‘defer’";
else if (is_admin())
return str_replace(['#asyncload‘,’#deferload’], '', $url);
else
return $url;
}
add_filter('clean_url', 'add_async_defer_forscript', 11, 1);
http://caniuse.com/#search=defer
http://caniuse.com/#search=async

LAZY LOAD IMMAGINI
<img src=‘placeholder.png’ data-src=‘original.png’ />
41

CRITICAL RENDER PATH
42
Il CRITICAL RENDER PATH è costituito dal codice e
dalle risorse necessarie a visualizzare la parte di
contenuto visibile (above the fold)

CRITICAL RENDER PATH
43
• diminuire il Time To Interactive Document
• dare priorità ai contenuti visibili
• Il css necessario al rendering della parte «above
the fold» viene incluso inline
• Anche il js «critico» potrebbe diventare inline
https://github.com/addyosmani/critical

JPEG PROGRESSIVE
44
Immagine sfocataImmagine «bianca»

PRECARICAMENTO RISORSE
45

PRE-* PARTY
46

PREFETCHING
47
Il browser scarica la risorsa in background DOPO aver
scaricato tutto il resto (download differito)
PRO
• Utile se la risorsa verrà utilizzata nelle pageviews
successive ( a patto che la risorsa sia cachabile)
CONTRO
• Download (potenzialmente) inutile
http://caniuse.com/#search=prefetch
//…
<link rel=‘prefetch’ href=‘risorsa_cachabile.png’>
</head>

PRERENDER
48
Il browser carica la pagina in un tab nascosto che
viene scaricata e renderizzata in background
PRO
• Caricamento istantaneo (in caso di visita)
CONTRO
• Potenziale spreco delle risorse hw
http://caniuse.com/#search=pre-render
//…
<link rel=‘prerender’ href=‘/secondapagina/’>
</head>

REL=‘SUBRESOURCE’
49
• Il browser scarica la risorsa IMMEDIATAMENTE
(download prioritario)
• Utile per risorse fondamentali all’interno della pagina
PRO
• Download immediato (early loading)
CONTRO
• Supporto solo da parte di Chrome attualmente
//…
<link rel=‘subresource’ href=‘heroshot.png’>
</head>

IMPLEMENTAZIONE PRE-*
50
add_action(‘wp_head’,’print_risorse_prefetch’)
function print_risorse_prefetch ()
{
echo “<link rel=‘subresource’ href=‘heroshot.png’>”;
}

IDENTIFICATE I PERCORSI DI
NAVIGAZIONE ABITUALI CON
GOOGLE ANALYTICS
51

COME IMPLEMENTARE (QUASI) TUTTO?
52

W3 TOTAL CACHE
53

• Minify + combine
• Inclusione condizionale js/css
• Caching per risorse statiche
• Page cache, database cache, object cache
• Supporto CDN
W3 TOTAL CACHE
54
https://wordpress.org/plugins/w3-total-cache/

‘
“THE FASTEST BYTE IS A BYTE NOT SENT
Ilya Gregorik
Web Performance Engineer @ Google
“

DOMANDE?
56

GRAZIE
E-mail:andrea@tcinformatica.net
Twitter:@andreacardinali
Linkedin: Andrea Cardinali
Slideshare: http://www.slideshare.net/andreacardinali
LASCIATEMI UN FEEDBACK:
https://joind.in/15560
57

E IL BACKEND?
58

PERFORMANCE TUNING
59
• Migliorare utilizzo delle risorse hardware
 Utilizzo di un webserver efficiente
• Riduci l’accesso al disco
 Caching in memoria
 Caching headers
 CDN
• Evitare l’esecuzione di operazioni cpu intensive
 No compressione onfly (meglio gzip static)

PERFORMANCE TUNING
60
• Utilizzare php 5.6.15 e OpCache
• Utilizzo di stack LEMP invece di LAMP
 Nginx può anche essere utilizzato inizialmente come reverse-proxy
per le risorse statiche
• Utilizzo di Apache 2.4 + mpm_event
• Caching in memoria dei dati dell’utente (APCU o
MEMCACHED)
• Utilizzo protocollo HTTP/2.0
 (Apache 2.4.15+ ed Nginx 1.9.5+)
 La maggior parte dei browser richiede https

GRAZIE
E-mail:andrea@tcinformatica.net
Twitter:@andreacardinali
Linkedin: Andrea Cardinali
Slideshare: http://www.slideshare.net/andreacardinali
LASCIATEMI UN FEEDBACK:
https://joind.in/15560
61

WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015

More Related Content

What's hot (20)

Similar to WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015 (20)

More from Andrea Cardinali (11)

WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015

Editor's Notes