Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2017 - Andrea Cardinali

NEED FOR SPEED
Realizzare siti velocissimi che caricano in
meno di 1 secondo
Andrea Cardinali
@andreacardinali
November 18th 2017

#wcmil @andreacardinali November 18th 2017
ANDREA CARDINALI
• DEVELOPER & SEO @ T.C. INFORMATICA
• LAVORO CON WP DAL 2009
• CO-ORGANIZZATORE DEL WP ROMAGNA
MEETUP
2

DI COSA PARLERÓ
• PERCHÉ è importante la velocità
• COSA significa VELOCE
• COSA rende veloce un sito
• COME rendere veloce un sito
3

BE SOCIAL
#WCMIL
@andreacardinali
4

LA VELOCITÁ È
IMPORTANTE?
5

PERCHÉ LA
VELOCITÁ È
IMPORTANTE
6

7
SITI SEMPRE PIÙ
PESANTI

SITI SEMPRE PIÙ PESANTI
8
OTTOBRE 2017OTTOBRE 2016
2585 kB 3575 kB

SITI SEMPRE PIÙ PESANTI
9
OTTOBRE 2017OTTOBRE 2016
2585 kB 3575 kB
+990 kB in 12 mesi
Fonte: http://httparchive.org

10
UTENTI SEMPRE
PIÚ
MOBILE

BASSA VELOCITÀ
CONNESSIONE
11

COPERTURA
3G/4G
NON OTTIMALE
12

13
INSODDISFAZIONE

LA VELOCITÁ
IMPATTA SULLA
USER EXPERIENCE
14

BASSA VELOCITÁ
AUMENTA LA
FREQUENZA DI
RIMBALZO
15

LA VELOCITÀ
IMPATTA SUL
TASSO DI
CONVERSIONE
16

LA VELOCITÀ
IMPATTA SULLE
VISUALIZZAZIONI DI
PAGINA
17

> BOUNCE RATE
< CONVERSION RATE
< PAGEVIEWS
=
< PROFITTI
18

+1 SEC = -7%
19
http://www.aberdeen.com/research/5136/ra-performance-web-application/content.aspx

“64% OF
SHOPPERS WHO
ARE UNHAPPY
WITH THEIR SITE
VISIT WILL GO
ELSEWHERE TO
SHOP NEXT TIME”
20
https://cdnify.com/blog/15-web-performance-stats/

“73% OF MOBILE
USERS SAID
THEY’VE
ENCOUNTERED A
SITE THAT WAS
“TOO SLOW TO
LOAD”
21

“IF AMAZON
INCREASED
PAGE LOAD TIME
BY +100MS THEY
LOSE 1% OF
SALES”
22

“IF GOOGLE
INCREASED
PAGE LOAD BY
+500 MS THEY
GET 25% FEWER
SEARCHES”
23

“50% OF PEOPLE
WILL TELL OTHERS
IF THEY HAVE A
NEGATIVE
EXPERIENCE ON
YOUR SITE”
24

MIGLIOR
USER EXPERIENCE
=
MAGGIORI
PROFITTI
25

26

IL TEMPO
(CHE FAI PERDERE AI
TUOI UTENTI)
È DENARO
(CHE PERDI TU)
27

LA VELOCITÀ
MIGLIORA IL
POSIZIONAMENTO
(SEO)?
28

NI
29

UN SITO VELOCE
NON MIGLIORA
DIRETTAMENTE IL
POSIZIONAMENTO
30

UN SITO LENTO
PEGGIORA
L’INDICIZZAZIONE
31

UN SITO LENTO
PEGGIORA IL
POSIZIONAMENTO
32

“SLOW SITES RANK WORST. IF YOU
RUN A FAST SITE, THAT’S GREAT
FOR YOUR USERS, GREAT FOR ROI,
FANTASTIC, YOU SHOULD PAY LOT
OF ATTENTION TO CACHE AND ALL
THIS SORT OF STUFF BUT YOU DON’T
GET A BOOST FOR IT. IT’S THE SITES
THAT ARE OUTLIERS IN TERMS OF
BEING REALLY SLOW THAT RANK
LOWER.”
33
Matt Cutts @ SMX 2013

CRAWL BUDGET
34

IL CRAWL BUDGET
È IL TEMPO CHE LO
SPIDER DEDICA
ALLA SCANSIONE
DEL SITO
35

TEMPO LIMITATO
36

SITO VELOCE =
SCANSIONE PIÙ
APPROFONDITA
37

SITO VELOCE =
MIGLIORE
INDICIZZAZIONE
38

MIGLIORE
INDICIZZAZIONE =
MIGLIOR
POSIZIONAMENTO
39

COSA SIGNIFICA
VELOCE?
40

LA RISPOSTA È
NELLA
PSICOLOGIA
UMANA…
41

MEMORIA A
BREVE TERMINE
LIMITATA
42

43

VOGLIAMO
AVERE IL
CONTROLLO
DELLA
SITUAZIONE
44

45

VOGLIAMO
EVITARE LE
ATTESE
46

47

SEMPRE PIÙ
DISTRATTI
48

QUANTO POSSIAMO
ASPETTARE?
Ritardo Reazione utente
0 - 100ms Istantanea
100 - 300 ms Ritardo appena percepibile
300 - 1000 ms FOCUS, Ritardo percepibile
1 secondo o più FLUSSO PENSIERI INTERROTTO
Cambio contesto mentale
10 secondi o più FRUSTRAZIONE e
ABBANDONO del SITO
49
[Miller 1968; Card et al. 1991] - Jakob Nielsen

SITO VELOCE =
1 SECONDO
50

COSA RENDE
VELOCE UN SITO
51

BACKEND
O
FRONTEND?
52

<20 %
BACKEND
53

>80 %
FRONTEND
54

55
BACKEND
FRONTEND

OTTIMIZZARE IL
BACKEND È INUTILE?
56

IL 20%
CONTROLLA
L’80%
57

LE
PERFORMANCE
PARTONO DAL
CODICE
58

I PLUGIN DI W.P.O.
NON SONO LA
SOLUZIONE
59

COME RENDERE
VELOCE UN SITO
60

LA TECNICA
SEGRETA #1 PER
RENDERE
VELOCE UN SITO
61

IL SEGRETO PER RENDERE
VELOCE UN SITO
62

SITO VELOCE 
PAGE BUILDER
63

COME CAPIRE SE
IL SITO È
VELOCE
64

"
"
CIÒ CHE NON È MISURABILE
NON È MIGLIORABILE
65
Galileo Galilei

STRUMENTI
• https://gtmetrix.com/
• https://www.webpagetest.org/
• https://tools.pingdom.com/
66

METRICHE
67

GOOGLE PAGE
SPEED SCORE
68

CHI È IL MIGLIORE?
69
SITO 1
SITO 2

E ADESSO?
70
SITO 1
SITO 2

CHI È IL MIGLIORE?
71
SITO 1
SITO 2

72

PAGE SPEED =
VANITY METRIC
73

4 METRICHE
74

#1
TIME TO FIRST
BYTE
(TTFB)
75

#2
KILOBYTES
76

#3
N° CONNESSIONI
HTTP
77

#4
ONLOAD TIME
78

TIME TO FIRST
BYTE
79

TTFB
80

VELOCIZZARE LA
RESTITUZIONE
DEL CODICE
HTML
81

82

RIDURRE TTFB
• Hosting performante
• PHP 7 (+ 300% web performance)
• Server side cache (Nginx / Varnish)
83

RIDURRE IL
PESO DELLA
PAGINA
84

RIDURRE IL PESO DELLA
PAGINA
•Abilitare compressione GZIP
•Minify risorse testuali (css, js,
html)
•Compressione immagini
•Intestazioni http scadenza
(Expire headers)
85

RIDURRE IL
NUMERO DI
CONNESSIONI
HTTP
86

1 RISORSA = 1
CONNESSIONE
HTTP
(HTTP/1.X)
87

1 RISORSA = 1 CONNESSIONE
88

N° MAX
CONNESSIONI
PER HOST
(HTTP/1.X)
89

RIDURRE IL NUMERO DI
CONNESSIONI HTTP
• Caricamento condizionale (Conditional
loading)
• Combine delle risorse (da valutare)
• HTTP/2
90

CARICAMENTO
CONDIZIONALE
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’);
}
}
91

HTTP/2
92

HTTP/2
• Supportato dall’85% dei browser in Italia*
• Migliora notevolmente le performance
• Elimina le limitazioni di HTTP/1.1
• Utilizza una sola connessione per host
• Scarica le risorse in parallelo
• Le risorse si possono prioritizzare (server
push)
• Richiede https
93
https://caniuse.com/#search=HTTP%2F2

DOWNLOAD CON HTTP
94

DOWNLOAD CON HTTP/2
95

HTTP VS HTTP/2
96
http://www.httpvshttps.com/

HTTP/2 - DA SAPERE
• I social counter vengono resettati
• Impostare i redirect nel .htaccess
• Attenzione ai mixed content
• Impostare il <meta name=«referer»>
adeguatamente
97
https://www.w3.org/TR/referrer-policy/#referrer-policies

ONLOAD TIME
98

ONLOAD TIME
99

AUMENTARE LA
VELOCITÀ
PERCEPITA
100

"
"
TIME IS MEASURED
OBJECTIVELY BUT PERCEIVED
SUBJECTIVELY, AND
EXPERIENCES CAN BE
ENGINEERED TO IMPROVE
PERCEIVED PERFORMANCE
101
Ilya Gregorik

PRIORITÀ AI
CONTENUTI
ABOVE THE
FOLD
102

PRIORITÀ AI CONTENUTI
ABOVE THE FOLD
103

CRITICAL
RENDER PATH
104

CRITICAL RENDER
PATH È COSTITUITO
DAL CODICE E DALLE
RISORSE
NECESSARIE A
VISUALIZZARE IL
CONTENUTO ABOVE
THE FOLD
105

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

SERVER PUSH
107

SERVER PUSH
• La priorità dei contenuti è stabilita dal
server
• Le risorse con priorità più alta sono
scaricate per prime (indipendentemente
dalla loro posizione nel html)
108

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);
?>
109
https://it.wordpress.org/plugins/http2-server-push/
https://support.cloudflare.com/hc/en-us/articles/115002816808-How-do-I-enable-HTTP-2-Server-Push-in-WordPress

TUTTO QUI?
110

ASSOLUTAMENTE NO…
• Lazy load immagini, video
• Font loader
• Script asincroni e differiti
• DNS lookup
• preload, prefetch, prerender
• CDN
• Cache per utenti loggati
• […]
111

RICAPITOLANDO
• Il tempo è denaro
• Le performance partono dal codice
• Page Speed è una vanity metric
• La velocità è una percezione
• Page builder è sinonimo di lentezza
112

RICAPITOLANDO
• Concentratevi sul 20% che permette di
ottenere l’80% dei risultati
• PHP 7 / GZIP/ HTTP/2 / Cache
• Priorità ai contenuti above the fold
• Se non lo vedo, non lo carico (lazy load)
113

BONUS TRACK
114

PLUGIN - 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/
115

PLUGIN - 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/
116

ALTERNATIVE A PAGE
BUILDER
Utilizzare ItalyStrap
• 100% made in Italy
• Veloce (scritto tenendo a mente le performance)
• SEO Friendly
http://bit.ly/ItalyStrapWCMIL17
117

WORDPRESS MEETUP
ROMAGNA
QUANDO:
ogni 1°Martedì del mese (prossimo 3 Dicembre)
DOVE:
Dinamo Coworking Space Cesena
PERCHÉ:
Per parlare di WordPress, conoscere bella
gente e condividere le proprie esperienze
wpromagna.com
@romagnawp
118

DOMANDE?
119

THANKS!
• Twitter:@andreacardinali
• Slideshare:
http://www.slideshare.net/andreacardinali
• Website: https://www.andreacardinali.it/
120

Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2017 - Andrea Cardinali

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (7)

Mais de Andrea Cardinali

Mais de Andrea Cardinali (20)

Último

Último (20)

Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2017 - Andrea Cardinali