Padroneggiare WP Rocket per prestazioni ottimali di WordPress

Perché ottimizzare la velocità del sito WordPress?

Quando si parla di esperienza utente, la velocità è fondamentale. Uno studio sui consumatori ha rilevato che lo stress provocato dai ritardi nella velocità dei cellulari è simile a quello che si prova guardando un film dell'orrore o risolvendo problemi di matematica, ed è persino peggiore di quello che si prova aspettando in fila alla cassa di un negozio.

La velocità è la chiave del successo, maggiori dettagli su web.dev. Ad esempio:

• Pinterest ha ridotto i tempi di attesa percepiti di 40%, aumentando direttamente il traffico sui motori di ricerca e le iscrizioni di 15%.
• COOK ha ridotto il tempo medio di caricamento delle pagine di 850 millisecondi, aumentando le conversioni di 7%, riducendo la frequenza di rimbalzo di 7% e aumentando le pagine viste per visitatore di 10%.

La lentezza può anche influire sul modo in cui Google e altri crawler indicizzano il vostro sito, causando aggiornamenti lenti o mancati. Può anche causare il fallimento dei test di usabilità mobile.

I plugin di WordPress variano in qualità e, senza ottimizzazione, la velocità del sito potrebbe essere lenta. WP Rocket è il plugin per la cache di WordPress più apprezzato, che offre notevoli miglioramenti della velocità, facilità d'uso e grande compatibilità.

WP Rocket è molto efficace per l'ottimizzazione e ha molte funzioni potenti. Un solo plugin può sostituirne altri tre (controllo del battito cardiaco, ottimizzazione del database, integrazione CDN, generazione automatica di miniature video, ecc.

WP Rocket non ha una versione gratuita e costa $49 all'anno sul sito ufficiale. È possibile scaricare la versione cinese dal nostro sito.

Punti da notare

WordPress dispone di molti plugin, alcuni dei quali con funzioni che si sovrappongono. Per evitare conflitti, si dovrebbe utilizzare un solo plugin per ogni funzione. Ad esempio, "Remove Unused CSS" di WP Rocket è in conflitto con "Remove Unused CSS" di Perfmatters; se ne dovrebbe usare solo uno.

Nota: le seguenti impostazioni non tengono conto dei conflitti con altri plugin. Per maggiori dettagli, consultare le impostazioni di compatibilità alla fine di questo articolo.

Impostazioni di WP Rocket

1. Cache

1.1 Cache mobile separata

Sconsigliato. L'abilitazione crea file di cache separati per ogni pagina mobile, aumentando le dimensioni del database e il carico del server. La maggior parte dei siti è responsiva, quindi i contenuti per desktop e mobile (HTML, immagini, CSS, JS, font) sono solitamente gli stessi, consentendo al mobile di utilizzare la cache del desktop.

1.2 Cache utente

Generalmente non è raccomandato. WP Rocket non memorizza nella cache i contenuti registrati per impostazione predefinita. Abilitando questa opzione, si creano file di cache dedicati per ogni utente connesso, aumentando il carico del server.

1.3 Durata della cache

Impostato su 24 ore. Se è abilitato il "Preload Cache", la cache viene ricostruita dopo questo periodo. La maggior parte dei siti non viene aggiornata frequentemente, quindi 24 ore aiutano a ridurre il carico del server. Attivare questa opzione se il sito ha molti utenti registrati e contenuti riservati ai membri.

Abilitare la cache mobile per i seguenti temi:

• Tema Woodmart - per menu separati mobile/desktop
• Tema del giornale - quando è abilitato il tema mobile opzionale
• Tema Avada - utilizzo di sfondi diversi o categorie mobili (hardcoded)

Suggerimento: Controllare se la cache funziona Verificare la presenza di file di cache in wp-content/cache/wp-rocket/il tuo dominio.com/. Se la cartella è vuota, provare l'opzione "Cancella e precarica la cache" dal menu della barra superiore.

2. Ottimizzazione dei file

Queste sono le caratteristiche più importanti di WP Rocket per aumentare la velocità del sito.

2.1 Minimizzare i file CSS

Consigliato. Rimuove spazi e commenti per ridurre le dimensioni del file. Se si utilizza un CDN come Cloudflare con funzioni di minificazione integrate, attivarlo sul CDN e disabilitare WP Rocket per ridurre il carico del server.

2.2 Combinare i file CSS

Non è consigliato ai principianti, ma gli esperti possono provarlo. In passato (http/1), un minor numero di file migliorava la velocità. I siti moderni utilizzano http/2, che carica più risorse più velocemente, quindi la combinazione di CSS non influisce molto sulla velocità. I CSS efficienti combinano le istruzioni nel minor numero possibile di elementi e riducono i nodi dell'albero DOM per una resa più rapida.

Alcuni blogger consigliano di combinare i CSS per i siti di piccole dimensioni, in quanto può offrire un leggero aumento della velocità. I file CSS combinati sono più piccoli e vengono resi più velocemente. Tuttavia, la combinazione può causare problemi e non è compatibile con "Rimuovi CSS inutilizzati" o "Precarica CSS".

2.3 Ottimizzare la distribuzione dei CSS

Cruciale. Aumenta notevolmente la velocità e rimuove gli avvisi "Rimuovi risorse che bloccano il rendering" da Google PageSpeed. Scegliete "Rimuovi i CSS non utilizzati". Dà priorità ai CSS critici per i contenuti iniziali e rinvia il caricamento dei CSS non essenziali, migliorando FCP, LCP e TTI.

I CSS inutilizzati vengono caricati quando non sono necessari per i plugin o i temi. Gli sviluppatori accodano i fogli di stile solo quando sono necessari, ma spesso vengono aggiunti stili extra, rallentando i siti WordPress e innescando avvisi di blocco del rendering.

Dare priorità ai CSS critici e rinviare quelli non essenziali riduce significativamente i tempi di caricamento e migliora la velocità di visualizzazione delle pagine.

2.4 Rimuovere i CSS non utilizzati

Offre il maggiore incremento di velocità, ma ha la minore compatibilità. Se causa problemi, passare a "Async CSS".

2.5 CSS asincrono

Grande aumento di velocità e migliore compatibilità. Utilizzato ampiamente con problemi minimi. Se il contenuto della prima schermata sfarfalla o si carica lentamente, verificare i passaggi per la risoluzione dei problemi.

3. JavaScript

3.1 Minificare i file JS

Come la minificazione dei CSS, consigliata. Se si utilizza un CDN con funzioni di minificazione, attivarle sul CDN e disabilitare quelle di WP Rocket per ridurre il carico del server.

3.2 Combinare i file JavaScript

Come per la combinazione dei CSS, se "Ritarda l'esecuzione di JavaScript" è abilitata, questa opzione è disabilitata.

3.3 JavaScript asincrono

Consigliato. Aumenta la velocità e rimuove gli avvisi "Rimuovi risorse che bloccano il rendering" da Google PageSpeed. Sposta il JS nell'intestazione e consente l'analisi dell'HTML durante il download del JS, quindi esegue il JS prima di continuare a caricare l'HTML.

3.4 Ritardare l'esecuzione di JavaScript

Consigliato. Aumenta la velocità e rimuove gli avvisi "Rimuovi risorse che bloccano il rendering". Ritarda il caricamento di JS fino all'interazione dell'utente, migliorando i punteggi di Google Lighthouse. Offre una maggiore velocità rispetto al caricamento asincrono, ma una compatibilità leggermente inferiore.

Suggerimento: Se si utilizza Cloudflare, disattivare "Rocket Loader" nelle impostazioni "Velocità" > "Ottimizzazione" per evitare errori del sito.

4. Media

4.1 Caricamento pigro consigliato. Ritarda il caricamento delle immagini e dei video finché non entrano o si avvicinano al viewport, accelerando i tempi di caricamento della pagina. Da attivare per immagini, immagini di sfondo CSS, cornici e video. Per ottenere risultati migliori, sostituire i fotogrammi di YouTube con anteprime.

4.2 Caricamento pigro di immagini e video Riduce il tempo di caricamento iniziale della pagina, il peso e l'utilizzo delle risorse di sistema. Migliora le prestazioni, soprattutto sui dispositivi mobili con connessioni più lente. Maggiori dettagli su web.dev.

4.3 Abilita per le immagini di sfondo CSS Ritarda il caricamento delle immagini di sfondo. Abilitare questa funzione, ma escludere le immagini di sfondo del banner superiore.

4.4 Sostituire gli iframe di YouTube con le anteprime WP Rocket genera automaticamente le anteprime dei video di YouTube, caricando inizialmente solo le anteprime e velocizzando il caricamento della pagina.

5. Precarico

5.1 Abilita il precaricamento della cache Consigliato. Precarica il contenuto della pagina nel browser, velocizzando le altre pagine durante la navigazione. WP Rocket 3.12.0 migliora il precaricamento, ma aumenta notevolmente il carico della CPU, causando potenzialmente problemi su server di piccole dimensioni.

5.2 Prefetch Links Scarica le pagine collegate quando il mouse passa sopra i link, rendendo più veloce il caricamento delle pagine quando si fa clic. Aumenta leggermente la velocità, ma aumenta il carico del server e della larghezza di banda. Attivare solo se il server e la larghezza di banda sono in grado di gestirlo.

5.3 DNS Prefetch Prepara il DNS per le risorse esterne (Google Fonts, video di YouTube, ecc.) per migliorare leggermente i tempi di caricamento pre-risolvendo le connessioni DNS.

5.4 Preload Font Velocizza il caricamento dei font precaricando i font a cui si fa riferimento nei CSS, migliorando i tempi di caricamento e le prestazioni percepite. Funziona solo con i font ospitati localmente.

6. Varie

Gli aggiornamenti dei contenuti o le modifiche ai prodotti cancellano automaticamente la cache, senza bisogno di cancellarla manualmente. Aggiorna la cache dopo l'aggiornamento o la rimozione dei plugin.

6.1 Quando cancellare la cache manualmente:

• Creazione di reindirizzamenti 301 o 410
• Modifiche allo stile nei file CSS con minificazione o fusione CSS attiva
• Attivazione, disattivazione o aggiornamento dei plugin che visualizzano i contenuti del frontend
• Esclusione dei file dal caricamento pigro, dal caricamento asincrono o dall'ottimizzazione della distribuzione dei CSS
• Modifiche al di fuori dell'editor di WordPress via (s)FTP/SSH, server, proxy esterno o CDN

6.2 Impostazioni di Cloudflare

Se si utilizza Cloudflare, disattivare la "Modalità di lotta contro i bot" in Sicurezza > Bot per evitare gli avvisi "ridurre il tempo di esecuzione di JavaScript" e "evitare attività lunghe del thread principale". Questo script aggiunge carico alla CPU e abbassa i punteggi di PageSpeed Insights, incidendo sulle prestazioni.

6.3 Problemi di visualizzazione

I problemi con icone, cursori, sezioni o stili mancanti sono probabilmente problemi di CSS. Disattivare "Ottimizza consegna CSS" o escludere i file CSS problematici.

6.4 Problemi di funzionalità

JavaScript controlla la maggior parte delle funzioni. Disattivare "Ritarda esecuzione JavaScript" in "Ottimizzazione file" se le funzioni si interrompono, quindi aggiornare. Se i problemi persistono, disabilitare "Async JavaScript" ed escludere i file JS problematici.