Come velocizzare un sito WordPress

In questo articolo voglio dare alcuni suggerimenti che possono essere messi in pratica da tutti per velocizzare il proprio sito web WordPress. Alcuni dei consigli saranno regole da utilizzare con costanza, altri invece configurazioni e strumenti (come i plugin) che è bene considerare quando si lancia un sito per la prima volta o quando si decide di migliorare le performance di un sito esistente.
Abbiamo visto nel precedente articolo come testare la velocità di un sito e quali strumenti utilizzare per analizzare gli ambiti in cui è possibile migliorarsi. Oggi ci concentreremo su una serie di caratteristiche che i tool di analisi che abbiamo visto ci consigliano di ottimizzare per aumentare la velocità di caricamento di un sito e vedremo quali plugin e azioni compiere per risolvere i problemi segnalati.

Diminuire il peso complessivo per il download di una pagina del sito

Sul peso complessivo di una pagina incidono principalmente:

  1. Il codice HTML
  2. Eventuali file di nostra proprietà (CSS, JavaScript, immagini, font)
  3. Eventuali file esterni di terze parti (CSS, JavaScript, immagini, font)

I primi due possono essere controllati da noi, mentre per gli altri (si pensi ad esempio allo JavaScript di Google Analytics o a quello per il pulsante Mi Piace di Facebook) possiamo fare ben poco. Per esempio, nel caso dei vari JavaScript usati per visualizzare i pulsanti di condivisione sociale, potremmo decidere di caricarli solo quando necessari, ma non potremo sicuramente intervenire per diminuirne il peso. Cosa che invece possiamo fare nel codice HTML e nei file di nostra proprietà.
Per ridurre il peso di una pagina possiamo quindi intervenire comprimendo le informazioni che inviamo dal server al browser utilizzando la compressione GZIP (o “deflate”). L’effetto, in parole povere, è quello di zippare il contenuto delle richieste HTTP prima di inviarle al browser (come fate quando inviate degli allegati con uno archivio compresso in zip via mail).
Per farlo potete inserire il seguente codice nel file .htaccess all’interno della root del vostro sito:

<IfModule mod_deflate.c>

    <IfModule mod_headers.c>

        Header append Vary User-Agent env=!dont-vary

    </IfModule>

        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json

    <IfModule mod_mime.c>

        # DEFLATE by extension

        AddOutputFilter DEFLATE js css htm html xml

    </IfModule>

</IfModule>

L’ho preso direttamente da quello generato dal plugin per WordPress W3 Total Cache (di cui vi parlerò nei prossimi articoli di questa serie) che uso di solito. Ovviamente il server Apache su cui è presente il vostro sito deve avere tale funzionalità attiva (potete sentire l’assistenza tecnica del vostro hosting a tal proposito).
Una volta abilitata la compressione GZIP, potrete verificare che sia effettivamente in uso guardando (ad esempio con Firebug) le intestazioni di risposta (header), in particolare la voce “Content-Encoding” che avrà come valore “gzip”.

content-encoding-gzip

Altra operazione che possiamo fare per ridurre i tempi di download è quella di minificare il codice HTML e le risorse esterne come JavaScript e CSS. Minificare significa sostanzialmente “togliere il superfluo” e si traduce nella rimozione degli spazi e degli “a capo” non necessari, riducendo di fatto il peso del file. Tipicamente, se osservate un file minificato, vedrete tutot il codice su una sola riga.
Possiamo effettuare “manualmente” questa operazione utilizzando dei tool online per la minificazione e poi caricare nuovamente i file nel server via FTP avendo cura di salvarne una copia per eventuali modifiche future. Il tool che uso da anni a questo scopo è l’ottimo prodotto da Refresh.SF che utilizza una delle migliori librerie per la compressione di file CSS e JavaScript, ovvero YUI Compressor di Yahoo.
Per minificare i file in modo automatico su WordPress ho usato in passato un plugin chiamato Wp Minify, che minificava il codice HTML ed i file CSS e JavaScript. Scopro oggi che ne esiste una versione migliorata che si chiama Better Wp Minify, ma non l’ho mai usato dato che sono passato da tempo all’uso della funzionalità di minificazione presente sul plugin W3 Total Cache di cui vi parlerò nei prossimi appuntamenti della serie.
Se siete degli sviluppatori e avete una buona conoscenza delle varie librerie JavaScript (e i relativi CSS), potrebbe essere interessante andare a rimuovere quelle che effettivamente non vengono usate. Mi sono trovato più di qualche volta ad utilizzare temi premium con decine di funzionalità che in realtà non venivano usate nel sito reale.
Ho visto cose che voi sviluppatori WordPress…. :)
Ho visto temi caricare 3 librerie diverse per “funzionalità Lightbox” (lo zoom delle immagini per capirci) perché nelle opzioni del tema c’era la possibilità di scegliere quale delle 3 usare. Sarebbe bastato caricare dinamicamente la libreria corrispondente all’opzione scelta dall’utilizzatore, ma magari la scelta era stata presa per velocizzare lo sviluppo… o forse perché “cattivi programmatori” hanno preferito caricarle sempre tutte. Perciò controllate bene cosa viene caricato dal vostro tema! Forse non avete bisogno della libreria per gestire i PodCast, ma loro per sicurezza ve la mettono lo stesso!

Consiglio: per trovare le risorse JavaScript e CSS caricate dal vostro tema cercate nella relativa cartella le chiamate alle funzioni wp_enqueue_script e wp_enqueue_style oppure cercate i nomi dei file

Ultimo accorgimento da adottare per diminuire il peso del download è ottimizzare le immagini per il web. Personalmente salvo le immagini con Photoshop utilizzando la funzione “Salva per web…” e scegliendo il formato più opportuno caso per caso. Se non avete a disposizione un programma per il fotoritocco, potete usare il tool online di Yahoo chiamato SmushIt o attivare il plugin che ne sfrutta le capacità e ottimizza (comprime senza perdita di qualità) tutte le immagini che caricherete su WordPress, ovvero Wp SmushIt. Il plugin permette inoltre di ottimizzare tutte le immagini già caricate nel vostro sito tramite la funzione “Bulk SmushIt”.
Se il vostro server non è sufficientemente potente, vi consiglio di ottimizzare le immagini prima di caricarle ed evitare l’uso di questo plugin. Questo perché, da un lato avreste immagini compresse per il web in modo automatico, dall’altro però aumentereste l’utilizzo delle risorse del server e potreste rallentare la velocità di risposta dello stesso.

Diminuire il numero di richieste HTTP

Oltre alla richiesta per ottenere il codice HTML della pagina, un browser fa tante altre richieste per caricare le immagini, eventuali font, i file JavaScript e quelli CSS. Immaginate per semplicità che un browser possa effettuare una sola richiesta alla volta e debba attenderne il completamento prima di passare alla successiva. In questo scenario, il numero di file (e quindi di richieste HTTP) esterni che caricherete oltre all’HTML della pagina andrà ad influire proporzionalmente sui tempi di caricamento della pagina.
È chiaro quindi che minimizzare le richieste HTTP può essere un accorgimento valido per velocizzare i tempi di caricamento di una pagina. Questo può essere realizzato concatenando file simili in un unico file da servire sfruttando una sola richiesta HTTP.
A titolo di esempio, supponete di avere un sito che utilizza 4 file JavaScript, 4 file CSS, 4 immagini usate per comporne la UI e 2 immagini per i contenuti.
Concatenando i file simili passeremo da 1+4+4+4+2 = 15 richieste HTTP a 1+1+1+1+2 = 6. Come ho fatto? Ho concatenato i file di tipo simile. La concatenazione potete farla “manualmente” creando un nuovo file dove inserire i singoli file che caricavate in precedenza (avendo cura di rispettarne l’ordine di inclusione). Avremo quindi un file all.js, un file all.css, un file sprite.png (utilizzando la tecnica degli sprite CSS) che ci permetteranno di diminuire le richieste HTTP.
Se concatenate i file e poi li minificate otterrete un doppio beneficio.
Non conosco un plugin che faccia esattamente questo “lavoro”, ma il plugin W3 Total Cache fa anche questo!
Se fate largo uso di immagini, ad esempio scrivete tutorial con molti screenshot, potete valutare l’utilizzo di un plugin come jQuery Image Lazy Loading. Come avrete intuito dal nome carica le immagini in modo asincrono man mano che l’utente scrolla la pagina, riducendo di fatto il numero di richieste HTTP per il primo caricamento della pagina.

Sfruttare la cache del browser

Tramite l’uso delle intestazioni di richiesta (request headers), un browser è in grado di valutare se scaricare o meno una risorsa. Perciò se il vostro server è configurato correttamente potreste voler comunicare al browser che alcune risorse non sono cambiate dal suo ultimo accesso e risparmiare così tempo e banda.
Immaginate la libreria JavaScript jQuery o il framework Bootstrap: quante volte vi è capitato di modificare questi file se non per aggiornarne la versione? Di fatto, se il vostro sito non viene correttamente istruito per “parlare con il browser”, scaricherà a ogni richiesta di una nuova pagina questi file, anche se non sono cambiati e ne possiede una copia recente nella sua cache locale.
Anche in questo caso potete agire “manualmente” creando le regole nel vostro .htaccess. Qui riporto un esempio estratto dal file .htaccess generato da W3 Total Cache:

<IfModule mod_expires.c>

    ExpiresActive On

    ExpiresByType text/css A31536000

    ExpiresByType text/x-component A31536000

    ExpiresByType application/x-javascript A31536000

    ExpiresByType application/javascript A31536000

    ExpiresByType text/javascript A31536000

    ExpiresByType text/x-js A31536000

    ExpiresByType text/html A3600

    ExpiresByType text/richtext A3600

    ExpiresByType image/svg+xml A3600

    ExpiresByType text/plain A3600

    ExpiresByType text/xsd A3600

    ExpiresByType text/xsl A3600

    ExpiresByType text/xml A3600

    ExpiresByType video/asf A31536000

    ExpiresByType video/avi A31536000

    ExpiresByType image/bmp A31536000

    ExpiresByType application/java A31536000

    ExpiresByType video/divx A31536000

    ExpiresByType application/msword A31536000

    ExpiresByType application/vnd.ms-fontobject A31536000

    ExpiresByType application/x-msdownload A31536000

    ExpiresByType image/gif A31536000

    ExpiresByType application/x-gzip A31536000

    ExpiresByType image/x-icon A31536000

    ExpiresByType image/jpeg A31536000

    ExpiresByType application/json A31536000

    ExpiresByType application/vnd.ms-access A31536000

    ExpiresByType audio/midi A31536000

    ExpiresByType video/quicktime A31536000

    ExpiresByType audio/mpeg A31536000

    ExpiresByType video/mp4 A31536000

    ExpiresByType video/mpeg A31536000

    ExpiresByType application/vnd.ms-project A31536000

    ExpiresByType application/x-font-otf A31536000

    ExpiresByType application/vnd.ms-opentype A31536000

    ExpiresByType application/vnd.oasis.opendocument.database A31536000

    ExpiresByType application/vnd.oasis.opendocument.chart A31536000

    ExpiresByType application/vnd.oasis.opendocument.formula A31536000

    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000

    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000

    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000

    ExpiresByType application/vnd.oasis.opendocument.text A31536000

    ExpiresByType audio/ogg A31536000

    ExpiresByType application/pdf A31536000

    ExpiresByType image/png A31536000

    ExpiresByType application/vnd.ms-powerpoint A31536000

    ExpiresByType audio/x-realaudio A31536000

    ExpiresByType image/svg+xml A31536000

    ExpiresByType application/x-shockwave-flash A31536000

    ExpiresByType application/x-tar A31536000

    ExpiresByType image/tiff A31536000

    ExpiresByType application/x-font-ttf A31536000

    ExpiresByType application/vnd.ms-opentype A31536000

    ExpiresByType audio/wav A31536000

    ExpiresByType audio/wma A31536000

    ExpiresByType application/vnd.ms-write A31536000

    ExpiresByType application/font-woff A31536000

    ExpiresByType application/vnd.ms-excel A31536000

    ExpiresByType application/zip A31536000
</IfModule>

ma se non ve la sentite potete usare il plugin citato. Nel prossimo articolo vi mostrerò come configurare W3 Total Cache.

Sfruttare la cache di WordPress

Quando un browser richiede una pagina di un sito WordPress il motore del CMS genera la pagina “al volo” caricando i dati (i contenuti) dal database (facendo query SQL), eseguendo il codice PHP di plugin, shortcode, del tema e dei widget e inviando infine la risposta con il relativo HTML.
Le pagine di un sito WordPress però non cambiano in continuazione, perciò è possibile diminuire i tempi di risposta creando delle copie statiche delle pagine ed evitando quindi di “fare i conti” a ogni richiesta.
Uno dei migliori plugin che gestisce la cache di WordPress è senza dubbio Wp Super Cache. Semplificando ecco come funziona:

  1. Il browser richiede la pagina /esempio.html
  2. Il plugin verifica se ha già creato una copia statica di questa pagina, a titolo di esempio potrebbe cercare se esiste il file esempio_cache.html. Se non esiste, “passa la palla” a WordPress che andrà a generare la pagina eseguendo il ciclo di operazioni completo (e costoso in termini di performance). A questo punto il plugin ne memorizza una copia statica creando il file esempio_cache.html
  3. Se invece la copia statica esiste, il plugin risponde direttamente al browser senza passare per WordPress ed eliminando quindi i tempi per la generazione dinamica della stessa

La gestione della cache è un po’ più complessa, ma ho fatto questo esempio solo per farvi capire il vantaggio in termini di prestazioni che si può ottenere con questa funzionalità. Anche W3 Total Cache, come ormai immaginerete se siete giunti a questo punto, ha questa funzione :)

L’immagine qui sotto dovrebbe rendere più chiaro quanto detto:

pagecache

Ottimizzare il database di WordPress

Come appena visto, quando WordPress crea dinamicamente una pagina utilizza il database MySQL per recuperare le configurazioni e i contenuti che gli servono per creare l’HTML. Perciò ottimizzare il database per renderlo più veloce è sicuramente una buona pratica. Questo si traduce in una corretta manutenzione dello stesso, ad esempio eliminando i commenti in spam, le opzioni transienti e, come abbiamo visto in questo articolo, eliminando o limitando le revisioni.
Ci sono molti plugin utili allo scopo, io mi trovo bene con Wp-Optimize.
Altra cosa che è possibile fare invece con W3 Total Cache (che, sorpresaaaa! …non fa quanto descritto sopra) è usare la cache per le query a database. Ne parlerò in seguito.

Eliminare i plugin superflui o troppo affamati di risorse

Come regola generale cerco sempre di limitare l’uso dei plugin WordPress allo stretto indispensabile. Questa pratica, oltre a mantenere gli aggiornamenti più snelli e potenzialmente meno pericolosi, ha anche il non trascurabile effetto di rendere tutto l’ambiente più reattivo e di aumentare quindi le performance generali del vostro sito WP.
La prima cosa da fare è eliminare tutti i plugin che vi ho suggerito in questo articolo (sento fischiare le orecchie!) in favore di W3 Total Cache, che svolge a mio avviso egregiamente quanto descritto.
La seconda è quella di identificare e rimuovere (o disattivare) i plugin che non sono necessari o che consumano troppe risorse. Per esempio, quando non utilizzate l’ottimo plugin citato sopra per la manutenzione del database (Wp-Optimize) disattivatelo. O ancora quando usate plugin per fare cose facilmente rimpiazzabili con qualche riga di codice (che siate voi a scriverlo o un programmatore esperto)… qui ne potremmo parlare per giorni!
Un modo per capire quali sono i plugin che potrebbero rallentare il vostro sito è quello di… rullo di tamburi… installare un altro plugin chiamato P3 (Plugin Performance Profiler) che, ironia del caso, permette di valutare il carico di lavoro che ogni singolo plugin ha sulle richieste al sito. In questo modo potreste riuscire ad identificare un collo di bottiglia o semplicemente un plugin programmato in modo non ottimale.

Conclusioni

Abbiamo visto in questo articolo diverse strategie e plugin per velocizzare un sito WordPress. Per correttezza è giusto dire che, anche mettendo in piano tutti questi accorgimenti, se il vostro sito è ospitato in un hosting scadente difficilmente riuscirete a trarre sostanziali benefici, ma sarà sicuramente migliore rispetto allo stato in cui era quando avete iniziato l’ottimizzazione.
Altra cosa che mi sento di puntualizzare riguarda la sicurezza di WordPress. Vi consiglio vivamente di rendere sicuro WordPress perché alcune tipologie di attacco che ho subito (ne ho parlato nell’articolo appena linkato) andavano proprio a consumare le risorse del server nel sito e di fatto a rallentarlo diminuendo a vista d’occhio (e di browser :)) le prestazioni.
Come avrete capito, la maggior parte delle funzionalità descritte in questo articolo si possono attuare con un solo plugin: W3 Total Cache. In attesa del prossimo articolo, in cui vi spiegherò come configurare W3 Total Cache dalla A alla Z, fatemi sapere nei commenti quali strategie utilizzate per velocizzare i vostri siti, quali plugin sono presenti nella vostra installazione WordPress (relativi alle performance) e se avete consigli aggiuntivi da dare sono ben accetti. Alla prossima.

Tag: , , , ,

L'autore

Niki Rocco è Co-fondatore di Adviva, web agency specializzata nella realizzazione di siti web ed e-commerce con una particolare attenzione alla SEO e alla conversione/vendita. Ha una passione sfrenata per il web, la SEO e WordPress. Lo trovi su Google+

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

13 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo