Tutorial WP Rocket per Ottimizzare la Velocità del Sito

Cos'è WP Rocket?

WP Rocket è un plugin nato come soluzione per le diverse ottimizzazioni della cache in WordPress. Oggi è molto di più, e possiamo non solo ottimizzare la cache, ma praticamente tutto ciò che riguarda l'ottimizzazione delle performance di caricamento del sito web.

Per dimostrare il suo impatto, dai un'occhiata alle performance del nostro sito CON e SENZA WP Rocket:

Perché usare WP Rocket?

Anche se abbiamo detto che ci sono altre alternative per l'ottimizzazione WPO, e ognuno è libero di usare quella che ritiene opportuna, nel nostro caso abbiamo una particolare preferenza per WP Rocket. La sua interfaccia intuitiva che funziona con un click su una checkbox, le molteplici opzioni che offre per la configurazione della cache e il caricamento delle risorse, rendono WP Rocket il nostro preferito tra tutte le opzioni.

Menu Principale di WP Rocket

Supponendo che non abbiamo avuto problemi a installare WP Rocket, iniziamo a spiegare la sua interfaccia e le diverse opzioni disponibili per l'ottimizzazione. Quando clicchi sulla scheda dashboard, appare la seguente schermata:

Un messaggio di benvenuto e opzioni che inizialmente possiamo lasciare in pace, ma che spiegheremo qui.

Il Mio Account

Se hai acquistato WP Rocket, il box "Visualizza il mio account" ti porterà alla pagina utenti di WP Rocket così che, una volta lì, tu possa completare e controllare tutto ciò che riguarda il tuo profilo utente: Dati, fatturazione, ecc.

RocketCDN

RocketCDN è un servizio CDN che WP Rocket offre relativamente di recente. L'obiettivo è fornire gli strumenti necessari per ottenere le migliori performance senza dover cercare soluzioni al di fuori del plugin. Ci sono altri servizi CDN molto popolari ed altrettanto efficaci come Cloudflare o Amazon CloudFront.

Il Mio Stato

All'interno di questa opzione abbiamo due interruttori da abilitare:

• ›

  Rocket Tester: questo è il programma di miglioramenti di WP Rocket per testare le loro versioni BETA. Devi contattarli via email.

• ›

  Rocket Analytics: Acconsenti a condividere anonimamente i dati delle performance di WordPress con il team di sviluppo per aiutare a migliorare WP Rocket.

C'è poco da dire qui, questa è una decisione personale che non dovrebbe influenzare le performance.

Configurazione della Cache in WP Rocket

È il momento di entrare nelle opzioni di configurazione e inizieremo con la cache:

Nella seconda scheda del plugin, possiamo vedere quali opzioni di cache ci offre. Ricordiamoci che in WP Rocket stiamo ottimizzando la cache della pagina e, come vedremo ora, abbiamo anche un'opzione per gli utenti loggati, ma dobbiamo fare attenzione con questa opzione.

Cache Mobile

Normalmente, quando parliamo di mobile includiamo anche i tablet, ma questa volta stiamo parlando solo di dispositivi mobili. WP Rocket rileva attraverso lo user agent che stiamo navigando da smartphone.

Abiliteremo sempre questa opzione, dato che come regola generale, i design desktop e mobile sono diversi, a meno che non abbiamo una versione responsive, questa opzione sarà sempre abilitata. Per chiarirlo, perché dovremmo voler avere 2 versioni cached se il design fosse uguale? In altre parole, se non avessimo una versione mobile, non vorremmo che questa cache fosse trattata in modo diverso, giusto?

Qui si aggiunge un'eccezione. Quando abbiamo una versione mobile con risorse o elementi che si caricano solo in quella versione, salveremo i file separatamente.

Esempio:

• ›Abbiamo una pubblicità che su mobile carica un JS che la versione desktop non ha.

In questo caso salveremmo davvero file separati per mobile.

Cache Utenti

La cache utenti è un'opzione che WP Rocket fornisce per quegli utenti che navigano mentre sono loggati.

Attivando questa opzione, possiamo offrire una versione cached individualizzata per ogni utente. La cosa migliore è abilitarla se gli utenti effettuano il login, ma devi fare particolare attenzione a quali pagine vengono memorizzate nella cache e quali no, perché se l'utente inserisce dati personali (per esempio informazioni bancarie), memorizzarli nella cache potrebbe causarci problemi legali.

Come escludere una pagina dall'essere memorizzata nella cache?

Se vuoi evitare problemi di questo tipo, la cosa migliore è andare direttamente alla pagina che vuoi escludere e nelle opzioni di WP Rocket (sidebar o in basso) selezionare "non memorizzare mai questa pagina nella cache".

Durata della Cache

In questa sezione dobbiamo solo indicare la durata che vogliamo per i file di cache che vengono generati. Cioè, WP Rocket genera un file salvando la versione della tua pagina, e questo file sarà quello consegnato all'utente quando accede al sito web.

Attraverso un gestore di processi (CRON), i file generati che superano la durata indicata verranno eliminati e ne verranno creati di nuovi.

Cose da tenere a mente

WP Rocket prende già in considerazione certi processi per eliminare e generare nuovi file di cache, che sono i seguenti:

• ›

  Generazione di nuove voci, pagine, categorie, tassonomie o modifiche

• ›

  Generazione e modifica di nuovi moduli, widget o qualsiasi elemento del sito web

• ›

  Quando vengono cambiate le configurazioni di WP Rocket che influiscono sul frontend.

Altrimenti, devi tenere a mente che memorizzare i file di cache occupa spazio sul tuo server e questo spazio è limitato. È anche consigliabile svuotare la cache da WP Rocket così viene aggiornata e non rimangono file che non sono più necessari.

Per quanto riguarda il tempo, puoi lasciare il valore predefinito.

Ottimizzazione File in WP Rocket

Dopo aver brevemente esaminato la configurazione della cache, è il momento di lavorare sull'ottimizzazione dei file. L'ottimizzazione dei file viene fatta per alleggerire il caricamento e il rendering dell'HTML. Come possiamo lavorare su questa ottimizzazione?

In diversi modi:

• ›

  Riducendo il peso dei file

• ›

  Rimuovendo file non necessari, e

• ›

  Eseguendo i file progressivamente man mano che sono necessari.

File CSS

I file CSS sono responsabili della parte visiva del sito web. I fogli di stile che danno forma, colore e stile al nostro WordPress. In questo aspetto, un design accattivante può non essere un design ottimizzato, perché il designer, costruendo il CSS, può non aver seguito una serie di regole di ottimizzazione di base.

Tra i problemi più comuni che incontriamo di solito con i fogli di stile ci sono:

• ›

  File CSS pesanti

• ›

  File CSS che si caricano su pagine che non usano quegli stili

• ›

  File CSS mal costruiti

• ›

  Caricamento di troppi CSS esterni

• ›

  Uso di @import per importare fogli di stile esterni

In breve, c'è un mondo di pratiche che vengono spesso usate che non sono consigliabili per l'ottimizzazione di un buon design, ma andiamo a ciò che WP Rocket ci offre.

Minificare i file CSS

Questa opzione mira a ridurre il peso dei file CSS rimuovendo spazi e interruzioni di riga. WP Rocket lo implementa attivando la checkbox.

Suggerimento di SEO Alive: Ogni volta che eseguiamo un'azione, è una buona idea provare a caricare il sito web per vedere se tutto è corretto, fallo nella modalità incognito del browser.

Il processo è rappresentato nella seguente immagine presa dallo strumento minifier.org.

Combinare file CSS

Questa funzione esegue una sorta di "copia e incolla" del codice da un CSS in un altro per evitare di caricare più file CSS e averne solo uno.

È consigliabile continuare a testare perché dipende molto da come è stato sviluppato il tema, perché se ho un file CSS che si carica solo su un tipo specifico di pagina, ciò che non voglio è che quel codice venga caricato in un singolo file su tutte le pagine.

L'ideale è caricare il codice usato dall'URL. Spunta la casella e testa con qualche strumento come GTMETRIX per vedere se hai migliorato la velocità di caricamento.

Il vantaggio di combinare file CSS è ridurre le richieste al server.

Ottimizzare il caricamento dei CSS

WP Rocket è stato aggiornato tenendo conto delle raccomandazioni fornite da vari strumenti di Google per l'ottimizzazione della velocità di caricamento. Se abbiamo già esperienza con questi strumenti, abbiamo sicuramente incontrato l'avviso "Eliminare le risorse che bloccano il rendering". Attivando questo check, evitiamo che i CSS blocchino il caricamento facendoli caricare in modo asincrono.

Cioè, il rendering HTML non si ferma quando deve scaricare il file CSS; questo file si carica in background, evitando che il processo di caricamento venga interrotto. Quindi vale la pena abilitarlo.

File JS (JavaScript)

JavaScript è stato uno dei grandi problemi che Google ha incontrato nell'elaborazione dell'HTML. Senza andare troppo a fondo in questo tipo di linguaggio, WP Rocket ha progettato 5 azioni di base per l'ottimizzazione di questo tipo di file. Diamo un'occhiata!

Rimuovere jQuery Migrate

jQuery Migrate è una libreria JavaScript che permette la compatibilità con il codice jQuery sviluppato per le versioni di jQuery precedenti alla 1.9. Questa libreria viene nativamente in WordPress ma praticamente non ha utilità (alcuni plugin potrebbero averne bisogno).

Con questa azione, vogliamo evitare una richiesta non necessaria e il caricamento di un JS che non verrà usato. Disabilitalo e naviga sul tuo sito web per vedere se tutto funziona correttamente!

Minificare i file JavaScript

Proprio come spiegato con i file CSS, questa azione verrebbe applicata ai file JS, riducendo leggermente la dimensione dei file JS.

Combinare i file JavaScript

Un'altra azione simile al modulo di ottimizzazione CSS. Ricorda che quando attiviamo queste checkbox dobbiamo verificare se tutto sta funzionando come prima.

Caricare i file JavaScript in modo differito

Il check su questa azione fa due miglioramenti nelle performance:

• ›

  Aggiunge l'attributo "defer" al JS per evitare che il rendering HTML si fermi a causa di un caricamento JS. Con questa azione, viene scaricato in parallelo ed eseguito alla fine dell'elaborazione HTML.

• ›

  Sposta il JS che blocca il rendering iniziale.

WP Rocket ci avverte che questo tipo di attivazione può causare problemi, motivo per cui introduce una modalità sicura per evitare problemi di caricamento di elementi essenziali per la corretta visualizzazione della pagina.

Ritardare l'esecuzione di JavaScript

Un'altra opzione per ritardare l'esecuzione di JavaScript non essenziale finché l'utente non interagisce con la pagina. Questa azione non sembra molto importante, ma ci permette di guadagnare tempo affinché il caricamento avvenga più rapidamente. L'interazione può essere un click, scroll, movimento del mouse...

Ottimizzazione dei Media

In questa scheda, copriremo l'ottimizzazione di elementi chiave nei primi passi dell'ottimizzazione WPO. Stiamo parlando di immagini, video, iframe ed elementi integrati in WordPress la cui funzionalità è, perlomeno, discutibile.

Lazyload

Un'azione essenziale in qualsiasi ottimizzazione della velocità di caricamento. La funzione Lazyload fa sì che elementi come immagini, video e iframe non si carichino finché non sono essenziali per la visualizzazione.

Ti faccio un esempio. Mentre scorriamo, le immagini si caricano. Immagina come sarebbe il caricamento di questa pagina se 30 immagini si caricassero tutte insieme, soprattutto se l'utente all'inizio non le sta nemmeno visualizzando.

Emoji

I browser includono già le proprie emoji, quindi possiamo risparmiare quella richiesta che viene fatta se non attiviamo questo check. La mia raccomandazione è di attivarlo.

Contenuto Embedded

Impedisce ad altre persone di incorporare contenuti dal tuo sito e impedisce anche a te di incorporare contenuti da altri siti non autorizzati. Le richieste fatte con questo JS sono ridotte.

Compatibilità WebP

WebP è un formato relativamente nuovo che Google ha introdotto intorno al 2010, per la compressione lossy di grafica a 24 bit sul web, migliorando la fornitura di queste risorse per accelerarne il caricamento.

Attualmente non tutti i browser lo supportano, quindi dovrai fare attenzione e sapere quale browser usano i tuoi utenti quando lavori con questo formato. Abilita questa opzione se lavori con immagini WebP.

Configurazione del Preloading della Cache

Dobbiamo capire bene come vengono generati i file di cache di WP Rocket per comprendere la funzione Preload.

Quando un utente visita una pagina sul nostro sito per la prima volta, è allora che la pagina viene memorizzata nella cache e viene generato un file cached che verrà consegnato agli utenti successivi. La stessa cosa succede quando la cache scade (il tempo che abbiamo determinato) e la versione cached viene eliminata, o quando svuotiamo noi stessi la cache di tutti i nostri URL.

Preload Cache

Attivando l'opzione Preload, ciò che faremo è caricare una versione precedentemente cached così che anche il primo utente abbia una versione più veloce del nostro sito. Questa azione viene eseguita attraverso i link della sitemap, quindi avremo bisogno di una sitemap.

La sitemap è un file generato dove vengono mostrati gli URL del nostro sito. Con plugin come "Rank Math" o "Yoast" possiamo generarla facilmente. Se vuoi vedere come creare una sitemap con Rank Math, qui te lo mostriamo.

Preload Link

Questa è una funzione che WP Rocket ha incorporato nelle sue ultime versioni. L'obiettivo è anticipare il caricamento delle "prossime pagine che l'utente visiterà". Quando passi il cursore sopra, avviene il preload della pagina nel caso in cui l'utente clicchi sul link.

WP Rocket ha adottato questa funzione che plugin specifici come "Flying Pages" stavano già implementando per migliorare la fluidità della navigazione all'interno del sito (esperienza utente). Detto questo, questo non è un fattore che migliora il tempo di caricamento, e non vedrai il miglioramento nelle metriche degli strumenti di audit WPO.

Preloading delle Richieste DNS

Il preloading delle richieste DNS è molto utile quando usiamo risorse di terze parti come YouTube, Facebook, font o iframe che richiediamo frequentemente.

Quando facciamo qualsiasi connessione su Internet, viene fatta una richiesta DNS che deve essere risolta e inviata al server. Questo ha una durata che possiamo migliorare se aggiungiamo gli URL delle risorse necessarie in questa casella che WP Rocket ci fornisce.

Come possiamo vedere nell'esempio, è solo necessario usare il nome del dominio //youtube.com //facebook.com

La risoluzione DNS richiede approssimativamente da 20 a 120 millisecondi, come indica GTMETRIX, il browser non scaricherà nulla dall'host finché questo processo non sarà completo.

Preload Font

Il preload dei font richiede un passaggio precedente, che è scaricare i font e averli sul nostro server. Una volta lì, possiamo fare la stessa azione che abbiamo fatto con il preload della cache, creando una versione molto più veloce del file dei font e fornendola all'utente quando si connette alla nostra pagina.

Una volta che i font sono ospitati, indicheremo a WP Rocket il percorso esatto dei font usati. Si raccomanda di non abusare di font diversi sulle nostre pagine perché richiedono download diversi. Nota anche che le richieste al server vengono fatte con le diverse variazioni del font, mi spiego:

• ›

  Font in grassetto --> 1 richiesta

• ›

  Font sottolineato --> 1 richiesta

• ›

  Font in maiuscolo --> 1 richiesta

Configurazione delle Regole Avanzate di WP Rocket

Non memorizzare mai nella cache questi URL

Ci sono certi URL che, per la loro unicità, non vogliamo che venga salvata una versione cached. Da questa scheda, WP Rocket ci permette di inserire una lista di URL che non vogliamo mai siano memorizzati nella cache.

Non memorizzare mai nella cache questi cookie

WP Rocket ci dà un altro strumento di controllo oltre a farlo per URL. Molti plugin lavorano con i propri cookie o possiamo persino installare i nostri per identificare certi utenti; ci sono molti modi per usare questi piccoli file.

Con WP Rocket possiamo smettere di memorizzare nella cache gli URL identificati dall'ID del cookie, una volta scaricati nel browser dell'utente, personalizzando così ulteriormente il tipo di URL che vogliamo memorizzare nella cache.

Non memorizzare mai nella cache questi user agent

Lo user agent è un campo descrittivo all'interno del protocollo HTTP, usato per fornire informazioni sul dispositivo che fa una richiesta. Conoscendo queste informazioni, possiamo evitare che le pagine cached vengano consegnate a questi user agent.

Per esempio, uno degli user agent di Google è Googlebot, quindi indicandolo in questa parte del web, ogni volta che accede al nostro sito offriremo le pagine senza memorizzarle nella cache.

Purgare sempre questi URL

Questa opzione è molto interessante per un tipo di URL che, per esempio, ti interessa avere sempre il file di cache eliminato quando aggiornato.

Per esempio, ho URL con risultati sportivi e ciò che non voglio è consegnare una versione cached all'utente, dato che i risultati vengono aggiornati molto frequentemente.

Memorizzare nella cache queste query string

Le query string sono dati che vengono inviati quando si fa una richiesta a una pagina web tramite l'URL.

Sono solitamente identificate dal simbolo del punto interrogativo "?" e come regola generale WP Rocket non memorizza nella cache questo tipo di URL. In questa opzione possiamo forzarlo a farlo.

Configurazione del Database con WP Rocket

Come abbiamo detto ripetutamente durante l'articolo, WP Rocket ha smesso di essere solo un plugin di cache per diventare un plugin per ottimizzare la velocità di caricamento del nostro sito. In questa sezione di configurazione, possiamo approfondire l'ottimizzazione del database.

Mentre lavoriamo sui nostri contenuti all'interno di WordPress, generiamo altri tipi di informazioni che non sono utili e danneggiano le performance del nostro sito web. Per questo, WP Rocket ci fornisce questo strumento per fare una pulizia più o meno approfondita.

Pulizia dei post

Come possiamo vedere nell'immagine, ci sono 3 elementi che possono occupare spazio nel database senza che ci interessino. Quando aggiorniamo i contenuti, viene salvata una versione precedente, viene generata anche una bozza automatica di ciò che stiamo modificando, e voci scartate.

Se rimuoviamo questi elementi, libereremo spazio nel nostro database.

Pulizia dei commenti

Questa parte è importante perché a volte il nostro database si riempie di commenti "spam", motivo per cui WP Rocket ha introdotto questa opzione per pulire questo tipo di elemento.

Pulizia dei Transient

Quando stiamo lavorando in WordPress, vengono generati certi elementi transient che possiamo eliminare senza problemi dato che verranno rigenerati.

Pulizia del Database

Sia in questo punto che nel prossimo, raccomando di fare un backup del database perché, anche se non dovrebbe succedere nulla, andare più in profondità in azioni all'interno del database ha sempre i suoi rischi, quindi non è una cattiva idea fare un backup.

Attivando questo check eseguirà una pulizia delle tabelle del database. Questo processo può essere automatizzato.

Configurare il CDN con WP Rocket

Prima di approfondire come configurare i CDN con WP Rocket, voglio spiegare cos'è un CDN e perché si usa.

Cos'è un CDN?

Un CDN (Content Delivery Network) è un servizio il cui obiettivo è migliorare la velocità di trasferimento dei contenuti all'utente. Per fare questo, crea una rete di distribuzione dei contenuti in diversi server in tutto il mondo per accorciare i tempi nella richiesta di risorse dell'utente. Cioè, se l'utente è in Brasile, un CDN offre i contenuti ospitati su un server più vicino a lui rispetto al vero server di hosting web.

Immagini prese dalla pagina di WP Rocket

Come funziona un CDN?

Funziona attraverso questi altri server che memorizzano una copia cached del sito web, e quando l'utente richiede questi contenuti/risorse, un server più vicino esegue il trasferimento.

Questo tipo di servizi sono molto utili quando hai contenuti pesanti come immagini, audio, video e/o molte visite. Se inizialmente hai un sito web con poche visite, non dovresti preoccuparti di questo aspetto.

RocketCDN

WP Rocket ci offre la possibilità di noleggiare il suo CDN al prezzo di 7,99 dollari al mese, meno di 7 euro.

CDN

Quando noleggiamo un CDN ci vengono fornite informazioni per usarlo. Uno di questi elementi forniti è il CNAME, anche se se non viene fornito possiamo ottenerlo.

Il CNAME è un tipo di record DNS che mappa un nome di dominio sorgente a un nome di dominio target

Per usare questa funzione dovremo solo indicare quel CNAME e dirgli per quali file lo vogliamo.

Escludere i file dal CDN

L'opzione successiva, come previsto, è escludere quei file che non vogliamo passino attraverso il CDN.

Ottimizzazione della Funzione Heartbeat di WordPress

Il heartbeat di WordPress è un trasferimento di dati di controllo per stabilire la comunicazione tra il backend e il frontend di WordPress e il server. Questo tipo di processo può essere uno dei motivi per cui potresti sperimentare lentezza nel tuo WordPress.

Tra le azioni che possono essere limitate ci sono:

• ›

  Auto-salvataggio e revisioni nell'editor di post.

• ›

  Notifiche nel pannello di amministrazione di WordPress.

• ›

  Informazioni su chi sta modificando.

• ›

  Dati in tempo reale.

Se il nostro WordPress sta funzionando correttamente, non raccomando di fare nulla a questo punto, ma se notiamo lentezza, possiamo provare a limitare l'attività nelle diverse opzioni.

Configurazione degli Add-on di WP Rocket

Ci sono certi elementi come gli script di Google Analytics e Facebook, che semplicemente attivandoli in questa parte della configurazione possiamo ottenere una versione cache e migliorare le performance. Questa azione risponde direttamente a una delle richieste solitamente indicate negli audit di velocità di caricamento come Pagespeed "Sfrutta la cache del browser".

Ottimizzazione delle Immagini

L'ottimizzazione delle immagini è un processo che per la sua complessità potrebbe avere la sua propria guida. WP Rocket offre un plugin indipendente per lavorare con queste risorse. Da WP Rocket possiamo accedere al download della sua versione "Free".

Strumenti di WP Rocket

Le configurazioni di WP Rocket possono essere salvate e importate per evitare di dover spendere di nuovo tempo in questo processo. Ci dà anche l'opzione di eseguire un "Rollback", cioè tornare indietro in termini di versione installata.

Tutorial di WP Rocket

Per concludere questa guida WP Rocket, lo stesso plugin fornisce una serie di video che danno informazioni sulle diverse azioni che vengono eseguite e come svolgerle.

Conclusioni

Come hai visto, WP Rocket è più di un plugin di cache; abbiamo a nostra disposizione una suite completa per ottimizzare la velocità e le performance del nostro sito web, quindi ora tutto ciò che dobbiamo fare è provare le diverse opzioni. Cosa stai aspettando per far volare il tuo WordPress?

Conoscevi WP Rocket? Sei riuscito a migliorare le tue performance con questa guida? Hai qualche domanda? Ti aspettiamo nei commenti!