Questo è un articolo dedicato a chi gestisce o utilizza un sito web in WordPress, dal più semplice blog, ai siti più complessi e ha già un po’ di familiarità con le opzioni di WordPress.
Un sito web deve essere veloce. Da sempre (internet parlando) si cerca di rendere più veloce, possibilmente istantaneo, il caricamento delle pagine web.
Come già riportato nel mio precedente articolo, secondo KissMetrics, la velocità è uno degli aspetti chiave dell’usabilità di un sito web oggi, inoltre è indirettamente anche un fattore di posizionamento SEO.
Vediamo quindi come velocizzare un sito web realizzato in WordPress utilizzando dei plugin che semplificano delle procedure che a prima vista possono sembrare ostiche.
Prima di tutto, analizziamo: per capire quanto lavoro ci sia da fare, e quali sono le azioni da intraprendere, testiamo il sito web utilizzando GtMetrix. Questo sito utilizza due strumenti di analisi web, PageSpeed e YSlow per determinare la velocità di caricamento di un sito web e spiega quali azioni intraprendere per ottimizzare e aumentare la velocità.
Le procedure che vedremo in questo articolo riguarderanno la gestione dei contenuti (immagini), tecniche di caching, ottimizzazione del database e compressione server.
Ottimizzare le immagini
Le parti più “pesanti” nel caricamento di una pagina web sono spesso le immagini. Ridurre di dimensione le immagini permette di risparmiare a volte molto tempo nel caricamento di una pagina web. WordPress nativamente cerca sempre di offrire l’immagine ridimensionata alla dimensione che più si avvicina a quella di visualizzazione, ma ci sono anche altri accorgimenti possibili:
- scegliere delle immagini che non siano troppo pesanti prima di caricarle nel sito, o modificarle prima di effettuare l’upload. Evitare immagini più grandi di 2000px di dimensione o che occupino più di 2Mb di spazio.
- usare plugin dedicati per l’ottimizzazione di immagini come EWWW Image Optimizer che permettono di ridurre ulteriormente le dimensioni dell’immagini eliminando informazioni superflue dell’immagine senza perdere in qualità.
Utilizzare degli strumenti di caching
Bello, ma che cosa significa caching? Per spiegarla semplicemente, significa creare delle copie statiche delle proprie pagine web che sono molto più veloci da caricare rispetto alla versione base di WordPress in cui le pagine vengono “compilate” singolarmente ogni volta che viene effettuata una richiesta di visualizzazione.
Ci sono due tipi di caching, quello a livello del client (Client-Side Caching) e quello a livello del server. Il Client-Side Caching è un tipo di caching che viene fatto dal browser del visitatore. Significa che quando un visitatore arriva sul sito web, il suo browser memorizza alcune informazioni del sito web per non doverle più scaricare nuovamente alla prossima visita dello stesso sito web. Per dare informazioni dettagliate al browser su cosa memorizzare e per quanto tempo possiamo utilizzare il file .htaccess, un file di sistema presente in tutte le installazioni di WordPress.
Questo tipo di caching è quello spesso richiamato alla voce“leverage browser caching” nei risultati delle analisi fatte con PageSpeed di Google e potrebbe avere una rilevanza importante.
Attenzione, una premessa è necessaria, modificare il file .htaccess in modo sbagliato potrebbe portare a rendere completamente inutilizzabile e inacessibile il sito web in WordPress, proseguite solo se avete una certa esperienza o capacità di recupero dei file di backup. Le istruzioni riportate di seguito sono valide solo in ambiente Apache.
Per modificare il file .htaccess possiamo usare il plugin WP Htaccess Editor oppure verificare la possibilità di editing di questo file con altri plugin già installati (ad esempio WordPress SEO by Yoast permette la modifica del file .htaccess), o accedervi via FTP.
Fortunatamente non dobbiamo inventarci delle regole, ma possiamo prendere in prestito da uno dei molti codici pronti da usare presenti nel web. Per esempio, prendendo spunto da quello del progetto HTML5 Boilerplate, e copiare queste righe nel nostro file .htaccess:
[code]
# ——————————————————————————
# | Expires headers |
# ——————————————————————————
# Serve resources with far-future expires headers.
# IMPORTANT: If you don’t control versioning with filename-based cache
# busting, consider lowering the cache times to something like one week.
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 year"
# Data interchange
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/vnd.geo+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Favicon (cannot be renamed!) and cursor images
ExpiresByType image/x-icon "access plus 1 week"
# HTML components (HTCs)
ExpiresByType text/x-component "access plus 1 month"
# HTML
ExpiresByType text/html "access plus 0 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 year"
# Manifest files
ExpiresByType application/manifest+json "access plus 1 year"
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Media
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Web fonts
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
</IfModule>
[/code]
Per il Server-Side Caching invece ci possiamo affidare a dei plugin. Il più famoso e diffuso è WP SuperCache: abbastanza semplice da usare, crea delle copie HTML delle pagine WordPress pronte per essere caricate velocemente.
Il secondo plugin è W3 Total Cache, più adatto ad utenti esperti che sappiano navigare nelle svariate combinazioni di impostazioni che questo plugin offre.
Ottimizzazione del Database
Il database MySQL è il “centro neurale” di WordPress, dove vengono memorizzate tutte le informazioni. Ogni operazione effettuata nel sito web si traduce in un’informazione memorizzata nel database. Ogni utente, post, commento, tutto viene salvato nel database. Quindi mantenerlo “agile” può essere un buon modo per avere un sito più veloce.
Ci sono alcune informazioni memorizzate nel database che possono essere considerate superflue, come tutte le revisioni di tutti i post ad imperitura memoria o commenti di spam, o metadati di cui non conosciamo nemmeno l’esistenza. Per effettuare tutte queste operazioni di pulizia in maniera semplice e veloce viene in nostro aiuto un plugin WP Optimize che ci permette di effettuare alcuni “ritocchi” al database per renderlo più snello:
- La rimozione delle revisioni di vecchi post
- Rimozione di vecchi commenti non approvati e di spam
- Rimozione di commenti cestinati
- La rimozione di tutti i trackbacks e pingbacks
- Pulizia delle bozze automatiche
e molto altro…
Compressione
Come per i documenti inviati via posta, anche le pagine web se inviate compresse, occupano meno spazio e possono essere trasferite più velocemente. C’è uno standard di compressione per il web denominato Compressione Gzip che permette ai server web di fornire ai browser delle pagine compresse. Per abilitare la compressione Gzip ci sono diversi metodi, il più semplice consiste nell’usare il plugin WordPress Gzip Compression e lasciare fare a lui tutto il lavoro. Perchè questo funzioni, il modulo deve essere attivato nel server solitamente dal gestore di hosting web.
Il metodo manuale invece implica nuovamente la modifica del file .htaccess (rimangono valide le raccomandazioni fatte precedentemente) inserendo questo codice all’interno:
[code]
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
[/code]
Potete scegliere indistintamente uno tra i due metodi. Per verificare che effettivamente la compressione funzioni potete usare questo test online: HTTP Compression Test
Bene, dopo che avrete fatto un po’ di modifiche al vostro sito in WordPress potrete tornare a misurare i risultati su GtMetrix per vedere se avete fatto un buon lavoro di ottimizzazione.
Non resta che mettersi all’opera, e condividere i vostri risultati!
