Se pensi che il tempo di caricamento della pagina non sia importante o di non poter migliorare la velocità del tuo sito perché è il server ad essere lento, ti stai sbagliando :) In questo talk parlerò del perché è importante realizzare siti veloci, delle principali best practices per realizzarli e del come migliorare le perfomances in modo rapido e senza fatica.
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
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
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
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)
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
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
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>
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
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
“
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
Notes de l'éditeur
WPO
HASHTAG GOOGLE
UTENTI MOBILE
CONNESSIONE LENTA
PAGINE PESANTI
TREND IN CRESCITA.
PAGINE + PESANTI.
IMPATTO DELLA VELOCITA
METRICHE UTENTE
CONVERSIONI
BOUNCE
SHOPZILLA
6sec -> 1.2 sec. GUADAGNI +12% PAGEVIEWS +25%
BING test
AUMENTA di 2sec la home, clicked 3.75% less often, and reported a significant level. -2% RICERCHE -3.75% CLICK
RIDUCE di 2 sec. il tempo. +5% GUADAGNI
COSA CENTRA LA SEO?
LA SEO E’ PER GLI UTENTI
IL SUCCESSO DEGLI MDR DIPENDE DALLA UX
FATTORE DI RANKING
CRAWL BUDGET
ESPERIENZA UTENTE PROVOCA EMOZIONI
NAVIGAZIONE LENTA = EMOZIONI NEGATIVE
NUMEROSI STUDI A RIGUARDO (NE HO SCELTI 3)
Test effettuato con elettroencefalogramma
Condizioni di navigazione ideale
NON SONO STATI CONSIDERATI USABILITA’ + FATTORI ESTERNI
ABBANDONA IL SITO E VA SUL SITO DEL COMPETITORS
Test effettuato con elettroencefalogramma
Condizioni di navigazione ideale
In real life, performance issues are compounded by many other usability issues and external factors.
L’UTENTE VUOLE:
UN SITO VELOCE ALMENO QUANTO QUELLO DESKTOP
ACQUISTARE DA MOBILE
L’UTENTE VUOLE VELOCITA’.
LENTEZZA = FRUSTRAZIONE E PERDITA DI CONTROLLO
EMOZIONE NEGATIVE
SE PENSATE DI SI VI SBAGLIATE.
LA REALTA’ E’ BEN DIVERSA.
CI CONCENTREREMO QUINDI SULLE
PASSIAMO ALLA PARTE PRATICA
Vediamo ora come migliorare la velocità del sito
ESISTONO DEI TOOLS PER MISURARE LA VELOCITA’ DEL SITO
TUTTI I BROWSER IMPLEMENTANO IL WATERFALL NELLA CONSOLLE DI SVILUPPO
R.U.M. monitorare il comportamento dell’utente
Spiegazione del TTI
TTI vs DOCUMENT READY
Tempo dopo il quale l’utente può interagire con la pagina
SAFARI NON RISPETTA LE SPECS DEL W3C
EVITO DI SCARICARE SEMPRE LE STESSE RISORSE
RISPARMIO BANDA
LA VELOCITA NON E’ SOLO UNA QUESTIONE DI SECONDI
LE TECNICHE CHE STIAMO X VEDERE AGISCONO SULLA PERCEZIONE DELL’UTENTE
L’OBIETTIVO E’ DARE ALL’UTENTE LA POSSIBILITA’ DI INTERAGIRE NEL MINOR TEMPO POSSIBILE CON LA PAGINA
IMMAGINI 60% DEL PESO COMPLESSIVO
FILTRO POST_THUMBNAIL_HTML + PREG_REPLACE
CSSOM: CSS Object Model: mappa le regole css sugli elementi del DOM che necessitano di stile
LE IMMAGINI PROGRESSIVE PESANO UN PO’ DI PIU’
PERO’ DANNO L’IDEA CHE IL SITO SI STA CARICANDO (A DIFFERENZA DELLE IMMAGINI BASELINE)
E’ POSSIBILE SUGGERIRE/ORDINARE AL BROWSER
QUALI RISORSE CARICARE IN BACKGROUND
PREFETCH
PRERENDER
SUBREQUEST
PER SFRUTTARE AL MASSIMO QUESTA TECNICA E’ FONDAMENTALE IL CACHING
if we're certain that a specific resource will be required in the future, then we can ask the browser to request that item and store it in the cache for reference later. For example an image or a script, or really anything that's cacheable by the browser:
CARICAMENTO ISTANTANEO
ASSICURIAMOCI CHE LA PAGINA SIA EFFETTIVAMENTE LA PROSSIMA PAGEVIEWS
IMMAGINI HEROSHOT
IMMAGINI X LA CALL TO ACTION
TUTTI I PRE VANNO INSERITI NELL’HEAD
ESEMPIO DI IMPLEMANTAZIONE
PROBABILMENTE CI SONO ACTION PIU’ ADATTE
QUALI SONO I CANDIDATI PER IL PRECARICAMENTO?
ALCUNE SOLUZIONI SONO FIGHE MA DI DIFFICILE IMPLEMENTAZIONE (CODICE CUSTOM)
SOLUZIONE MIGLIORE TRA
IMPLEMENTAZIONE DELLE FEATURES/ TEMPO NECESSARIO A IMPLEMENTARLO