Successfully reported this slideshow.

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

6

Share

1 of 61
1 of 61

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

6

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

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

  • 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
  • CSS INUTILE (ES. FRAMEWORK CSS BOOTSTRAP)
    MINIFY
    GZIP
  • SEPARARE REGISTER DA ENQUEUE
  • KEEP-ALIVE
    COMBINE
    SPRITES CSS
  • 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
  • ×