Come velocizzare e memorizzare in cache il tuo sito WordPress – Guida definitiva

In questa guida, ti mostrerò come velocizzare enormemente il tuo sito WordPress configurando alcuni strumenti.

Impara come accelerare i tempi di caricamento del tuo sito di un fattore 5 o più. Andiamo verso una migliore esperienza utente e migliori posizionamenti nei motori di ricerca 💪

Ridurre il tempo di caricamento delle pagine e aumentare la velocità del sito migliorerà enormemente l’esperienza utente del tuo sito. I tuoi visitatori rimarranno più a lungo, e il numero di utenti che abbandonano il tuo sito dopo aver aperto la prima pagina sarà inferiore rispetto a prima. Potresti aver già sentito parlare di questa metrica come la cosiddetta frequenza di rimbalzo.

Ancora meglio, la velocità del sito è un fattore di posizionamento di Google, il che significa che il tuo sito può ottenere posizionamenti più alti nelle ricerche su Google dopo un po’ di tempo. Ciò porterà a più utenti che troveranno il tuo sito e otterrai più traffico.

Ci sono alcune ragioni per cui il tuo sito WordPress può essere lento.
Le ragioni più comuni sono "Nessuna cache" e una dimensione della pagina troppo grande.

Oltre a queste due ragioni principali, diverse altre variabili possono influenzare la velocità del tuo sito:

• Molti plugin installati
• Configurazione del tuo server
• Codice difettoso in uno o più plugin.
• Codice difettoso nel tema
• Connettività di rete lenta
• Risposta lenta del server

Prima di iniziare, è essenziale ricordare che non tutte le azioni raccomandate potrebbero migliorare il tempo di caricamento del tuo sito. Una potrebbe funzionare meglio dell’altra, e alcune influenzano il tempo di caricamento del tuo sito solo in modo trascurabile.

Video: Come velocizzare WordPress

Se preferisci guardare un video invece di leggere questo articolo su come velocizzare WordPress, puoi guardare l’intero articolo come video:

Strumenti che usiamo per velocizzare WordPress

• ShortPixel Image CDN
• WP Super Cache
• Autoptimize
• wp-staging.com
• Pingdom
• Google PageSpeed Insights
• GiftofSpeed GZIP Test

Misura la velocità del tuo sito

Iniziamo con alcuni test di riferimento per ottenere una panoramica e capire la velocità del tuo sito.

Per misurare e analizzare la velocità del sito, puoi utilizzare gli strumenti online gratuiti di page speed Pingdom e Google PageSpeedInsights.

Questi risultati provengono da un sito di esempio con WordPress 5.6, una manciata di plugin popolari e la versione gratuita del tema "Astra" e un sito WordPress molto lontano dal caricamento veloce:

Attivare la cache

Iniziamo con il primo passaggio, installando un plugin di cache.

Un plugin di cache salva l’output HTML visibile del tuo sito in file temporanei sul tuo sito. Eseguire codice da un plugin o tema è molto costoso in termini di tempo perché il server deve fare numerosi calcoli per eseguire l’esecuzione.

Con il caching, questi calcoli devono essere fatti solo una volta quando un visitatore apre il tuo sito. Il plugin di caching verifica prima se esiste una cache per contenuti specifici.

Se il contenuto è già nella cache, restituisce direttamente l’output HTML precalcolato invece di eseguire nuovamente tutto il codice. Allora il server ha più risorse libere per caricare il tuo sito più velocemente. Solo installando un plugin di caching e regolandolo correttamente puoi rendere il tuo sito dieci volte più veloce o anche di più.

WP STAGING – WordPress Backup, Restore & Migration

Raccomando WP Super Cache. Questo plugin è sviluppato da Automattic. È la stessa azienda responsabile dello sviluppo del core di WordPress. Il plugin è gratuito, potente e semplice se capisci come funziona.

Questo plugin è, in molte opzioni, potente come i plugin premium, come il popolare WP ROCKET di cui potresti aver sentito parlare.

WP ROCKET ha un’interfaccia più user-friendly e potrebbe essere più facile da usare per i principianti. Non preoccuparti; ti prenderò per mano e ti mostrerò tutti i clic che devi fare per ottenere risultati simili a quelli che otterresti con un plugin di caching premium.

Così ottieni gli stessi risultati di velocità gratis!

Vai allo store dei plugin e cerca WP Super Cache.

Dopo aver installato e attivato il plugin WP Super Cache, configuriamolo.

Sarebbe possibile attivare la cache tramite la sezione "Easy" scegliendo "caching on", ma a questo punto andiamo direttamente all’area "Advanced", poiché possiamo configurare le impostazioni qui in modo più preciso.

1. Attiva la casella di controllo "Enable Caching".
2. Simple come metodo di consegna della cache.
3. Disattiva la cache per i visitatori loggati.
4. Non memorizzare in cache le pagine con parametri GET. Garantisce che le pagine dinamiche, diverse per ogni utente, come i carrelli, non vengano mai memorizzate nella cache.
5. Comprimi le pagine in modo che vengano servite più velocemente ai visitatori,
   e attiva la compressione Gzip, che velocizza significativamente il tuo sito. Tieni presente che alcuni server già comprimono i dati da soli, il che porta a errori quando si avvia l’opzione. Per vedere se il tuo server sta già utilizzando la compressione gzip, puoi usare questo test delle prestazioni gzip.
6. Cache rebuild,
   mostra il contenuto memorizzato nella cache all’utente anche se la cache è in fase di aggiornamento a causa di nuovi contenuti. Ciò significa che i tuoi visitatori non vedranno mai contenuti non memorizzati nella cache, tranne che per la prima generazione della cache.
7. 304 Browser Caching,
   indica all’utente di caricare il sito dalla cache del browser se c’è già contenuto memorizzato nella cache del browser dell’utente invece di connettersi al server. Ciò può ridurre ulteriormente il carico della CPU del tuo server.

Quindi scorri verso il basso fino alla scheda "Advanced".

1. Attiva il supporto per dispositivi mobili. Un semplice clic è sufficiente, ma wp-super-cache sottolinea che, a seconda del design, potrebbe essere necessario installare un plugin aggiuntivo. Poiché utilizziamo un tema WordPress standard, ciò non è necessario. Se il tuo sito funziona bene sui dispositivi mobili dopo aver attivato questa opzione, puoi usarla.
2. Quando un articolo o una pagina viene pubblicato o aggiornato, cancella tutti i file di cache e assicurati che la cache venga cancellata in modo che possano essere mostrati nuovi contenuti.

Infine, l’ultimo passaggio nelle impostazioni del plugin di cache è l’opzione PRELOADING, che puoi trovare nella scheda "Preload":

L’impostazione preload fa sì che il plugin memorizzi nella cache tutti gli articoli e le pagine del tuo sito periodicamente. Puoi impostare l’intervallo di tempo tra ogni aggiornamento della cache. Questo intervallo di tempo è un’impostazione molto cruciale.

In un ambiente di hosting condiviso, dovresti impostarlo ottimamente a una volta al giorno – ogni 1440 minuti.

Se aggiorni il tuo sito due volte al giorno, puoi selezionare l’intervallo di tempo tra ogni aggiornamento della cache a 720 minuti. Con questa impostazione, l’intera cache verrà aggiornata due volte al giorno. Un tempo di aggiornamento così basso può comportare un carico aggiuntivo sul server.

Raccomanderei di non utilizzare un valore inferiore negli ambienti di hosting condiviso – poiché potrebbe e molto probabilmente verrà conteggiato come un uso eccessivo delle risorse del server.

Tuttavia, se sei su un VPS o un server dedicato, puoi impostare la frequenza di aggiornamento bassa quanto 60 minuti.

Vale la pena sapere che il numero di articoli e pagine sul tuo sito influisce sulle risorse richieste per ogni operazione di aggiornamento della cache preload. Un tempo di aggiornamento ottimale per un server dedicato su un sito ad alto traffico sarebbe di 2 ore.

Ho selezionato le caselle di controllo pertinenti e ho impostato l’intervallo di aggiornamento della cache a 1440 min. Sei libero di scegliere qualsiasi valore!

Ottimizzare file CSS, JavaScript e immagini

Per le prossime modifiche, come combinare i file Javascript e CSS e ottimizzare le immagini e l’output HTML, usiamo un altro plugin chiamato "Autoptimize", che possiamo installare dal repository dei plugin di WordPress.

Se dovresti o meno aggregare file CSS e JavaScript dipende principalmente da come è configurato il tuo server.

Ogni sito carica file tramite il protocollo HTTP 1.1 o il più recente HTTP 2.

Con HTTP 1.1, tutti i file verranno scaricati uno dopo l’altro. Ad esempio, un file deve essere completamente caricato al visitatore prima che il server possa iniziare a inviare il file successivo.

Per ridurre il numero di file da scaricare, Autoptimize può combinare quei file. Quindi, invece di inviare dieci file CSS, il tuo server deve scaricare solo un file, risultando in un tempo di caricamento totale più rapido. Anche se la dimensione totale di un file CSS o JS combinato è maggiore, ogni singola richiesta comporta un sovraccarico aggiuntivo; come il tempo aggiuntivo necessario a una richiesta per stabilire una connessione al server. Ecco perché può essere più veloce caricare un singolo file grande invece di caricare più file.

Quindi, se il tuo server esegue HTTP 1.1, è consigliato aggregare tutti i file CSS e JS sul tuo sito.

Al contrario, il protocollo HTTP2 può scaricare più file contemporaneamente. Se questa è l’impostazione sul tuo server, può essere controproducente attivare l’aggregazione dei file. HTTP2 è solitamente molto più veloce perché può scaricare più file piccoli contemporaneamente invece di uno grande.

Pertanto, combinare file CSS e JS spesso non porta benefici e può persino rallentare il sito se utilizza HTTP2. Per essere sicuro, puoi testare entrambe le opzioni per determinare quale impostazione ti dà i migliori risultati.

Per vedere se il tuo sito utilizza HTTP 2, usa il KeyCDN http2 service.

Ottimizzare JavaScript

Seleziona la scheda "JS, CSS & HTML".

Attiva Optimize JavaScript Code

Se il tuo server usa HTTP 1:

• Attiva Aggregate JS files per combinare i file JavaScript come raccomandato dai servizi di benchmark di page speed

Disabilita le opzioni:

• Force JavaScript in <head
• Exclude scripts from Autoptimize
• Add try-catch-wrapping.

Attiva queste opzioni solo se aggreghi file javascript e riscontri problemi con il sito. Allora puoi escludere file javascript particolari dal processo di combinazione.

Se il tuo server usa HTTP 2:

• Disabilita Aggregate JS Files

Ottimizzare i file CSS

Il prossimo passaggio è l’ottimizzazione dei file CSS.

• Clicca su Optimize CSS Code.

Se il tuo server usa HTTP 1.1, attiva le opzioni:

• Aggregate CSS-files
• Aggregate inline CSS.
  Ciò migliorerà ulteriormente il punteggio di page speed. È la stessa cosa dell’aggregare file Javascript e file javascript inline ma solo per il CSS. Mantieni questa opzione disabilitata se il tuo server usa HTTP2!

Se il tuo server usa HTTP1 o HTTP2:

• Attiva Generate data: URIs for images – Ciò può portare a meno richieste HTTP. Ma non dopo aver configurato un CDN e servito le immagini attraverso di esso. Nel caso di utilizzo di un CDN, dovresti disabilitarlo. Utilizzando un CDN, i file vengono memorizzati nella cache su diversi data center in tutto il mondo.
• Disabilita Inline and Defer CSS
• Exclude CSS from Autoptimize:
  Usa questo solo se hai aggregato file CSS e riscontri problemi visivi sul tuo sito. Allora puoi escludere file CSS particolari dal processo di combinazione.

Ottimizzare HTML

Attiva l’opzione "Optimize HTML code".

Quando si ottimizzano i file HTML, gli spazi e i commenti vengono rimossi dal codice. Ciò ridurrà la dimensione del file. E i file più piccoli di solito si caricano più velocemente di quelli più grandi.

Prima dell’ottimizzazione HTML:

Dopo l’ottimizzazione HTML

L’ultima sezione da modificare è la MISC Options in Autoptimize.

Abilita le prime quattro opzioni:

• Save aggregated script/CSS as static files.
• Minify excluded CSS and JS files.
• Enable 404 fallbacks.
• Also, optimize for logged-in editors/administrators.

Se sei loggato e riscontri problemi con un page builder come Elementor o un altro plugin backend, disabilita l’ultima opzione.

Ottimizzare i Google Fonts

Passiamo alla scheda "Extra".

I Google Fonts possono rallentare il tempo di caricamento poiché vengono caricati da risorse esterne. Preferisco l’opzione "combine and link in head" poiché migliora i tempi di caricamento senza vedere il caricamento del font. Se sei nell’Unione Europea, ciò rende anche il tuo sito più conforme al GDPR, poiché queste risorse esterne non vengono più caricate da google.

Ma dovresti anche testare l’ultima opzione Google Font, "combine and load fonts asynchronously with webfont.js", e vedere quale produce risultati migliori nello strumento di page speed.

Quindi, abilita "remove Emojis" perché il javascript responsabile degli emoji è gonfiato e non vantaggioso per un buon tempo di caricamento.

Ottimizzare le immagini

Autoptimize può anche aiutare a far caricare le immagini più velocemente utilizzando un servizio integrato di terze parti chiamato ShortPixel. Se vuoi provare questo, vai alla sezione Images.

Scegli "Optimize Images"; gli URL sul tuo sito verranno modificati per puntare al CDN di ShortPixel.

Shortpixel riduce/adatta gratuitamente 100 immagini al mese, il che potrebbe essere sufficiente se hai un sito piccolo o medio.

Image Optimization Quality – Puoi trovare il giusto equilibrio tra compressione e qualità cliccando su "You can test compression levels here."

Sarai indirizzato a shortpixel.com, dove puoi vedere visivamente le differenze in ogni livello di compressione di ShortPixel caricando una delle tue immagini.

Quale è il migliore per te?

• Lossy: massima compressione, massima perdita di qualità.
• Glossy: compressione media, piccola perdita di qualità.
• Lossless: bassa compressione, minima perdita di qualità.

Torna ad Autoptimize e inserisci le tue impostazioni!

• Load WebP or AVIF in supported browsers – abilita questo in modo che Autoptimize serva le immagini in formato WebP, che ti consente di comprimere le immagini ulteriormente senza compromettere molto la qualità.
• Lazy-Load images – deve essere abilitato anche, e porterà a meno richieste ed è raccomandato da Google per tempi di caricamento più rapidi.

E Cloudflare?

Forse ti chiedi perché non menziono un CDN o un servizio DNS come Cloudflare, come molti altri tutorial raccomandano per ulteriori ottimizzazioni?

La semplice risposta è che cambiare il servizio DNS non è necessario per la maggior parte dei siti poiché comporta alcuni potenziali svantaggi.

Ad esempio, passare a un servizio CDN basato su DNS come Cloudflare cede il controllo sul tuo sito e sul suo traffico. Spesso mi imbatto in siti che girano sotto il servizio DNS di Cloudflare, dove mi viene richiesto di compilare un captcha prima ancora di poter accedere al sito. Tali captcha possono portare ad un’alta frequenza di rimbalzo dei visitatori e influenzare negativamente i posizionamenti nelle ricerche. Un servizio DNS potrebbe anche reindirizzare parte del tuo traffico altrove, e non te ne accorgeresti subito. Quindi tienilo in mente quando vuoi dare a un servizio DNS di terze parti il controllo sul tuo dominio.

Dopo le ottimizzazioni che abbiamo applicato, il tuo sito è già così veloce che non limiterà il posizionamento Google, quindi in questo articolo non tratteremo il servizio Cloudflare.

Fammi sapere se la vedi diversamente e hai un’altra opinione sull’utilizzo di Cloudflare.

Articoli correlati

• Come ottimizzare il database WordPress per prestazioni superiori?
• Tutorial phpMyAdmin per riparare e ottimizzare le tabelle del database
• Perché WordPress è lento + come risolverlo
• Come cancellare la cache e i cookie del browser?