wpday 2015 - wordpress performance optimization - pordenone - 13 novembre 2015
TRANSCRIPT
![Page 1: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/1.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
W.P.O. WORDPRESS PERFORMANCE
OPTIMIZATION
1
Andrea Cardinali – T.C. Informatica
![Page 2: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/2.jpg)
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
![Page 3: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/3.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFMATTERS
3
![Page 4: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/4.jpg)
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
![Page 5: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/5.jpg)
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
![Page 6: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/6.jpg)
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
![Page 7: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/7.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFISMONEY
7
![Page 8: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/8.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
IL TEMPO È DENARO
8
![Page 9: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/9.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFISSEO
9
![Page 10: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/10.jpg)
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/
![Page 11: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/11.jpg)
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
![Page 12: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/12.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFISUX
12
![Page 13: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/13.jpg)
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
![Page 14: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/14.jpg)
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
![Page 15: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/15.jpg)
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
![Page 16: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/16.jpg)
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
![Page 17: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/17.jpg)
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
![Page 18: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/18.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
COSA SIGNIFICA VELOCE ?
18
![Page 19: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/19.jpg)
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
![Page 20: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/20.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
SITO VELOCE = 1 SECONDO
20
![Page 21: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/21.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
É TUTTA COLPA DEL BACKEND ?
21
![Page 22: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/22.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
>80% DEL TEMPO DIPENDE DAL FRONTEND
22
![Page 23: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/23.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
>80% DEL TEMPO DIPENDE DAL FRONTEND
23
![Page 24: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/24.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
AUMENTARE LA VELOCITA’
24
![Page 25: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/25.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
CIÒ CHE NON È MISURABILE NON È MIGLIORABILE
25
“ “
Galileo Galilei
![Page 26: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/26.jpg)
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
![Page 27: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/27.jpg)
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
![Page 28: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/28.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
DIMINUIRE IL PESO DELLA PAGINA
28
![Page 29: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/29.jpg)
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)
![Page 30: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/30.jpg)
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’);
}
}
![Page 31: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/31.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
RIDURRE RICHIESTE HTTP
31
![Page 32: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/32.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
ESEMPIO DI RICHIESTE HTTP
32
![Page 33: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/33.jpg)
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
![Page 34: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/34.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
ABILITARE CACHING
34
![Page 35: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/35.jpg)
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
![Page 36: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/36.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
AUMENTARE LA VELOCITA PERCEPITA
36
![Page 37: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/37.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
PRIORITÀ AI CONTENUTI VISIBILI
37
![Page 38: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/38.jpg)
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
![Page 39: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/39.jpg)
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
![Page 40: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/40.jpg)
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
![Page 41: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/41.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
LAZY LOAD IMMAGINI
<img src=‘placeholder.png’ data-src=‘original.png’ />
41
![Page 42: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/42.jpg)
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)
![Page 43: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/43.jpg)
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
![Page 44: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/44.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
JPEG PROGRESSIVE
44
Immagine sfocata Immagine «bianca»
![Page 45: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/45.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
PRECARICAMENTO RISORSE
45
![Page 46: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/46.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
PRE-* PARTY
46
![Page 47: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/47.jpg)
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>
![Page 48: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/48.jpg)
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>
![Page 49: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/49.jpg)
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>
![Page 50: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/50.jpg)
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’>”;
}
![Page 51: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/51.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
IDENTIFICATE I PERCORSI DI NAVIGAZIONE ABITUALI CON
GOOGLE ANALYTICS
51
![Page 52: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/52.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
COME IMPLEMENTARE (QUASI) TUTTO?
52
![Page 53: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/53.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
W3 TOTAL CACHE
53
![Page 54: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/54.jpg)
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/
![Page 55: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/55.jpg)
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
“
![Page 56: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/56.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
DOMANDE?
56
![Page 57: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/57.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
GRAZIE
E-mail:[email protected]:@andreacardinali Linkedin: Andrea Cardinali Slideshare: http://www.slideshare.net/andreacardinali
LASCIATEMI UN FEEDBACK: https://joind.in/15560
57
![Page 58: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/58.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
E IL BACKEND?
58
![Page 59: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/59.jpg)
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)
![Page 60: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/60.jpg)
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
![Page 61: WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062823/5878f3f61a28ab49608b503d/html5/thumbnails/61.jpg)
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
GRAZIE
E-mail:[email protected]:@andreacardinali Linkedin: Andrea Cardinali Slideshare: http://www.slideshare.net/andreacardinali
LASCIATEMI UN FEEDBACK: https://joind.in/15560
61