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

2.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

3.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFMATTERS
3

4.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

5.
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

6.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 6
UNA PAGINA PESA IN
MEDIA 1.9 MB
Fonte: web.archive.org Top 1000 sites Nov.15

7.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFISMONEY
7

8.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
IL TEMPO È DENARO
8

9.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFISSEO
9

10.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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/

11.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

12.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFISUX
12

13.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

14.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
L’80% DEGLI UTENTI È DISPOSTO AD
ASPETTARE AL MASSIMO 3 SECONDI
PRIMA DI ABBANDONARE IL SITO.
Fonte: Radware Fastview 2015
14

15.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
IL 33% DEGLI UTENTI INSODDISFATTI
RACCONTERÀ LA SUA UX NEGATIVA
Fonte: Radware Fastview 2015
15

16.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
IL 60% DEGLI UTENTI MOBILE SI
ASPETTA LA STESSA USER
EXPERIENCE SU MOBILE E
DESKTOP
Fonte: Radware Fastview 201511
16

17.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

18.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
COSA SIGNIFICA VELOCE ?
18

19.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

20.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
SITO VELOCE = 1 SECONDO
20

21.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
É TUTTA COLPA DEL BACKEND ?
21

22.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
>80% DEL TEMPO DIPENDE DAL
FRONTEND
22

23.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
>80% DEL TEMPO DIPENDE DAL
FRONTEND
23

24.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
AUMENTARE LA VELOCITA’
24

25.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
CIÒ CHE NON È MISURABILE NON È
MIGLIORABILE
25
“ “
Galileo Galilei

26.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

27.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
VELOCITÁ SECONDO IL W3C
27
T.T.I. TIME TO INTERACTIVE DOCUMENT
TIP: Digita Performance.timing nella consolle

28.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
DIMINUIRE IL PESO DELLA PAGINA
28

29.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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)

30.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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’);
}
}

31.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
RIDURRE RICHIESTE HTTP
31

32.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
ESEMPIO DI RICHIESTE HTTP
32

33.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
RIDURRE RICHIESTE HTTP
• Abilitare Keep-Alive
• Combine css, js
• Css sprites
• Inclusione condizionale js/css
• Abilitare Caching
33

34.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
ABILITARE CACHING
34

35.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

36.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
AUMENTARE LA VELOCITA
PERCEPITA
36

37.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
PRIORITÀ AI CONTENUTI VISIBILI
37

38.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

39.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

40.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

41.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
LAZY LOAD IMMAGINI
<img src=‘placeholder.png’ data-src=‘original.png’ />
41

42.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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)

43.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

44.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
JPEG PROGRESSIVE
44
Immagine sfocataImmagine «bianca»

45.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
PRECARICAMENTO RISORSE
45

46.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
PRE-* PARTY
46

47.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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>

48.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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>

49.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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>

50.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
IMPLEMENTAZIONE PRE-*
50
add_action(‘wp_head’,’print_risorse_prefetch’)
function print_risorse_prefetch ()
{
echo “<link rel=‘subresource’ href=‘heroshot.png’>”;
}

51.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
IDENTIFICATE I PERCORSI DI
NAVIGAZIONE ABITUALI CON
GOOGLE ANALYTICS
51

52.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
COME IMPLEMENTARE (QUASI) TUTTO?
52

53.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
W3 TOTAL CACHE
53

54.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
• 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/

55.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 55
‘
“THE FASTEST BYTE IS A BYTE NOT SENT
Ilya Gregorik
Web Performance Engineer @ Google
“

56.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
DOMANDE?
56

57.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

58.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
E IL BACKEND?
58

59.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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)

60.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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

61.
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
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