Velocizzare WordPress

La maggior parte degli utenti di Internet odia i siti web che impiegano un’eternità a caricarsi e, dopo aver aspettato pochi secondi, solitamente clicca sul pulsante “indietro” prima che i contenuti del sito vengano caricati.

In effetti, visitare un sito web lento è una pessima esperienza per il navigatore.

Un tempo di caricamento ritardato di una pagina web influisce direttamente su fattori quali frequenze di rimbalzo elevata e tassi di conversione ridotti che, purtroppo, si traducono nella perdita di numerose potenziali vendite.

Inoltre, Google utilizza la velocità di caricamento delle pagine web come fattore di posizionamento nei risultati di ricerca: un sito veloce ha più possibilità ha di posizionarsi meglio nelle SERP di Google.

Velocizzare il tuo sito WordPress, oltre a creare un’esperienza utente migliore, può aumentare il tasso di conversione.

Hai realizzato un sito con WordPress che è lento a caricarsi? Niente panico: ti basterà mettere in pratica i seguenti consigli per velocizzare WordPress.

Per accelerare WordPress e caricare il tuo sito il più rapidamente possibile, devi adottare un approccio ampio e prendere in considerazione diversi aspetti.

In questo articolo trovi varie strategie e strumenti che ti aiuteranno a velocizzare il tuo sito WordPress.

• Scegli un hosting ottimizzato per WordPress
• Evita i plugin lenti
• Utilizza un tema leggero
• Limita le revisioni degli articoli
• Ottimizza le immagini
• Minimizza il codice e concatena i file
• Utilizza un plugin di cache
• Imposta la cache del browser
• Attiva il protocollo HTTP/2
• Implementa un Content Delivery Network
• Riduci le richieste HTTP
• Imposta i font di sistema
• Disabilita l’hotlinking
• Disabilita i pingback
• Attiva il lazy load
• Ottimizza il database
• Attiva la compressione GZIP

Scegli un hosting ottimizzato per WordPress

Partiamo da un consiglio che non riguarda direttamente il sito web ma che può sicuramente fare una grossa differenza in termini di velocità.

Tutti gli altri consigli che troverai in questo articolo riguarderanno modifiche da effettuare direttamente sul tuo sito web ma, prima di di tutto, devi tenere a mente una cosa molto importante: la velocità del tuo tuo sito è strettamente legata al servizio di hosting dove è ospitato.

Seguendo gli altri consigli presenti in questa guida puoi sicuramente ridurre i tempi di caricamento del tuo sito web, ma senza un hosting di qualità la sua velocità sarà comunque limitata.

Cosa rende un hosting orientato alle prestazioni?

Una caratteristica molto importante che deve avere un hosting ottimizzato per WordPress è la possibilità di utilizzare PHP 7+: infatti, PHP 7 offre enormi miglioramenti delle prestazioni rispetto alle versioni precedenti (che sono ancora in esecuzione su molti servizi di hosting).

Oltre alla versione PHP 7+, l’hosting ideale deve avere MySQL 5.6 o superiore e WordPress Memory Limit 64 MB o maggiore.

Inoltre, un hosting WordPress di qualità offre spazio web e database ospitati su dischi SSD che hanno velocità di lettura e scrittura nettamente superiori rispetto agli HD tradizionali.

Esistono diversi hosting web di qualità che dispongono di tutte le caratteristiche che ho appena indicato ma, se cerchi un hosting italiano ottimizzato per WordPress, mi sento di consigliarti ServerPlan, perché lo utilizzo da parecchi anni con soddisfazione su molti siti web che gestisco (sia di mia proprietà che per conto dei miei clienti).

ServerPlan

ServerPlan offre un servizio di hosting per WordPress di altissima qualità, punta tutto su hardware all’avanguardia e ottima assistenza.

Clicca qui per visualizzare i piani WordPress di ServerPlan e scegli quello più adatto al tuo progetto; tutti i piani includono il costo del dominio.

Evita i plugin lenti

Sfortunatamente tra gli oltre 50.000 plugin presenti nel repository di WordPress e molti altri plugin premium, ce ne sono molti realizzati male e che possono compromettere parecchio la velocità di un sito WordPress.

Contrariamente a quanto di solito si crede, non tutti i plugin influiscono negativamente sulla velocità del sito, purtroppo però molti plugin lo fanno.

Questo accade perché molti sviluppatori non si preoccupano affatto delle prestazioni, quindi il numero di plugin che usi non è importante quanto la loro codifica.

La buona notizia è che sono molti gli sviluppatori che si preoccupano delle prestazioni e che realizzano plugin ottimi, molto leggeri e che non rallentano (se non in minima parte) il sito web sul quale vengono installati.

Invece di provare a rimuovere arbitrariamente i plugin, dovresti cercare in particolare di ridurre il numero di plugin che stanno effettivamente rallentando il tuo sito.

Quali plugin stanno rallentando il tuo sito?

Ci sono delle soluzioni abbastanza semplici per trovare i plugin che influiscono maggiormente sulle performance del tuo sito web.

Puoi ricorrere all’utilizzo di servizi online come GTmetrix o Pingdom Website Speed Test.

Ti basta inserire l’URL del tuo sito nell’apposito campo e guardare le varie richieste per trovare eventuali colli di bottiglia, puoi passare il mouse sopra una richiesta e guardare l’URL per avere un’idea più precisa di quale plugin effettua ogni richiesta.

Un’altra buona opzione per capire quali tra i plugin installati abbiano un forte impatto sulla velocità del tuo sito web è il plugin gratuito Query Monitor.

Una volta che hai capito quali plugin che rallentano il tuo sito, ti consiglio di rimuoverli se non sono strettamente necessari oppure di trovare plugin alternativi meno pesanti.

Utilizza un tema leggero

Sicuramente, il tema è uno dei fattori determinanti della velocità di caricamento di un sito WordPress.

Un tema WordPress orientato alle prestazioni e alla velocità di caricamento dovrebbe, oltre ad essere leggero in termini di dimensioni del file, disporre di un sistema di richieste modulare in modo da poter attivare solo le funzioni necessarie ed evitare di caricare risorse inutili.

Da quando ho installato il nuovo tema (GeneratePress) qui su WPlab.it sono riuscito a ridurre di circa il 30% i tempi di caricamento.

Temi WordPress orientati alle prestazioni

I seguenti temi sono tutti orientati alla velocità e permetteranno al tuo sito web di raggiungere ottime performance:

• GeneratePress – Questo è il mio preferito, lo utilizzo su molti miei siti web, tra cui anche WPlab.it. È gratuito con la possibilità di acquistare un plugin che ne amplia le funzioni. Per ulteriori informazioni, clicca qui per leggere il mio articolo dedicato.
• Astra – Un tema leggero e personalizzabile con molte integrazioni per plugin come WooCommerce. Disponibile sia in versione gratuita che a pagamento.
• OceanWP – Leggero, personalizzabile e offre molte utili estensioni (sia gratuite che a pagamento).

Limita le revisioni degli articoli

Di default, WordPress memorizza le revisioni di articoli e pagine quando si apportano modifiche.

Questa funzione è sicuramente molto utile nel caso in cui sia necessario tornare a una versione precedente, la cattiva notizia è che non vi è alcun limite al numero di revisioni memorizzate e, soprattutto su siti di grandi dimensioni, questo può rapidamente “ingolfare” il database.

Di quante revisioni hai davvero bisogno?

Leggi il mio articolo dedicato dove ti spiego come puoi disabilitare o limitare le revisioni di WordPress.

Il mio consiglio è limitare le revisioni a tre, in questo modo eviti di sovraccaricare il database di informazioni ma mantieni comunque la possibilità di tornare indietro in caso di necessità e ripristinare le precedenti versione dei tuoi articoli in caso di necessità.

Ottimizza le immagini

In media, le immagini rappresentano circa il 40% delle dimensioni di una pagina web, quindi si possono ottenere buoni miglioramenti delle prestazioni semplicemente ottimizzando le immagini.

Per ottimizzare le immagini di un sito web, bisogna prendere in considerazione due caratteristiche: le dimensioni e la compressione.

Dimensioni effettive delle immagini

Se la larghezza massima delle immagini che il tuo tema visualizza è di 600 px, non ha alcun senso caricare sul tuo sito immagini larghe oltre 3000 px (a meno che non si tratti di un sito strettamente legato alle fotografie), è solo uno spreco di banda.

Quindi, assicurati di ridimensionare le immagini del tuo sito web ad una larghezza massima adatta al tema.

Compressione delle immagini

Oltre a ridimensionare le tue immagini, devi provvedere alla loro compressione per ridurre ulteriormente il loro peso.

Esistono due tipi principali di compressione immagini:

• Lossy – Grande riduzione del peso dei file con perdita di qualità.
• Lossless – Riduzione minima del peso dei file con nessuna perdita di qualità.

Dovresti scegliere uno di questi due metodi di compressione a seconda dell’importanza che la qualità delle immagini svolge nei tuoi contenuti ma, in linea di massima, il metodo lossy puà essere utilizzato per la maggior parte dei siti web.

Per ridimensionare e comprimere automaticamente le immagini da utilizzare su un sito WordPress puoi scegliere tra diversi plugin, di seguito ti riporto quelli che considero i migliori:

• Imagify – Paghi in base a quanti MB ottimizzi. Nessuna restrizione sul numero di immagini. Gratuito fino a 25 MB al mese.
• ShortPixel Image Optimizer – Paghi in base alle immagini ottimizzate. Nessuna restrizione sulle dimensioni. Gratis fino a 100 immagini al mese.
• Smush – Gratuito al 100% ma solo per compressione lossless e con limite di dimensioni del file di 1 MB.

Minimizza il codice e concatena i file

La minimizzazione e la concatenazione sono due ottimi tecniche che permettono di ridurre le dimensioni delle tue pagine web e il numero dei file che esse richiamano, senza modificarne l’aspetto e le funzionalità.

La minimizzazione rimuove i caratteri non necessari, come ad esempio spazi vuoti e interruzioni di riga, mentre la concatenazione raggruppa più file in uno.

Esistono vari plugin WordPress che permetto di attuare queste due tecniche su un sito web, personalmente utilizzo da anni il plugin gratuito Autoptimize che funziona egregiamente ed è molto semplice da utilizzare.

Basta installarlo e attivare queste tre opzioni:

• Ottimizzare il codice JavaScript?
• Ottimizzare il codice CSS?
• Ottimizzare il codice CSS?

Già attivando queste opzioni di base, senza andare a toccare quelle avanzate, il tuo sito web dovrebbe risultare più veloce ma, se dovessi riscontri problemi di visualizzazione delle pagine, prova a disattivare l’ottimizzazione JavaScript (potrebbe andare in conflitto con il tuo tema o con qualche plugin) per provare a risolvere il problema.

Utilizza un plugin di cache

Nella maggior parte degli articoli che parlano della velocizzazione di WordPress l’utilizzo di un plugin di cache è messo in primo piano e viene spesso considerato come “soluzione a tutti i mali”.

Intendiamoci, l’utilizzo di un buon plugin di cache per WordPress e la sua corretta configurazione può offrire importanti miglioramenti delle prestazioni ma, a mio avviso, non può essere considerato come unica soluzione per tutti i problemi di rallentamento di un sito web, da solo non basta.

Ci sono molti servizi di hosting che implementano un sistema di caching delle pagine a livello di server, quindi l’installazione di un plugin di questo tipo potrebbe non essere necessaria.

Ma se il tuo servizio di hosting non include la memorizzazione nella cache delle pagine, puoi farlo autonomamente tramite l’utilizzo di un plugin dedicato.

Questi plugin creano delle versioni HTML statiche delle pagine che compongono il sito web e che verranno poi servite ai visitatori, evitando così di forzare il server a generare le pagine dal database e dai file PHP per ogni singola visita.

Esistono parecchi plugin di cache per WordPress (sia gratuiti che a pagamento), di seguito ti elenco quelli che ho avuto modo di provare e conm i quali mi sono trovato bene:

• Cache Enabler – Plugin gratuito e molto leggero realizzato da KeyCDN. Si abbina perfettamente con Autoptimize.
• W3 Total Cache – Questo è uno dei plugin di cache più utilizzati in assoluto, con oltre un milione di installazioni attive. Non necessita dell’utilizzo di Autoptimize, perché provvede autonomamente alla minimizzazione e la concatenazione.
• WP Fastest Cache – Plugin gratuito con possibilità di acquistare la versione premium che aggiunge molte funzioni, tra cui la minimizzazione e la concatenazione dei file.
• WP Super Cache – Plugin gratuito realizzato da Automattic (l’azienda che ha creato WordPress), semplice da utilizzare e molto efficiente. Anche questo si funziona alla grande con Autoptimize. Lo utilizzo da tempo su WPlab.it e mi ci trovo benissimo.
• WP Rocket – Plugin disponibile solo in versione premium a pagamento, ma permette di effettuare molte modifiche alle prestazioni che vanno oltre la cache della pagina. Sicuramente molto più avanzato ed efficiente dei precedenti. Siccome ha un costo annuale, te lo consiglio solo se intendi utilizzarlo su un sito commerciale che ti può portare un ritorno economico.

Imposta la cache del browser

Anche la cache del browser permette di velocizzare i tempi di caricamento di un sito web.

A differenza del suddetto metodo di memorizzazione di versioni HTML delle pagine web, la cache del browser archiviare determinati tipi di file sui computer degli utenti

In questo modo, quando un utente visita nuovamente quel determinato sito web, il suo browser carica le versioni memorizzate nella cache locale di determinati file anziché le versioni dal server web: questo si traduce in tempi di caricamento più rapidi.

La maggior parte dei browser web ha abilitata di default questa funzione ma, se vuoi essere sicuro che funzioni su tutti i computer dei tuoi utenti, puoi abilitarla manualmente aggiungendo questa porzione di codice al file .htaccess:

# BEGIN Imposta la cache del browser
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>
# END Imposta la cache del browser

Attiva il protocollo HTTP/2

Se hai attivato la connessione HTTPS sul tuo sito, puoi utilizzare il protocollo HTTP/2 che permette il download simultaneo dei file che compongono le tue pagine web con un notevole incremento della velocità.

Se non lo hai già fatto, chiedi al tuo hosting provider di farti attivare HTTP/2 sul tuo spazio di hosting.

Implementa un Content Delivery Network

Un Content Delivery Network (CDN in breve) aiuta ad accelerare il caricamento del tuo sito web per gli utenti proveniente da diverse zone del pianeta.

Come funziona un CDN?

Se un sito web non utilizza un CDN, tutti i suoi utenti, a prescindere da che parte del mondo si colleghino devono scaricare i file che compongono le pagine web dal server dove è ospitato il sito stesso.

Un CDN è una rete di computer e server localizzati in aree diverse del mondo dove vengono archiviate copie dei file del sito web.

Quindi se un sito web utilizza un CDN, i suoi utenti possono scaricare i file che compongono le pagine web contenuto sui propri browser da un server posizionato più vicino a loro, con conseguente minore latenza e tempi di caricamento della pagina web migliorati.

Ma l’utilizzo di un CDN non è sempre un bene: per mia esperienza, ti consiglio di utilizzare un CDN solo se il tuo sito web si rivolge ad una maggioranza di utenti localizzata fuori dall’Europa, in caso contrario un buon hosting localizzato in italia può bastare.

CloudFlare

Una delle società più importanti che si occupa di CDN è CloudFlare, esistono diverse aziende che rivendono servizi di CDN, ma posso consigliarti solo questa perché è l’unica che ho provato.

Cloudflare offre diversi piani tra cui anche uno gratuito con funzionalità di base che, tutto sommato, va benissimo per la maggior parte dei siti web.

Riduci le richieste HTTP

Quando un nuovo utente visualizza il tuo sito web, il suo browser web richiede un elenco di file necessari per poter visualizzare la pagina web.

Queste richieste solitamente includono HTML, CSS, JavaScript, immagini e video, ma possono includere anche file e script esterni, come il codice di monitoraggio di Google Analytics.

Ogni richiesta può impiegare tempi diversi, ma una buona regola generale è che più richieste HTTP equivalgono a un sito web più lento.

Ecco perché strumenti come GTmetrix e Pingdom Website Speed Test mettono in primo piano il numero di richieste HTTP.

L’utilizzo di Autoptimize o altri plugin simili, come detto prima, aiuta a ridurre di molto il numero di richieste HTTP su un sito WordPress, tramite la concatenazione dei file.

Ma ci si può spingere oltre tramite un approccio “più manuale”: si possono ridurre ulteriormente le richieste HTTP evitando di utilizzare servizi esterni come, ad esempio, Google Fonts, Font Awesome e Gravatar.

Imposta i font di sistema

I font web personalizzati, come Google Fonts, rappresentano in media circa il 3% del peso complessivo di una pagina web e, anche se questa è una percentuale bassa, contribuisce comunque ad aumentare il tempo di caricamento complessivo.

Inoltre, molti siti web utilizzano parecchi più caratteri di quanti ne abbiano effettivamente bisogno.

Usando i font di sistema non è necessario caricare alcun font nella pagina!

Marchi famosi come GitHub, Bootstrap, Medium, Ghost e persino il pannello di amministrazione di WordPress usano tutti il font di sistema (system font), che richiama i caratteri utilizzati dal sistema operativo del tuo computer.

Qualche anno fa utilizzare un set di caratteri di sistema non avrebbe comportato un buon risultato dal punto di vista estetico, ma i sistemi operativi più recenti hanno caratteri preinstallati più belli.

Esistono molti casi in cui le necessità grafiche ed estetiche non permettono l’utilizzo di questa tecnica, ma va tenuta comunque in considerazione questa opportunità ed è per questo che te l’ho segnalata: sta a te decidere se farne uso o meno.

Per impostare il font di sistema devi aggiungere questo codice al tuo foglio di stile:

body, p {
 font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h1, h2, h3, h4, h5, h6 {
 font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Ovviamente dovrai adattarlo al tuo template ma, in linea di massima, dovrebbe funzionare.

Una volta aggiunto questo codice al CSS del tuo tema attivo, dovrai disabilitare i caratteri caricati da terze parti (come ad esempio Google Fonts).

Anche questo può variare, poiché ogni sviluppatore include i caratteri in modo diverso, ma molti temi hanno un modo semplice per attivare o disattivare Google Fonts.

Se utilizzi un tema WordPress predefinito, puoi utilizzare il plugin gratuito Disable and Remove Google Fonts.

Disabilita l’hotlinking

Un hotlink è quando qualcuno richiama sul suo sito un’immagine presente sul tuo sito, utilizzando un link diretto alla fonte dell’immagine sul tuo server.

Questo può comportare perdita di banda e risorse per te: se il server da la possibilità di usare l’immagine esternamente chiunque può sfruttare le tue risorse su altri siti.

Per evitare agli altri di fare hotlinking sulle immagini del tuo sito ti basta aggiungere queste righe di codice al file .htaccess del tuo sito web:

#PREVENT Disabilita hotlinking
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} \.(gif|jpe?g?|png)$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://wplab\.it [NC]
RewriteRule \.(gif|jpe?g?|png)$ - [F,NC,L]
</IfModule>
#PREVENT Disabilita hotlinking

Ovviamente, al posto di wplab\.it dovrai inserire il tuo dominio e relativa estensione.

In alternativa, esistono anche devi plugin (come ad esempio All In One WP Security) che svolgono questa funzione, senza la necessità di dover modificare il file .htaccess.

Disabilita i pingback

Sai cosa sono i pingback? Sebbene sembrino commenti, sono solo script inutili di WordPress, il cui unico scopo è quello di ricordarti di collegare qualsiasi menzione dei tuoi post.

Ti sembra abbastanza utile? Il fatto è che questo servizio è fornito anche da molti strumenti di terze parti come, ad esempio, Google Alert che monitorano i marchi.

Un pingback inutile fa più male che bene al tuo sito web, non solo ne rallenterebbe la velocità di caricamento, ma aumenterebbe anche il rischio di un attacco DDoS.

Puoi disabilitarli dalla sezione Impostazioni > Discussione dell’area di amministrazione.

Attiva il lazy load

Il lazy loading (o lazy loading) permette di ritardare il caricamento di immagini non visibili per consentire al browser di caricare in modo ottimale tutte le risorse above the fold.

Per attivare il lazy load in un sito WordPress puoi ricorrere al già citato Autoptimize che, oltre a minimizzare il codice e concatenare i file, include anche questa utile funzione.

In alternativa, ci sono altri plugin che permettono di attivare il lazy load:

• a3 Lazy Load – Molto semplice da usare, permette di attivare il processo di caricamento differito delle immagini su un sito WordPress. 
• Lazy Load – Realizzato da WP Rocket, non utilizza libreria JavaScript e si può applicare anche agli iframe di YouTube per accelerare il tempo di caricamento.

Ottimizza il database

Tutti i contenuti e le impostazioni del tuo sito WordPress sono archiviati in un database che, con il passare del tempo, raccoglierà tantissimi dati inutili come, ad esempio, vecchie revisioni, commenti eliminati e tanto altro.

Anche se una semplice pulizia del database non comporta un notevole miglioramento dei tempi di caricamento del sito, l’ottimizzazione del database garantisce sicuramente un’esecuzione più efficiente che può tradursi in una migliore velocità di caricamento.

WP-Optimize è un ottimo plugin gratuito che può aiutarti a eliminare questa “spazzatura” dal tuo database.

Attiva la compressione GZIP

Tramite l’utilizzo della compressione GZIP, il server web può comprimere i file prima di inviarli ai browser dei visitatori di un determinato sito web.

Questa impostazione può ridurre le dimensioni delle tue pagine anche dell’80% ed è molto semplice da attivare.

Alcuni servizi di hosting permettono di attivare la compressione GZIP tramite cPanel, chiedi al tuo provider se supporta questa impostazione.

In alternativa, se utilizzi un server Apache (come nella maggior parte degli hosting per WordPress), ti basterà aggiungere questo snippet di codice al file .htaccess del tuo sito web per attivare la compressione GZIP:

# BEGIN Abilita la compressione
<IfModule mod_deflate.c>
Addtype font/truetype .ttf
Addtype font/truetype .woff
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
# END Abilita la compressione

Puoi verificare il corretto funzionamento della compressione GZIP sul tuo sito web utilizzando uno di questi strumenti gratuiti: Check GZIP, Website Planet.