Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2

WordPress Performance
Optimization:
cos’è cambiato con http/2
Andrea Cardinali
T.C. Informatica
Andrea Cardinali - #wmf17 - @andreacardinali - 23 e 24 Giugno 2017 – Palacongressi di Rimini

@andreacardinali
ABOUT ME
▶ DEVELOPER & SEO
▶ C.O.O. @ T.C. INFORMATICA
▶ LAVORO CON WORDPRESS DAL 2009
▶ CO-ORGANIZER @ WORDPRESS MEETUP
ROMAGNA

@andreacardinali
DI COSA PARLERÒ
1. HTTP/2
2. HTTP/2 E WEB PERFORMANCE
3. TECNICHE DI W.P.O. OBSOLETE

VUOI VINCERE UNA
CONSULENZA SU WP e
W.P.O. ?
TWEETA CON #wmf17
CITANDO
@andreacardinali
* L’account vincitore verrà estratto al termine dello speech

HTTP/2

MAGGIO 2015

BASATO SU SPDY

SPDY AVEVA
L’OBIETTIVO DI
RIDURRE DEL
50% IL PAGE
LOAD TIME

EVOLUZIONE
DI
HTTP/1.1

HTTP/2 NON
RICHIEDE
MODIFICA AL
CODICE

HTTP/2 È
IMPLEMENTATO
DAL WEB
SERVER

IL 92% DEI
BROWSER
UTILIZZATI IN
ITA SUPPORTA
HTTP/2
Fonte: https://caniuse.com/#search=HTTP2

HTTP/2 È
DIFFERENTE DA
HTTP/1.1

HTTP/1.1
TRAFERISCE
UNA RISORSA
PER CONNESSIONE
IN SERIE

HTTP/1.1
UTILIZZA PIÚ
CONNESSIONI

1 FILE =
1 CONNESSIONE

@andreacardinali
HTTP/1.1- DOWNLOAD IN SERIE

HTTP/2
TRASFERISCE
PIÙ RISORSE
IN PARALLELO
(multiplexing)

HTTP/2 UTILIZZA
UNA UNICA
CONNESSIONE
(per origine)

@andreacardinali
http/2- MULTIPLEXING

@andreacardinali
DOWNLOAD CON HTTP/2

@andreacardinali
DOWNLOAD CON HTTP/1.1

@andreacardinali
HTTP/1.1vs HTTP/2
http://www.httpvshttps.com/

@andreacardinali
RICAPITOLANDO
•http/2 è retrocompatibile e ampiamente
supportato
•http/2 richiede https
•http/2 riduce il tempo di caricamento della
pagina
•http/2 scarica i file in parallelo utilizzando
un’unica connessione (per host)

Andrea Cardinali - #wmf17 - @andreacardinali - 23 e 24 Giugno 2017 – Palacongressi di RiminiAndrea Cardinali - #wmf17 - @andreacardinali - 23 e 24 Giugno 2017 – Palacongressi di Rimini
HTTP/2
E VELOCITÁ

LA VELOCITÁ
DIPENDE PER
80% - 90%
DAL FRONTEND

IL SERVER
INCIDE PER UN
10% - 20%
(tranne in casiclamorosicon hostingsupercheap)

PERCHÉ LA
VELOCITÁ
È COSÌ
IMPORTANTE?

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

SITO PIÙ VELOCE
=
MIGLIOR USER
EXPERIENCE

MIGLIOR UX
=
MAGGIORI
PROFITTI

SITO VELOCE
=
1 SECONDO
32

@andreacardinali
PER APPROFONDIRE
https://www.slideshare.net/AndreaCardinali

WEB
PERFOMANCE
OPTIMIZATION

PERFORMANCE

PLUGIN

PLUGIN INSTALLATI
CODICE
OTTIMIZZATO

PERFORMANCE

TEMI
MARKETPLACE

TEMA CUSTOM

TEMA MARKETPLACE

TEMA CUSTOM vs
MARKETPLACE

W.P.O.
(EVERGREEN)

ABILITA LA
COMPRESSIONE
GZIP

@andreacardinali
COMPRESSIONEGZIP
•Riduce il peso delle risorse testuali (codice
html, js, css) fino all’80/90%
•Deve essere abilitata sul server

@andreacardinali
ABILITARE COMPRESSIONEGZIP
(.HTACCESS)
# Gzip compression
<IfModule mod_deflate.c>
# Active compression
SetOutputFilter DEFLATE
#[…]
</IfModule>

EXPIRE
HEADERS

@andreacardinali
EXPIRE HEADERS (.HTACCESS)
•Intestazione http
•Indicano la scadenza del file richiesto
•Se il file è già presente nella cache del
browser viene restituito status code 304
•L’intestazione può essere generata tramite
php o .htaccess (consigliato)

@andreacardinali
EXPIRE HEADERS
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month“
# Media: images, video, audio
ExpiresByType image/jpeg "access plus 1 month "
</IfModule>
https://httpd.apache.org/docs/current/mod/mod_expires.html

TUTTE LE DIRETTIVE
NEL .HTACCESS
VANNO PRIMA DI
# BEGIN WordPress

LIMITARE I DNS
LOOKUP

PER OGNI HOST
IL BROWSER
EFFETUA UN
DNS LOOKUP

ORDINAMENTO
JS E CSS

@andreacardinali
ORDINE DI CARICAMENTOCSS/JS
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
52

@andreacardinali
wp_enqueue_script()
wp_enqueue_script(
string $handle,
string $src = '',
array $deps = array(),
string $ver = false,
bool $in_footer = false )
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

@andreacardinali
wp_enqueue_style()
wp_enqueue_style(
string $handle,
string $src = '',
array $deps = array(),
string|bool|null $ver = false,
string $media = 'all' )
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

AUMENTARE LA
VELOCITÁ
PERCEPITA

PRIORITÁ
AI CONTENUTI
VISIBILI

MOSTRARE IL
CONTENUTO
ABOVE THE FOLD
IL PIÚ
VELOCEMENTE
POSSIBILE

LAZY LOADING
IMMAGINI

57 % DEL PESO
DELLA PAGINA
CAUSATO
DA
IMMAGINIhttp://httparchive.org/interesting.php#bytesperpage

@andreacardinali
LAZY LOAD IMMAGINI
http://httparchive.org/interesting.php#bytesperpage
61

LE IMMAGINI
VENGONO
CARICATE SOLO
QUANDO
ENTRANO NEL
VIEWPORT

RICHIEDE
JAVASCRIPT +
MODIFICA AL
HTML

@andreacardinali
IMMAGINE CON SEGNAPOSTO
<img src=‘placeholder.png’ data-src=‘original.png’ />

@andreacardinali
ESEMPIO DI LAZY LOAD
<img src=‘placeholder.png’ data-src=‘original.png’ />
<img src=‘wmf17.png’/>
$(window).scroll()
if (immagine è nel viewport)
sostituisci l’attributo data-src con src

IMMAGINI
PROGRESSIVE

@andreacardinali
JPEG PROGRESSIVE
68
Immagine sfocataImmagine «bianca»

CARICAMENTO
ASINCRONO JS

@andreacardinali
ATTRIBUTOASYNC
<script src="demo_async.js" async></script>
•Lo script viene eseguito appena è disponibile
•Non blocca il caricamento dei file js successivi
•I file più veloci a essere scaricati vengono eseguiti prima (non
viene rispettato l’ordine)
•Utilizzabile solo per script esterni (con l’attributo src)
https://www.w3schools.com/tags/att_script_async.asp

CARICAMENTO
DIFFERITO JS

@andreacardinali
ATTRIBUTODEFER
<script src="demo_defer.js" defer></script>
•Lo script viene eseguito dopo il parsing della pagina
•Non blocca il caricamento dei file js successivi
•Gli script vengono eseguiti nell’ordine stabilito
•Utilizzabile solo per script esterni (con l’attributo
src)https://www.w3schools.com/tags/att_script_defer.asp

CRITICAL
RENDER PATH

CRITICAL RENDER PATH
COSTITUITO DA
CODICE E RISORSE
NECESSARIE A
VISUALIZZARE IL
CONTENUTO
ABOVE THE FOLD

@andreacardinali
https://it.wordpress.org/plugins/above-the-fold-optimization/

CSS INLINE

@andreacardinali
wp_add_inline_style()
•Serve per aggiungere CSS in linea
https://codex.wordpress.org/it:Riferimento_funzioni/wp_add_inline_style

@andreacardinali
INLINE CSS E JS
Prevede l’inclusione IN LINEA di css e js
PRO
•Riduce il numero di connessioni http
•Può aumentare la velocità percepita
CONTRO
•Impedisce il caching della risorsa
•Aumenta il peso della pagina

@andreacardinali
INLINE CSS E JS - HTTP/2
•Utilizzalo solo per file di piccole dimensioni
(~3/4kb)
•Meglio utilizzarlo solo con gzip abilitato
•Utilizzalo per il critical render path
•Valuta in alternativa l’utilizzo di file esterni

@andreacardinali
wp_add_inline_script
•Serve per aggiungere js in linea (prima di
</head> o di </body> )
•Sfrutta il sistema di dipendenze di WP
https://developer.wordpress.org/reference/functions/wp_add_inline_script/

PRERENDER
PREFETCH

DIRETTIVE PRE-*
INTESTAZIONI
HTTP
o
ATTRIBUTI DI
<LINK>

IL PRERENDER
PERMETTE DI
CARICARE UNA
PAGINA IN
BACKGROUND

@andreacardinali
PRERENDER
PRO
•Caricamento istantaneo (in caso di visita)
CONTRO
•Potenziale spreco delle risorse hw
http://caniuse.com/#search=pre-render
84
//…
<link rel=‘prerender’ href=‘/secondapagina/’>
</head>

IL DNS-PREFETCH
PERMETTE DI
ANTICIPARE IL
DNS LOOKUP

@andreacardinali
PRERENDER
PRO
•Il download delle risorse dall’origine indicato è più
rapido, in quanto il dns lookup è già stato fatto
CONTRO
•Ogni dns lookup richiede tempo extra e se le origini
sono molte, il sito può rallentare
http://caniuse.com/#search=pre-render
86
//…
<link rel=‘dns-prefetch’
href=‘//webmarketingfestival.it’>
</head>

WP SUPPORTA
IN AUTOMATICO
DNS-PREFETCH
E PRERENDER

@andreacardinali
AGGIUNGERE ALTRI HOST
function makewp_example_resource_hints( $hints, $relation_type ) {
if ( 'dns-prefetch' === $relation_type ) {
$hints[] = '//make.wordpress.org';
} else if ( 'prerender' === $relation_type ) {
$hints[] = 'https://make.wordpress.org/great-again';
}
return $hints;
}
add_filter( 'wp_resource_hints', 'makewp_example_resource_hints',
10, 2 )
https://make.wordpress.org/core/2016/07/06/resource-hints-in-4-6/

SERVER PUSH

È IL SERVER A
STABILIRE QUALI
RISORSE HANNO
LA PRIORITÁ

LE RISORSE CON
PRIORITÁ PIÚ
ALTA VENGONO
SCARICATE
PER PRIME

@andreacardinali
SERVER PUSH- HTTP/2
PRO
•Utile per prioritizzare le risorse
•Aumenta la velocità percepita
CONTRO
•Soggetto alla same-origin policy
•Può essere disabilitato dal client (la risorsa
verrà comunque scaricata con la priorità
predefinita)

@andreacardinali
SERVER PUSH
<?php
header("Link: </css/vendor.css>; rel=preload; as=style",
false);
header("Link: </css/styles.css>; rel=preload; as=style",
false);
header("Link: </images/site/logo--red.svg>; rel=preload;
as=image", false);
?>

@andreacardinali
RICAPITOLANDO
•La velocità va oltre i concetti di KB e secondi
•Un sito veloce è un sito percepito come tale
•I plugins non sono la soluzione a tutti i
problemi
•Le performance devono far parte dello
sviluppo del sito e non devono essere
considerate come un extra

@andreacardinali
RICAPITOLANDO
•Prioritá ai contenuti above the fold
•Critical render path
•Lazy load per immagini
•Immagini progressive
•Server push

W.P.O.
BEST WORST
PRACTICES

CONCATENAZIONE
(COMBINE CSS / JS)

UNIRE PIÙ FILE
INSIEME PER
RIDURRE IL
NUMERO DI
CONNESSIONI

@andreacardinali
CONCATENAZIONE

@andreacardinali
CONCATENAZIONE - HTTP/1.1:
PRO
•Riduce il numero di connessioni http
•La compressione gzip puó essere maggiore
◦ File ancora più piccoli
•Va utilizzato insieme agli expire headers
CONTRO
•File di grosse dimensioni
•L’aggiornamento di un file comporta l’invalidazione
di tutto il file

@andreacardinali
CONCATENAZIONE -HTTP/2
PRO
•Http/2 puó scaricare più file in parallelo
•Utilizza gli expire headers per invalidare i file
singolarmente
CONTRO
•n.a.

IMAGE SPRITES

DOMAIN
SHARDING

@andreacardinali
DOMAIN SHARDING

@andreacardinali
DOMAIN SHARDING - HTTP/1.1
PRO
•Parallelizza i download aumentando la
velocità
CONTRO
•Aumenta il dns lookup time
•Aumenta l’overhead tcp

@andreacardinali
DOMAIN SHARDING - HTTP/2
•Utilizza il numero di host minimo
(1 host = 1 connessione)
•Http/2 coalescence
la connessione viene riutilizzata anche per
origini diverse se:
◦ certificato wildcard /EV / SAN (Subject Alternative
Names)
◦ stesso indirizzo IP

@andreacardinali
RICAPITOLANDO
•HTTP/1.1 utilizza una connessione per file
•HTTP/2 utilizza una connessione per host
•Ridurre il numero di connessioni http PER HOST
•Evitare:
◦ combine css / js
◦ image sprite
◦ domain sharding

RICAPITOLANDO..

The fastest byte is a byte
not sent
Ilya Gregoric

@andreacardinali
W.P.O.OK
•Compressione GZIP
•Expire Headers
•Css in cima e js in fondo (async e defer)
•Utilizzare wp_enqueue_*

PLUGIN

@andreacardinali
PLUGIN CONSIGLIATI- 1
CARICAMENTO ASINCRONO / DIFFERITO
•https://it.wordpress.org/plugins/async-javascript/
LAZY LOAD
•https://it.wordpress.org/plugins/bj-lazy-load/
•https://wordpress.org/plugins/rocket-lazy-load/
PERFORMANCE
•https://wp-rocket.me/it/
•https://it.wordpress.org/plugins/w3-total-cache/

@andreacardinali
PLUGIN CONSIGLIATI- 2
OTTIMIZZAZIONE FRONTEND / CRITICAL
RENDER PATH
•https://it.wordpress.org/plugins/above-the-fold-
optimization/
SERVER PUSH
•https://it.wordpress.org/plugins/http2-server-push/
CARICAMENTO CONDIZIONALE JS/CSS
https://wordpress.org/plugins/wp-asset-clean-up/

@andreacardinali
SLIDES E DOMANDE SUL MASTERCLUB

@andreacardinali
GRAZIE
▶ E-mail:andrea@tcinformatica.net
▶ Twitter:@andreacardinali
▶ Slideshare:
http://www.slideshare.net/andreacardinali

BONUS TRACK

SERVONO
ANCORA LE
CDN?

DIPENDE

VICINANZA
GEOGRAFICA

BANDA
UTILIZZATA

CARICO DEL
SERVER

VERIFICATE IL
SUPPORTO PER
http/2

Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2

Recommended

Recommended

More Related Content

More from Andrea Cardinali

More from Andrea Cardinali (14)

Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2