wpday 2015 - wordpress performance optimization - pordenone - 13 novembre 2015

WPDay - 13 Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560

W.P.O. WORDPRESS PERFORMANCE

OPTIMIZATION

1

Andrea Cardinali – T.C. Informatica


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


#PERFMATTERS

3


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


UNA PAGINA PESA IN MEDIA 1.9 MB

Fonte: web.archive.org Top 1000 sites Nov.15


#PERFISMONEY

7


IL TEMPO È DENARO

8


#PERFISSEO

9


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/





















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


#PERFISUX

12


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


L’80% DEGLI UTENTI È DISPOSTO AD ASPETTARE AL MASSIMO 3 SECONDI

PRIMA DI ABBANDONARE IL SITO.

Fonte: Radware Fastview 2015

14


IL 33% DEGLI UTENTI INSODDISFATTI RACCONTERÀ LA SUA UX NEGATIVA

Fonte: Radware Fastview 2015

15


IL 60% DEGLI UTENTI MOBILE SI ASPETTA LA STESSA USER EXPERIENCE SU MOBILE E

DESKTOP Fonte: Radware Fastview 201511

16


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


COSA SIGNIFICA VELOCE ?

18


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

http://www.nngroup.com/articles/website-response-times/1








SITO VELOCE = 1 SECONDO

20


É TUTTA COLPA DEL BACKEND ?

21


>80% DEL TEMPO DIPENDE DAL FRONTEND

22


>80% DEL TEMPO DIPENDE DAL FRONTEND

23


AUMENTARE LA VELOCITA’

24


CIÒ CHE NON È MISURABILE NON È MIGLIORABILE

25

“ “

Galileo Galilei


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

https://gtmetrix.com/

http://www.webpagetest.org/

http://tools.pingdom.com/

http://google.com/intl/it/analytics

http://google.com/intl/it/analytics

appdynamics.com

http://newrelic.com/


VELOCITÁ SECONDO IL W3C

27

T.T.I. TIME TO INTERACTIVE DOCUMENT TIP: Digita Performance.timing nella consolle


DIMINUIRE IL PESO DELLA PAGINA

28


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)

http://www.minifycss.com/css-compressor/






http://refresh-sf.com/yui/




http://jscompress.com/

http://jscompress.com/

https://github.com/addyosmani/critical



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’);

}

}


RIDURRE RICHIESTE HTTP

31


ESEMPIO DI RICHIESTE HTTP

32


RIDURRE RICHIESTE HTTP

• Abilitare Keep-Alive • Combine css, js • Css sprites • Inclusione condizionale js/css • Abilitare Caching

33


ABILITARE CACHING

34


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


AUMENTARE LA VELOCITA PERCEPITA

36


PRIORITÀ AI CONTENUTI VISIBILI

37


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


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


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

http://caniuse.com/#search=defer

http://caniuse.com/#search=defer

http://caniuse.com/#search=async

http://caniuse.com/#search=async


LAZY LOAD IMMAGINI

<img src=‘placeholder.png’ data-src=‘original.png’ />

41


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)


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




JPEG PROGRESSIVE

44

Immagine sfocata Immagine «bianca»


PRECARICAMENTO RISORSE

45


PRE-* PARTY

46


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>

http://caniuse.com/#search=prefetch


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>

http://caniuse.com/#search=pre-render





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>


IMPLEMENTAZIONE PRE-*

50

add_action(‘wp_head’,’print_risorse_prefetch’)

function print_risorse_prefetch ()

{

echo “<link rel=‘subresource’ href=‘heroshot.png’>”;

}


IDENTIFICATE I PERCORSI DI NAVIGAZIONE ABITUALI CON

GOOGLE ANALYTICS

51


COME IMPLEMENTARE (QUASI) TUTTO?

52


W3 TOTAL CACHE

53


• 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/








‘

“ THE FASTEST BYTE IS A BYTE NOT SENT

Ilya Gregorik Web Performance Engineer @ Google

“


DOMANDE?

56


GRAZIE

E-mail:[email protected]:@andreacardinali Linkedin: Andrea Cardinali Slideshare: http://www.slideshare.net/andreacardinali

LASCIATEMI UN FEEDBACK: https://joind.in/15560

57

mailto:[email protected]

https://twitter.com/andreacardinali


https://it.linkedin.com/in/cardinaliandrea

http://www.slideshare.net/andreacardinali




E IL BACKEND?

58


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)


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


GRAZIE

E-mail:[email protected]:@andreacardinali Linkedin: Andrea Cardinali Slideshare: http://www.slideshare.net/andreacardinali

LASCIATEMI UN FEEDBACK: https://joind.in/15560

61

mailto:[email protected]



https://it.linkedin.com/in/cardinaliandrea




wpday 2015 - wordpress performance optimization - pordenone - 13 novembre 2015

Technology