SlideShare a Scribd company logo
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
W.P.O.
WORDPRESS PERFORMANCE
OPTIMIZATION
1
Andrea Cardinali – T.C. Informatica
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFMATTERS
3
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
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
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFISMONEY
7
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
IL TEMPO È DENARO
8
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFISSEO
9
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/
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
#PERFISUX
12
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
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
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
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
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
COSA SIGNIFICA VELOCE ?
18
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
SITO VELOCE = 1 SECONDO
20
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
É TUTTA COLPA DEL BACKEND ?
21
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
>80% DEL TEMPO DIPENDE DAL
FRONTEND
22
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
>80% DEL TEMPO DIPENDE DAL
FRONTEND
23
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
AUMENTARE LA VELOCITA’
24
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
CIÒ CHE NON È MISURABILE NON È
MIGLIORABILE
25
“ “
Galileo Galilei
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
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
DIMINUIRE IL PESO DELLA PAGINA
28
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)
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’);
}
}
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
RIDURRE RICHIESTE HTTP
31
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
ESEMPIO DI RICHIESTE HTTP
32
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
ABILITARE CACHING
34
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
AUMENTARE LA VELOCITA
PERCEPITA
36
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
PRIORITÀ AI CONTENUTI VISIBILI
37
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
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
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
LAZY LOAD IMMAGINI
<img src=‘placeholder.png’ data-src=‘original.png’ />
41
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)
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
JPEG PROGRESSIVE
44
Immagine sfocataImmagine «bianca»
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
PRECARICAMENTO RISORSE
45
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
PRE-* PARTY
46
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>
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>
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>
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’>”;
}
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
IDENTIFICATE I PERCORSI DI
NAVIGAZIONE ABITUALI CON
GOOGLE ANALYTICS
51
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
COME IMPLEMENTARE (QUASI) TUTTO?
52
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
W3 TOTAL CACHE
53
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/
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
“
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
DOMANDE?
56
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
WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560
E IL BACKEND?
58
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)
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
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

More Related Content

What's hot

Come eseguire correttamente una migrazione SEO
Come eseguire correttamente una migrazione SEOCome eseguire correttamente una migrazione SEO
Come eseguire correttamente una migrazione SEO
Semrush Italia
 
SEMrush WebStudy Marathon - SEO Tecnico - Robots Exclusion Protocol
SEMrush WebStudy Marathon - SEO Tecnico - Robots Exclusion ProtocolSEMrush WebStudy Marathon - SEO Tecnico - Robots Exclusion Protocol
SEMrush WebStudy Marathon - SEO Tecnico - Robots Exclusion Protocol
semrush_webinars
 
I link interni sono fattori di rank? Scopriamolo!
I link interni sono fattori di rank? Scopriamolo!I link interni sono fattori di rank? Scopriamolo!
I link interni sono fattori di rank? Scopriamolo!
Semrush Italia
 
Sviluppare Plugin per WordPress
Sviluppare Plugin per WordPress Sviluppare Plugin per WordPress
Sviluppare Plugin per WordPress
Thomas Vitale
 
Creare temi custom con _s, Bootstrap e LESS
Creare temi custom con _s, Bootstrap e LESSCreare temi custom con _s, Bootstrap e LESS
Creare temi custom con _s, Bootstrap e LESSPiero Bellomo
 
Wordpress e la gestione di progetti complessi
Wordpress e la gestione di progetti complessiWordpress e la gestione di progetti complessi
Wordpress e la gestione di progetti complessi
Maurizio Pelizzone
 
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018
Giovanni Sacheli
 
Guida Seo di Esperto Seo
Guida Seo di Esperto SeoGuida Seo di Esperto Seo
Guida Seo di Esperto Seo
Esperto Seo
 
Analisi dei competitor con Screaming Frog
Analisi dei competitor con Screaming FrogAnalisi dei competitor con Screaming Frog
Analisi dei competitor con Screaming Frog
Giovanni Sacheli
 
SEMrush webinar - Piano migrazione
SEMrush webinar - Piano migrazioneSEMrush webinar - Piano migrazione
SEMrush webinar - Piano migrazione
Giovanni Sacheli
 
WordPress - 9 Falsi miti smascherati - Andrea Cardinali - WordPress Romagna M...
WordPress - 9 Falsi miti smascherati - Andrea Cardinali - WordPress Romagna M...WordPress - 9 Falsi miti smascherati - Andrea Cardinali - WordPress Romagna M...
WordPress - 9 Falsi miti smascherati - Andrea Cardinali - WordPress Romagna M...
Andrea Cardinali
 
Come fare SEO con AngularJS
Come fare SEO con AngularJSCome fare SEO con AngularJS
Come fare SEO con AngularJS
Giovanni Sacheli
 
Ottimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricercaOttimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricerca
Tiziano Fogliata
 
Sviluppare plugin per WordPress: Best Practice e Silver Bullet
Sviluppare plugin per WordPress: Best Practice e Silver BulletSviluppare plugin per WordPress: Best Practice e Silver Bullet
Sviluppare plugin per WordPress: Best Practice e Silver BulletLuca Bartoli
 
Black Hat Seo: il Lato Oscuro della SEO
Black Hat Seo: il Lato Oscuro della SEOBlack Hat Seo: il Lato Oscuro della SEO
Black Hat Seo: il Lato Oscuro della SEO
Paolo Dello Vicario
 
Aggiornato! Il sito veloce senza codice
Aggiornato! Il sito veloce senza codiceAggiornato! Il sito veloce senza codice
Aggiornato! Il sito veloce senza codice
Stefania Massenza
 
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEOChrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Giovanni Sacheli
 
SEO ON SITE, CONTROLLARE INDICIZZAZIONE E DIRETTIVE PER GLI SPIDER - Giovanni...
SEO ON SITE, CONTROLLARE INDICIZZAZIONE E DIRETTIVE PER GLI SPIDER - Giovanni...SEO ON SITE, CONTROLLARE INDICIZZAZIONE E DIRETTIVE PER GLI SPIDER - Giovanni...
SEO ON SITE, CONTROLLARE INDICIZZAZIONE E DIRETTIVE PER GLI SPIDER - Giovanni...
Giovanni Sacheli
 
Seo Audit Demo
Seo Audit DemoSeo Audit Demo
Seo Audit Demo
Giovanni Sacheli
 
Checklist: 18 passi per fare SEO Audit nel 2021 | Meta Line Digital Agency
Checklist: 18 passi per fare SEO Audit nel 2021 | Meta Line Digital AgencyChecklist: 18 passi per fare SEO Audit nel 2021 | Meta Line Digital Agency
Checklist: 18 passi per fare SEO Audit nel 2021 | Meta Line Digital Agency
Meta Line
 

What's hot (20)

Come eseguire correttamente una migrazione SEO
Come eseguire correttamente una migrazione SEOCome eseguire correttamente una migrazione SEO
Come eseguire correttamente una migrazione SEO
 
SEMrush WebStudy Marathon - SEO Tecnico - Robots Exclusion Protocol
SEMrush WebStudy Marathon - SEO Tecnico - Robots Exclusion ProtocolSEMrush WebStudy Marathon - SEO Tecnico - Robots Exclusion Protocol
SEMrush WebStudy Marathon - SEO Tecnico - Robots Exclusion Protocol
 
I link interni sono fattori di rank? Scopriamolo!
I link interni sono fattori di rank? Scopriamolo!I link interni sono fattori di rank? Scopriamolo!
I link interni sono fattori di rank? Scopriamolo!
 
Sviluppare Plugin per WordPress
Sviluppare Plugin per WordPress Sviluppare Plugin per WordPress
Sviluppare Plugin per WordPress
 
Creare temi custom con _s, Bootstrap e LESS
Creare temi custom con _s, Bootstrap e LESSCreare temi custom con _s, Bootstrap e LESS
Creare temi custom con _s, Bootstrap e LESS
 
Wordpress e la gestione di progetti complessi
Wordpress e la gestione di progetti complessiWordpress e la gestione di progetti complessi
Wordpress e la gestione di progetti complessi
 
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018
Technical SEO Audit Checklist - Giovanni Sacheli Search Marketing Connect 2018
 
Guida Seo di Esperto Seo
Guida Seo di Esperto SeoGuida Seo di Esperto Seo
Guida Seo di Esperto Seo
 
Analisi dei competitor con Screaming Frog
Analisi dei competitor con Screaming FrogAnalisi dei competitor con Screaming Frog
Analisi dei competitor con Screaming Frog
 
SEMrush webinar - Piano migrazione
SEMrush webinar - Piano migrazioneSEMrush webinar - Piano migrazione
SEMrush webinar - Piano migrazione
 
WordPress - 9 Falsi miti smascherati - Andrea Cardinali - WordPress Romagna M...
WordPress - 9 Falsi miti smascherati - Andrea Cardinali - WordPress Romagna M...WordPress - 9 Falsi miti smascherati - Andrea Cardinali - WordPress Romagna M...
WordPress - 9 Falsi miti smascherati - Andrea Cardinali - WordPress Romagna M...
 
Come fare SEO con AngularJS
Come fare SEO con AngularJSCome fare SEO con AngularJS
Come fare SEO con AngularJS
 
Ottimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricercaOttimizzare WordPress non solo per i motori di ricerca
Ottimizzare WordPress non solo per i motori di ricerca
 
Sviluppare plugin per WordPress: Best Practice e Silver Bullet
Sviluppare plugin per WordPress: Best Practice e Silver BulletSviluppare plugin per WordPress: Best Practice e Silver Bullet
Sviluppare plugin per WordPress: Best Practice e Silver Bullet
 
Black Hat Seo: il Lato Oscuro della SEO
Black Hat Seo: il Lato Oscuro della SEOBlack Hat Seo: il Lato Oscuro della SEO
Black Hat Seo: il Lato Oscuro della SEO
 
Aggiornato! Il sito veloce senza codice
Aggiornato! Il sito veloce senza codiceAggiornato! Il sito veloce senza codice
Aggiornato! Il sito veloce senza codice
 
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEOChrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
 
SEO ON SITE, CONTROLLARE INDICIZZAZIONE E DIRETTIVE PER GLI SPIDER - Giovanni...
SEO ON SITE, CONTROLLARE INDICIZZAZIONE E DIRETTIVE PER GLI SPIDER - Giovanni...SEO ON SITE, CONTROLLARE INDICIZZAZIONE E DIRETTIVE PER GLI SPIDER - Giovanni...
SEO ON SITE, CONTROLLARE INDICIZZAZIONE E DIRETTIVE PER GLI SPIDER - Giovanni...
 
Seo Audit Demo
Seo Audit DemoSeo Audit Demo
Seo Audit Demo
 
Checklist: 18 passi per fare SEO Audit nel 2021 | Meta Line Digital Agency
Checklist: 18 passi per fare SEO Audit nel 2021 | Meta Line Digital AgencyChecklist: 18 passi per fare SEO Audit nel 2021 | Meta Line Digital Agency
Checklist: 18 passi per fare SEO Audit nel 2021 | Meta Line Digital Agency
 

Similar to WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015

Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
Andrea Cardinale
 
come il front-end automation aiuta tutto il team
come il front-end automation aiuta tutto il teamcome il front-end automation aiuta tutto il team
come il front-end automation aiuta tutto il team
extrategy
 
Performance e Drupal
Performance e DrupalPerformance e Drupal
Performance e Drupal
Vincenzo Di Biaggio
 
Surfing The Cloud Tsunami 2016
Surfing The Cloud Tsunami 2016Surfing The Cloud Tsunami 2016
Surfing The Cloud Tsunami 2016
Blueit SpA
 
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Mamadigital
 
Back to basics - il Manifesto Agile
Back to basics - il Manifesto AgileBack to basics - il Manifesto Agile
Back to basics - il Manifesto Agile
Giancarlo Valente
 
Il sito veloce senza codice, versione originale WordCamp 2020
Il sito veloce senza codice, versione originale WordCamp 2020Il sito veloce senza codice, versione originale WordCamp 2020
Il sito veloce senza codice, versione originale WordCamp 2020
Stefania Massenza
 
Datarace: IoT e Big Data (Italian)
Datarace: IoT e Big Data (Italian)Datarace: IoT e Big Data (Italian)
Datarace: IoT e Big Data (Italian)
Davide Mauri
 
WordPress SEO
WordPress SEOWordPress SEO
WordPress SEO
Francesco Napoletano
 
Swagger pertutti
Swagger pertuttiSwagger pertutti
Swagger pertutti
Nicolò Carandini
 
Firenze vbtt
Firenze vbttFirenze vbtt
Firenze vbtt
Piero Sbressa
 
User Journey con Google Data Studio
User Journey con Google Data StudioUser Journey con Google Data Studio
User Journey con Google Data Studio
Semrush Italia
 
Applicazioni web e web design responsive - SMAU Bologna 2013
Applicazioni web e web design responsive - SMAU Bologna 2013Applicazioni web e web design responsive - SMAU Bologna 2013
Applicazioni web e web design responsive - SMAU Bologna 2013
Fabrizio Caccavello
 
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA ItalySMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
Paolo Dadda
 
PostgreSQL - Hadoop: Why not? - PGDay.IT 2016
PostgreSQL - Hadoop: Why not? - PGDay.IT 2016PostgreSQL - Hadoop: Why not? - PGDay.IT 2016
PostgreSQL - Hadoop: Why not? - PGDay.IT 2016
Miriade Spa
 
Drupal in the Cloud
Drupal in the CloudDrupal in the Cloud
Drupal in the Cloud
Twinbit
 
WPO: Ottimizzazione step-by-step del front-end di un e-commerce
WPO: Ottimizzazione step-by-step del front-end di un e-commerceWPO: Ottimizzazione step-by-step del front-end di un e-commerce
WPO: Ottimizzazione step-by-step del front-end di un e-commerce
Francesco Terenzani
 
Cloud, IoT and Big Data
Cloud, IoT and Big DataCloud, IoT and Big Data
Cloud, IoT and Big Data
SolidQIT
 
The latest in advanced technical Seo
The latest in advanced technical SeoThe latest in advanced technical Seo
The latest in advanced technical Seo
Mamadigital
 

Similar to WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015 (20)

Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
 
come il front-end automation aiuta tutto il team
come il front-end automation aiuta tutto il teamcome il front-end automation aiuta tutto il team
come il front-end automation aiuta tutto il team
 
Performance e Drupal
Performance e DrupalPerformance e Drupal
Performance e Drupal
 
Madaudo
MadaudoMadaudo
Madaudo
 
Surfing The Cloud Tsunami 2016
Surfing The Cloud Tsunami 2016Surfing The Cloud Tsunami 2016
Surfing The Cloud Tsunami 2016
 
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
Comunicare con i Motori di Ricerca senza essere fraintesi: alla scoperta del ...
 
Back to basics - il Manifesto Agile
Back to basics - il Manifesto AgileBack to basics - il Manifesto Agile
Back to basics - il Manifesto Agile
 
Il sito veloce senza codice, versione originale WordCamp 2020
Il sito veloce senza codice, versione originale WordCamp 2020Il sito veloce senza codice, versione originale WordCamp 2020
Il sito veloce senza codice, versione originale WordCamp 2020
 
Datarace: IoT e Big Data (Italian)
Datarace: IoT e Big Data (Italian)Datarace: IoT e Big Data (Italian)
Datarace: IoT e Big Data (Italian)
 
WordPress SEO
WordPress SEOWordPress SEO
WordPress SEO
 
Swagger pertutti
Swagger pertuttiSwagger pertutti
Swagger pertutti
 
Firenze vbtt
Firenze vbttFirenze vbtt
Firenze vbtt
 
User Journey con Google Data Studio
User Journey con Google Data StudioUser Journey con Google Data Studio
User Journey con Google Data Studio
 
Applicazioni web e web design responsive - SMAU Bologna 2013
Applicazioni web e web design responsive - SMAU Bologna 2013Applicazioni web e web design responsive - SMAU Bologna 2013
Applicazioni web e web design responsive - SMAU Bologna 2013
 
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA ItalySMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
 
PostgreSQL - Hadoop: Why not? - PGDay.IT 2016
PostgreSQL - Hadoop: Why not? - PGDay.IT 2016PostgreSQL - Hadoop: Why not? - PGDay.IT 2016
PostgreSQL - Hadoop: Why not? - PGDay.IT 2016
 
Drupal in the Cloud
Drupal in the CloudDrupal in the Cloud
Drupal in the Cloud
 
WPO: Ottimizzazione step-by-step del front-end di un e-commerce
WPO: Ottimizzazione step-by-step del front-end di un e-commerceWPO: Ottimizzazione step-by-step del front-end di un e-commerce
WPO: Ottimizzazione step-by-step del front-end di un e-commerce
 
Cloud, IoT and Big Data
Cloud, IoT and Big DataCloud, IoT and Big Data
Cloud, IoT and Big Data
 
The latest in advanced technical Seo
The latest in advanced technical SeoThe latest in advanced technical Seo
The latest in advanced technical Seo
 

More from Andrea Cardinali

5 falsi miti su Woocommerce - Andrea Cardinali - WordCamp Catania 2019
5 falsi miti su Woocommerce - Andrea Cardinali - WordCamp Catania 20195 falsi miti su Woocommerce - Andrea Cardinali - WordCamp Catania 2019
5 falsi miti su Woocommerce - Andrea Cardinali - WordCamp Catania 2019
Andrea Cardinali
 
WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari...
WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari...WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari...
WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari...
Andrea Cardinali
 
From Cache to Ca$h - Advanced use of WP Cache - Andrea Cardinali
From Cache to Ca$h - Advanced use of WP Cache - Andrea CardinaliFrom Cache to Ca$h - Advanced use of WP Cache - Andrea Cardinali
From Cache to Ca$h - Advanced use of WP Cache - Andrea Cardinali
Andrea Cardinali
 
4+1 Errori SEO Fatali per il tuo sito WordPress
4+1 Errori SEO Fatali per il tuo sito WordPress4+1 Errori SEO Fatali per il tuo sito WordPress
4+1 Errori SEO Fatali per il tuo sito WordPress
Andrea Cardinali
 
Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2
Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2
Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2
Andrea Cardinali
 
Andrea Cardinali - SEO on Site e WordPress Errori da Evitare
Andrea Cardinali - SEO on Site e WordPress Errori da Evitare Andrea Cardinali - SEO on Site e WordPress Errori da Evitare
Andrea Cardinali - SEO on Site e WordPress Errori da Evitare
Andrea Cardinali
 
Rivoluziona il tuo sito con le WP REST API - Andrea Cardinali
Rivoluziona il tuo sito con le WP REST API - Andrea CardinaliRivoluziona il tuo sito con le WP REST API - Andrea Cardinali
Rivoluziona il tuo sito con le WP REST API - Andrea Cardinali
Andrea Cardinali
 
Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2...
Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2...Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2...
Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2...
Andrea Cardinali
 
Gestione avanzata di WordPress con WP-CLI - WordCamp Torino 2017 - Andrea Car...
Gestione avanzata di WordPress con WP-CLI - WordCamp Torino 2017 - Andrea Car...Gestione avanzata di WordPress con WP-CLI - WordCamp Torino 2017 - Andrea Car...
Gestione avanzata di WordPress con WP-CLI - WordCamp Torino 2017 - Andrea Car...
Andrea Cardinali
 
I vantaggi di utilizzare un Visual Composer - WordCamp Torino 2017 - Andrea C...
I vantaggi di utilizzare un Visual Composer - WordCamp Torino 2017 - Andrea C...I vantaggi di utilizzare un Visual Composer - WordCamp Torino 2017 - Andrea C...
I vantaggi di utilizzare un Visual Composer - WordCamp Torino 2017 - Andrea C...
Andrea Cardinali
 
Professional WordPress Development with Vagrant - Andrea Cardinali - WordCam...
Professional WordPress Development with Vagrant - Andrea Cardinali -  WordCam...Professional WordPress Development with Vagrant - Andrea Cardinali -  WordCam...
Professional WordPress Development with Vagrant - Andrea Cardinali - WordCam...
Andrea Cardinali
 
CMS in ottica SEO per i contenuti - SEMrush WebStudy Marathon - SEO Tecnico -...
CMS in ottica SEO per i contenuti - SEMrush WebStudy Marathon - SEO Tecnico -...CMS in ottica SEO per i contenuti - SEMrush WebStudy Marathon - SEO Tecnico -...
CMS in ottica SEO per i contenuti - SEMrush WebStudy Marathon - SEO Tecnico -...
Andrea Cardinali
 

More from Andrea Cardinali (12)

5 falsi miti su Woocommerce - Andrea Cardinali - WordCamp Catania 2019
5 falsi miti su Woocommerce - Andrea Cardinali - WordCamp Catania 20195 falsi miti su Woocommerce - Andrea Cardinali - WordCamp Catania 2019
5 falsi miti su Woocommerce - Andrea Cardinali - WordCamp Catania 2019
 
WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari...
WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari...WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari...
WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari...
 
From Cache to Ca$h - Advanced use of WP Cache - Andrea Cardinali
From Cache to Ca$h - Advanced use of WP Cache - Andrea CardinaliFrom Cache to Ca$h - Advanced use of WP Cache - Andrea Cardinali
From Cache to Ca$h - Advanced use of WP Cache - Andrea Cardinali
 
4+1 Errori SEO Fatali per il tuo sito WordPress
4+1 Errori SEO Fatali per il tuo sito WordPress4+1 Errori SEO Fatali per il tuo sito WordPress
4+1 Errori SEO Fatali per il tuo sito WordPress
 
Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2
Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2
Andrea Cardinali - WordPress Performance Optimization Cos'è cambiato con HTTP/2
 
Andrea Cardinali - SEO on Site e WordPress Errori da Evitare
Andrea Cardinali - SEO on Site e WordPress Errori da Evitare Andrea Cardinali - SEO on Site e WordPress Errori da Evitare
Andrea Cardinali - SEO on Site e WordPress Errori da Evitare
 
Rivoluziona il tuo sito con le WP REST API - Andrea Cardinali
Rivoluziona il tuo sito con le WP REST API - Andrea CardinaliRivoluziona il tuo sito con le WP REST API - Andrea Cardinali
Rivoluziona il tuo sito con le WP REST API - Andrea Cardinali
 
Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2...
Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2...Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2...
Realizzare siti velocissimi che si caricano in un secondo - WordCamp Milano 2...
 
Gestione avanzata di WordPress con WP-CLI - WordCamp Torino 2017 - Andrea Car...
Gestione avanzata di WordPress con WP-CLI - WordCamp Torino 2017 - Andrea Car...Gestione avanzata di WordPress con WP-CLI - WordCamp Torino 2017 - Andrea Car...
Gestione avanzata di WordPress con WP-CLI - WordCamp Torino 2017 - Andrea Car...
 
I vantaggi di utilizzare un Visual Composer - WordCamp Torino 2017 - Andrea C...
I vantaggi di utilizzare un Visual Composer - WordCamp Torino 2017 - Andrea C...I vantaggi di utilizzare un Visual Composer - WordCamp Torino 2017 - Andrea C...
I vantaggi di utilizzare un Visual Composer - WordCamp Torino 2017 - Andrea C...
 
Professional WordPress Development with Vagrant - Andrea Cardinali - WordCam...
Professional WordPress Development with Vagrant - Andrea Cardinali -  WordCam...Professional WordPress Development with Vagrant - Andrea Cardinali -  WordCam...
Professional WordPress Development with Vagrant - Andrea Cardinali - WordCam...
 
CMS in ottica SEO per i contenuti - SEMrush WebStudy Marathon - SEO Tecnico -...
CMS in ottica SEO per i contenuti - SEMrush WebStudy Marathon - SEO Tecnico -...CMS in ottica SEO per i contenuti - SEMrush WebStudy Marathon - SEO Tecnico -...
CMS in ottica SEO per i contenuti - SEMrush WebStudy Marathon - SEO Tecnico -...
 

WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015

  • 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

Editor's Notes

  1. WPO
  2. HASHTAG GOOGLE UTENTI MOBILE CONNESSIONE LENTA PAGINE PESANTI
  3. TREND IN CRESCITA. PAGINE + PESANTI.
  4. IMPATTO DELLA VELOCITA METRICHE UTENTE CONVERSIONI BOUNCE
  5. 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
  6. COSA CENTRA LA SEO? LA SEO E’ PER GLI UTENTI IL SUCCESSO DEGLI MDR DIPENDE DALLA UX FATTORE DI RANKING CRAWL BUDGET
  7. ESPERIENZA UTENTE PROVOCA EMOZIONI NAVIGAZIONE LENTA = EMOZIONI NEGATIVE NUMEROSI STUDI A RIGUARDO (NE HO SCELTI 3)
  8. Test effettuato con elettroencefalogramma Condizioni di navigazione ideale NON SONO STATI CONSIDERATI USABILITA’ + FATTORI ESTERNI
  9. ABBANDONA IL SITO E VA SUL SITO DEL COMPETITORS
  10. Test effettuato con elettroencefalogramma Condizioni di navigazione ideale In real life, performance issues are compounded by many other usability issues and external factors.
  11. L’UTENTE VUOLE: UN SITO VELOCE ALMENO QUANTO QUELLO DESKTOP ACQUISTARE DA MOBILE
  12. L’UTENTE VUOLE VELOCITA’. LENTEZZA = FRUSTRAZIONE E PERDITA DI CONTROLLO EMOZIONE NEGATIVE
  13. SE PENSATE DI SI VI SBAGLIATE. LA REALTA’ E’ BEN DIVERSA.
  14. CI CONCENTREREMO QUINDI SULLE
  15. PASSIAMO ALLA PARTE PRATICA Vediamo ora come migliorare la velocità del sito
  16. ESISTONO DEI TOOLS PER MISURARE LA VELOCITA’ DEL SITO TUTTI I BROWSER IMPLEMENTANO IL WATERFALL NELLA CONSOLLE DI SVILUPPO
  17. R.U.M. monitorare il comportamento dell’utente
  18. 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
  19. CSS INUTILE (ES. FRAMEWORK CSS BOOTSTRAP) MINIFY GZIP
  20. SEPARARE REGISTER DA ENQUEUE
  21. KEEP-ALIVE COMBINE SPRITES CSS
  22. EVITO DI SCARICARE SEMPRE LE STESSE RISORSE RISPARMIO BANDA
  23. LA VELOCITA NON E’ SOLO UNA QUESTIONE DI SECONDI LE TECNICHE CHE STIAMO X VEDERE AGISCONO SULLA PERCEZIONE DELL’UTENTE
  24. L’OBIETTIVO E’ DARE ALL’UTENTE LA POSSIBILITA’ DI INTERAGIRE NEL MINOR TEMPO POSSIBILE CON LA PAGINA
  25. IMMAGINI 60% DEL PESO COMPLESSIVO FILTRO POST_THUMBNAIL_HTML + PREG_REPLACE
  26. CSSOM: CSS Object Model: mappa le regole css sugli elementi del DOM che necessitano di stile
  27. LE IMMAGINI PROGRESSIVE PESANO UN PO’ DI PIU’ PERO’ DANNO L’IDEA CHE IL SITO SI STA CARICANDO (A DIFFERENZA DELLE IMMAGINI BASELINE)
  28. E’ POSSIBILE SUGGERIRE/ORDINARE AL BROWSER QUALI RISORSE CARICARE IN BACKGROUND PREFETCH PRERENDER SUBREQUEST PER SFRUTTARE AL MASSIMO QUESTA TECNICA E’ FONDAMENTALE IL CACHING
  29. 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:
  30. CARICAMENTO ISTANTANEO ASSICURIAMOCI CHE LA PAGINA SIA EFFETTIVAMENTE LA PROSSIMA PAGEVIEWS
  31. IMMAGINI HEROSHOT IMMAGINI X LA CALL TO ACTION
  32. TUTTI I PRE VANNO INSERITI NELL’HEAD ESEMPIO DI IMPLEMANTAZIONE PROBABILMENTE CI SONO ACTION PIU’ ADATTE QUALI SONO I CANDIDATI PER IL PRECARICAMENTO?
  33. ALCUNE SOLUZIONI SONO FIGHE MA DI DIFFICILE IMPLEMENTAZIONE (CODICE CUSTOM) SOLUZIONE MIGLIORE TRA IMPLEMENTAZIONE DELLE FEATURES/ TEMPO NECESSARIO A IMPLEMENTARLO