Downloaded 31 times
![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](https://image.slidesharecdn.com/cardinali-wpo-151113175741-lva1-app6892/75/WPDay-2015-WordPress-Performance-Optimization-Pordenone-13-Novembre-2015-40-2048.jpg)
Uploaded byAndrea Cardinali
WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015
Il documento tratta l'ottimizzazione delle prestazioni di WordPress, evidenziando l'importanza della velocità del sito web per migliorare l'esperienza utente e il posizionamento SEO. Viene discusso come ridurre il tempo di caricamento attraverso tecniche come il caching, il minifying delle risorse e il caricamento asincrono di script. Inoltre, sottolinea che la maggior parte del tempo di caricamento è influenzata dal frontend e fornisce strumenti utili per misurare e migliorare le prestazioni del sito.
More Related Content
Similar to WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015
WPDay 2015 - WordPress Performance Optimization - Pordenone - 13 Novembre 2015
- 1. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 W.P.O. WORDPRESS PERFORMANCE OPTIMIZATION 1 Andrea Cardinali – T.C. Informatica
- 2. WPDay - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 #PERFMATTERS 3
- 4. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 #PERFISMONEY 7
- 8. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 IL TEMPO È DENARO 8
- 9. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 #PERFISSEO 9
- 10. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 #PERFISUX 12
- 13. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 IL 33% DEGLI UTENTI INSODDISFATTI RACCONTERÀ LA SUA UX NEGATIVA Fonte: Radware Fastview 2015 15
- 16. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 COSA SIGNIFICA VELOCE ? 18
- 19. WPDay - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 SITO VELOCE = 1 SECONDO 20
- 21. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 É TUTTA COLPA DEL BACKEND ? 21
- 22. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 >80% DEL TEMPO DIPENDE DAL FRONTEND 22
- 23. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 >80% DEL TEMPO DIPENDE DAL FRONTEND 23
- 24. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 AUMENTARE LA VELOCITA’ 24
- 25. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 CIÒ CHE NON È MISURABILE NON È MIGLIORABILE 25 “ “ Galileo Galilei
- 26. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 DIMINUIRE IL PESO DELLA PAGINA 28
- 29. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 RIDURRE RICHIESTE HTTP 31
- 32. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 ESEMPIO DI RICHIESTE HTTP 32
- 33. WPDay - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 ABILITARE CACHING 34
- 35. WPDay - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 AUMENTARE LA VELOCITA PERCEPITA 36
- 37. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 PRIORITÀ AI CONTENUTI VISIBILI 37
- 38. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 LAZY LOAD IMMAGINI <img src=‘placeholder.png’ data-src=‘original.png’ /> 41
- 42. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 JPEG PROGRESSIVE 44 Immagine sfocataImmagine «bianca»
- 45. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 PRECARICAMENTO RISORSE 45
- 46. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 PRE-* PARTY 46
- 47. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 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 - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 IDENTIFICATE I PERCORSI DI NAVIGAZIONE ABITUALI CON GOOGLE ANALYTICS 51
- 52. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 COME IMPLEMENTARE (QUASI) TUTTO? 52
- 53. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 W3 TOTAL CACHE 53
- 54. WPDay - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 55 ‘ “THE FASTEST BYTE IS A BYTE NOT SENT Ilya Gregorik Web Performance Engineer @ Google “
- 56. WPDay - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 DOMANDE? 56
- 57. WPDay - 13Novembre 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 - 13Novembre 2015 - Pordenone - @andreacardinali -https://joind.in/15560 E IL BACKEND? 58
- 59. WPDay - 13Novembre 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 - 13Novembre 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 - 13Novembre 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
- #2 WPO
- #4 HASHTAG GOOGLE UTENTI MOBILE CONNESSIONE LENTA PAGINE PESANTI
- #7 TREND IN CRESCITA. PAGINE + PESANTI.
- #8 IMPATTO DELLA VELOCITA METRICHE UTENTE CONVERSIONI BOUNCE
- #9 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
- #10 COSA CENTRA LA SEO? LA SEO E’ PER GLI UTENTI IL SUCCESSO DEGLI MDR DIPENDE DALLA UX FATTORE DI RANKING CRAWL BUDGET
- #13 ESPERIENZA UTENTE PROVOCA EMOZIONI NAVIGAZIONE LENTA = EMOZIONI NEGATIVE NUMEROSI STUDI A RIGUARDO (NE HO SCELTI 3)
- #14 Test effettuato con elettroencefalogramma Condizioni di navigazione ideale NON SONO STATI CONSIDERATI USABILITA’ + FATTORI ESTERNI
- #15 ABBANDONA IL SITO E VA SUL SITO DEL COMPETITORS
- #16 Test effettuato con elettroencefalogramma Condizioni di navigazione ideale In real life, performance issues are compounded by many other usability issues and external factors.
- #17 L’UTENTE VUOLE: UN SITO VELOCE ALMENO QUANTO QUELLO DESKTOP ACQUISTARE DA MOBILE
- #19 L’UTENTE VUOLE VELOCITA’. LENTEZZA = FRUSTRAZIONE E PERDITA DI CONTROLLO EMOZIONE NEGATIVE
- #22 SE PENSATE DI SI VI SBAGLIATE. LA REALTA’ E’ BEN DIVERSA.
- #24 CI CONCENTREREMO QUINDI SULLE
- #25 PASSIAMO ALLA PARTE PRATICA Vediamo ora come migliorare la velocità del sito
- #26 ESISTONO DEI TOOLS PER MISURARE LA VELOCITA’ DEL SITO TUTTI I BROWSER IMPLEMENTANO IL WATERFALL NELLA CONSOLLE DI SVILUPPO
- #27 R.U.M. monitorare il comportamento dell’utente
- #28 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
- #29 CSS INUTILE (ES. FRAMEWORK CSS BOOTSTRAP) MINIFY GZIP
- #31 SEPARARE REGISTER DA ENQUEUE
- #32 KEEP-ALIVE COMBINE SPRITES CSS
- #35 EVITO DI SCARICARE SEMPRE LE STESSE RISORSE RISPARMIO BANDA
- #37 LA VELOCITA NON E’ SOLO UNA QUESTIONE DI SECONDI LE TECNICHE CHE STIAMO X VEDERE AGISCONO SULLA PERCEZIONE DELL’UTENTE
- #38 L’OBIETTIVO E’ DARE ALL’UTENTE LA POSSIBILITA’ DI INTERAGIRE NEL MINOR TEMPO POSSIBILE CON LA PAGINA
- #42 IMMAGINI 60% DEL PESO COMPLESSIVO FILTRO POST_THUMBNAIL_HTML + PREG_REPLACE
- #43 CSSOM: CSS Object Model: mappa le regole css sugli elementi del DOM che necessitano di stile
- #45 LE IMMAGINI PROGRESSIVE PESANO UN PO’ DI PIU’ PERO’ DANNO L’IDEA CHE IL SITO SI STA CARICANDO (A DIFFERENZA DELLE IMMAGINI BASELINE)
- #46 E’ POSSIBILE SUGGERIRE/ORDINARE AL BROWSER QUALI RISORSE CARICARE IN BACKGROUND PREFETCH PRERENDER SUBREQUEST PER SFRUTTARE AL MASSIMO QUESTA TECNICA E’ FONDAMENTALE IL CACHING
- #48 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:
- #49 CARICAMENTO ISTANTANEO ASSICURIAMOCI CHE LA PAGINA SIA EFFETTIVAMENTE LA PROSSIMA PAGEVIEWS
- #50 IMMAGINI HEROSHOT IMMAGINI X LA CALL TO ACTION
- #51 TUTTI I PRE VANNO INSERITI NELL’HEAD ESEMPIO DI IMPLEMANTAZIONE PROBABILMENTE CI SONO ACTION PIU’ ADATTE QUALI SONO I CANDIDATI PER IL PRECARICAMENTO?
- #53 ALCUNE SOLUZIONI SONO FIGHE MA DI DIFFICILE IMPLEMENTAZIONE (CODICE CUSTOM) SOLUZIONE MIGLIORE TRA IMPLEMENTAZIONE DELLE FEATURES/ TEMPO NECESSARIO A IMPLEMENTARLO