Come configurare e installare WP Rocket+Imagify+Cloudflare CDN

Pronto a configurare e installare Wp Rocket con le migliori impostazioni?

WP Rocket è stato valutato come il plugin di cache n. 1 in numerosi sondaggi perché è dotato di più funzionalità di velocità rispetto alla maggior parte degli altri plugin di cache. Ecco perché di solito ti dà risultati migliori in Lighthouse e GTmetrix. Significa anche che non è necessario installare un sacco di plugin di velocità extra per precaricare i caratteri, pulire il database, disabilitare Heartbeat e ritardare JavaScript.

Questa guida va oltre la configurazione delle impostazioni di WP Rocket. Spiego come disabilitare “ottimizzare la consegna CSS” può risolvere i problemi di spostamento del layout cumulativo, come preletturare codice di terze parti, ritardare JavaScript, precaricare i caratteri, comprimere le immagini con Imagify e installare un CDN come Cloudflare.

Se non hai ancora acquistato WP Rocket, ti sarei grato se utilizzassi il mio link di affiliazione.

Guida a come installare e configurare WP Rocket

Dashboard

Dashboard-Guida a come installare e configurare WP Rocket

Lasciare le opzioni disattivate a meno che tu non voglia essere un beta tester o lasciare che WP Rocket raccolga i tuoi dati in modo anonimo, il che si traduce in una (molto piccola) diminuzione delle prestazioni.

2. Cache

Cache

Queste sono le impostazioni della cache purché non utilizzi un plugin per il tuo sito Web mobile e non permetti a più utenti di accedere al tuo sito (ad esempio bbPress). Ho aumentato la durata della cache da 10 a 24 in modo che la cache non debba essere aggiornata più spesso, risparmiando un po’ sulle risorse del server.

Mobile Cache: abilita la cache per i dispositivi mobili. Abilita “Separa i file cache separati per dispositivi mobili” solo se utilizzi un plugin per il tuo sito web mobile (come la versione gratuita di WP Touch).

Cache utente: lascia disabilitato a meno che non ci siano più utenti che accedono al tuo sito web dove sono presenti contenuti specifici dell’utente. Fornisce a ciascun utente la propria versione memorizzata nella cache.

Vita utile della cache: un numero inferiore significa che la cache si aggiornerà più frequentemente, ma consuma più risorse. Una durata della cache con un numero più alto significa che non si aggiornerà con la stessa frequenza, ma fa risparmiare risorse. Ti interessa di più la creazione frequente della cache o il risparmio di risorse del server? Dato che pubblico solo un paio di post a settimana, l’ho aumentato a 24 ore.

3. Ottimizzazione file

Nelle impostazioni di ottimizzazione dei file di WP Rocket, minimizza CSS/JS dovrebbe essere abilitato, ma combina i file CSS/JS dovrebbe essere abilitato solo per siti web con piccole dimensioni di file CSS/JS.

L’ottimizzazione della pubblicazione CSS può causare cambiamenti di layout (dovrai provarlo) e tutto il resto dovrebbe essere abilitato tranne , inclusi rimuovere CSS inutilizzati, caricare JavaScript differito e ritardare l’esecuzione di JavaScript. Dovresti idealmente testare ogni impostazione individualmente mentre misuri i risultati in Google page Speed.

Ottimizzazione file WP Rocket

Minifica file i CSS: abilita la minimizzazione che rimuove gli spazi bianchi dal codice.

Combina file CSS: i siti Web con un CSS più piccolo (sotto i 10 KB) dovrebbero combinarli mentre i siti con dimensioni CSS più grandi non dovrebbe farlo. Controlla il tuo grafico su GTmetrix. Se il tuo CSS è inferiore a 10 KB, di solito dovresti combinare. Se è superiore a 10 KB, non dovresti. La combinazione di file CSS + JavaScript può anche causare problemi quando si utilizzano server HTTP/2 e HTTP/3.

Dimensione CSS

File CSS esclusi: se una minimizzazione interrompe il layout del tuo sito web, visualizza il codice sorgente, individua il file problematico e aggiungilo.

Ottimizza la pubblicazione del CSS: la tua pagina inizierà a caricarsi senza stili CSS. A volte, questo non funziona correttamente e può causare cambiamenti di layout (un punteggio CLS peggiore nei parametri vitali del web). Per evitare ciò, prova a impostare un percorso CSS critico alternativo utilizzando un generatore di CSS critico, quindi assicurati che Optimize CSS Delivery funzioni. Se questo continua a causare lo spostamento del layout, lo disabiliterei completamente.

  1. Cerca “rocket-critical-css” nel codice sorgente per assicurarti che funzioni.
  2. Se non appare, rigenera i CSS critici in WP Rocket e nei page builder (se applicabile).
  3. Esegui il tuo sito tramite un generatore CSS critico.
  4. Incolla il codice CSS nel campo “percorso CSS critico di alternativo”.
  5. Se necessario, disabilitare l’ottimizzazione del CSS su singole pagine/post.
  6. Escludi i file problematici dalla pubblicazione CSS utilizzando il plugin di di WP Rocket.

Rimuovi CSS inutilizzati (Remove Unused CSS ): questa non è una caratteristica magica. CSS e JavaScript pesanti sono solitamente causati da page builder (in particolare Elementor e Divi) e altri plugin. Anche se questo può aiutarti a ridurre i CSS inutilizzati in Lighthouse, dovresti davvero ottimizzarlo alla fonte. Una cosa che puoi fare è codificare l’intestazione, il menu, il piè di pagina e la barra laterale in CSS in modo che non si basino sul codice del generatore di pagine. Dovresti anche utilizzare un plugin come Perfmatters per rimuovere CSS + JS inutilizzati.

Combina i file JavaScript: carica JavaScript dopo che la pagina ha terminato di caricarsi. È uno dei modi migliori per eliminare le risorse di blocco del rendering (in PSI), ma ho scoperto che WP Rocket non fa sempre un ottimo lavoro. Se continui a riscontrare problemi di blocco del rendering, prova a installare Autoptimize e Async JavaScript su WP Rocket che fanno un lavoro migliore nell’ottimizzazione di CSS e JavaScript. Se ottimizzi CSS e JS in Autoptimize, disattiverà la minimizzazione/combinazione di CSS + JS in WP Rocket e consentirà ad Autoptimize di gestirlo. Guarda l’impostazione di questa parte nel corso che ho preparato per velocizzare WordPress in modo totalmente gratuito.

Rimanda l’esecuzione di JavaScript: ritarda il caricamento di JavaScript fino all’interazione dell’utente (ovvero lo scorrimento o il tocco dello schermo sul dispositivo mobile). Questa funzione da sola riduce il tempo di caricamento. Se desideri aggiungere file JavaScript aggiuntivi per ritardare, dovresti utilizzare un plugin separato come Perfmatters poiché WP Rocket non ti consente più di aggiungere JavaScript manualmente.

4. Media

Media WP Rocket

Puoi bilitare tutto tranne la memorizzazione nella cache WebP. Se stai utilizzando un plugin WebP come Imagify, generalmente servirà già immagini WebP. Se incorpori video di YouTube, la sostituzione degli iframe di YouTube con un’immagine di anteprima può spesso dimezzare i tempi di caricamento del video poiché sono un elemento molto grande.

Lazy Load: ritarda il caricamento di immagini, iframe e video finché non si scorre la pagina e diventano visibili. Ciò riduce significativamente i tempi di caricamento iniziali e le richieste HTTP, ma caricare costantemente le immagini mentre scorri può essere fastidioso (prova tu stesso). Carica sempre i video in modo lento e sostituisci gli iframe con un’immagine di anteprima poiché i video incorporati sono molto pesanti.

Aggiungi dimensioni mancanti delle immagine (Add missing image dimensions): WP Rocket aggiungerà gli attributi di larghezza + altezza mancanti alle immagini HTML che dovrebbero correggere l’uso di larghezza e altezza esplicite sugli elementi dell’immagine in Lighthouse.

Disattiva gli incorporamenti di WordPress: simile alla prevenzione degli hotlink di Cloudflare, impedisce ad altri siti di incorporare i tuoi contenuti sul loro sito, il che assorbe larghezza di banda e stressa il tuo server.

Abilità la cache per WebP – lascia disabilitato. WP Rocket non crea immagini WebP (può solo servirle). L’utilizzo delle immagini WebP risolverà la pubblicazione delle immagini in formato di nuova generazione in Lighthouse. Possono essere creati utilizzando plugin come ShortPixel o WebP Converter For Media. Puoi convertire JPEG/PNG in WebP manualmente, ma potresti riscontrare problemi su Safari. Usare un plugin è più sicuro.

5. Precaricamento

Precarica la cache

Attiva il precaricamento, quindi precarica i collegamenti che caricano una pagina in background quando gli utenti passano il mouse su un collegamento. Le richieste DNS di prelettura e il precaricamento dei caratteri sono tipi di suggerimenti sulle risorse del browser. Il precaricamento viene eseguito con gli elementi trovati nel rapporto di riduzione dell’impatto del codice di terze parti Lighthouse. Il precaricamento può essere eseguito con i caratteri che puoi trovare nel tuo grafico GTmetrix Waterfall.

Precaricamento: indica ai browser di iniziare a recuperare le risorse che saranno necessarie a breve.

Precaricamento dei link: secondo la documentazione di WP Rocket, questa funzione fa in modo che se un utente passa il mouse sopra o tocca un collegamento per 100 ms o più, l’HTML di quella pagina verrà recuperato in background, in modo che quando effettivamente fa clic sul collegamento, la pagina sembra caricarsi quasi istantaneamente.

Precaricamento richieste DNS: guarda il rapporto sul codice di terze parti in Lighthouse. Questi possono essere Google Fonts, Tag Manager, AdSense, YouTube o anche pulsanti o widget di Facebook/Twitter.

Precarica i Font: copia i file dei font da GTmetrix Waterfall (hanno una scheda per i file dei font) e incollali nel campo dei font precaricati di WP Rocket. Ritesta il tuo sito web e dovrebbero caricarsi più velocemente.

6. Comandi avanzate

Le regole avanzate sono principalmente per i siti di eCommerce, tuttavia WP Rocket è già compatibile con la maggior parte delle soluzioni come WooCommerce e BigCommerce. Ma se hai problemi con i widget del carrello, la memorizzazione nella cache o qualcosa relativo all’eCommerce, WP Rocket ha la documentazione per questo.

Altrimenti, lascia questo campo vuoto.

Non salvare in cache questi URL: se stai utilizzando un carrello per gli acquisti eCommerce non supportato da WP Rocket, aggiungi qui il carrello e le pagine di pagamento che escluderanno queste pagine dalla cache.

Non salvare in cache i cookie: Stesso principio dell’opzione precedente basata solo sui cookie.

Non salvare in cache questi user agent: impedisce a Googlebot di memorizzare nella cache le pagine.

Elimina sempre la cache di questi URL: supponiamo che tu abbia un blogroll sulla tua home page. Se crei un nuovo post, vuoi che il blogroll della home page venga aggiornato immediatamente svuotando la cache della home page. Questo è ciò che fa questa impostazione, tuttavia WP Rocket cancella automaticamente la cache per la tua home page, le categorie e i tag una volta che viene creato un nuovo contenuto, quindi di solito non è necessario. Ma se ci sono altre cache di pagine che vuoi cancellare quando viene pubblicato un nuovo contenuto, aggiungilo.

Cache Query Strings: utilizzato principalmente per memorizzare nella cache le pagine dei risultati di ricerca + i filtri dei prezzi sull’eCommerce.

7. Database

La pianificazione delle pulizie del database mantiene il tuo sito veloce, sappi solo cosa stai eliminando!

  • Revisioni: vecchie versioni dei tuoi post salvate quando premi “Pubblica”.
  • Bozze automatiche: versioni salvate automaticamente del tuo post se non premi “Pubblica”.
  • Articoli cestinati: post e bozze che hai eliminato.
  • Commenti spam: commenti contrassegnati come spam.
  • Commenti cestinati: commenti contrassegnati come cestino.
  • Transient scaduti: transient scaduti e ancora presenti nel database.
  • Tutti i transient: memorizza i dati che richiedono molto tempo per essere recuperati (ad es. conteggi social sui blog).
  • Ottimizza tabelle: ottimizza le tabelle del database per un’esecuzione più efficiente.
  • Pulizia automatica: la frequenza con cui desideri che WP Rocket pulisca il tuo database.

8. Hearbeat

L’API Heartbeat di WordPress ti dice quando altri utenti stanno modificando una pagina/un post e ti mostra le notifiche dei plug-in in tempo reale. Di solito si desidera disabilitarlo completamente o almeno limitarne la frequenza per evitare che consumi risorse del server e contribuisca a sovraccarichi della CPU.

9. ADD-ON

  • Varnish: lascia disabilitato a meno che non usi Varnish. Molte persone dicono che otterrai velocità più elevate senza Varnish. Se decidi di utilizzare Varnish, attivalo nel tuo account di hosting e abilitalo in WP Rocket.
  • Cloudflare: abilitare se si utilizza Cloudflare.

Sucuri: abilitare se si utilizza Sucuri. Questo cancella automaticamente la cache di Sucuri ogni volta che svuoti la cache di WP Rocket, il che aiuta a mantenere sincronizzati i tuoi contenuti.

10. CDN Cloudflare

I CDN sono ottimi se ricevi visite da persone lontane dal tuo server di origine. Rispecchiano il tuo sito su più data center, riduci la distanza geografica tra il tuo server e i visitatori.

Iscriviti a Cloudflare e arriverai a una pagina in cui ti assegnano 2 nameserver.

CDN Cloudflare Nameserver

Cambia i server dei nomi nel tuo registrar di domini con quello che Cloudflare ti ha fornito.

Aggiungi le tue informazioni Cloudflare a WP Rocket.

Aggiungi le tue informazioni Cloudflare a WP Rocket

La chiave API globale e l’ID zona si trovano nella dashboard di Cloudflare.

  • Chiave API globale: si trova nella dashboard di Cloudflare.
  • Email dell’account: la stessa email che hai usato per registrarti a Cloudflare.
  • ID zona: si trova nella dashboard di Cloudflare.
  • Modalità di sviluppo: da utilizzare quando si apportano molte modifiche al codice del sito.
  • Impostazioni ottimali: attiva le impostazioni Cloudflare consigliate da WP Rocket: minimizzazione, memorizzazione nella cache aggressiva e disattiva Rocket Loader per una migliore compatibilità. Se sai cosa stai facendo, disattivalo e configura tu stesso le impostazioni di Cloudflare.
  • Protocollo relativo: Lasciare il protocollo relativo su OFF.

Cancella tutti i file di cache di Cloudflare: fallo dopo aver configurato WP Rocket.

Configura le impostazioni di Cloudflare nella dashboard. Ecco le cose che ti consiglio di fare:

  • Abilita Brotli (Impostazioni velocità)
  • Abilita e testa Railgun (Impostazioni velocità)
  • Prova Rocket Loader (Impostazioni di velocità) ma spesso può rompere i siti
  • Abilita protezione hotlink (Impostazioni Scrape Shield)

Cloudflare è gratuito, ma non un vero CDN poiché Cloudflare non serve risorse da un URL CDN. Ottimo per i piccoli siti, tuttavia ci sono CDN più performanti là fuori. Da notare che cloudflare come CDN non ospita le immagini del sito perciò bisogna fare un’ulteriore integrazione che spiego nel mio corso.

11. Ottimizzazione immagini

Ottimizzazione immagini

Come configurare il plugin di ottimizzazione delle immagini di Imagify?

  1. Crea un account

Inizieremo facendo clic su REGISTRATI, È GRATIS! pulsante. Vedremo quindi una finestra popup in cui possiamo inserire il nostro indirizzo e-mail per registrarci.

Ora, se controlliamo la posta elettronica, dovremmo trovare i nostri dettagli di accesso per il sito Web Imagify. Dopo aver fatto clic sul collegamento di attivazione e aver effettuato l’accesso, siamo arrivati ​​al pannello di controllo di Imagify.

  1. Inserisci la tua chiave API

La chiave API di cui abbiamo bisogno è stata inclusa nell’e-mail di attivazione che abbiamo ricevuto. L’API può essere trovata anche passando con il mouse sui dettagli del nostro account nell’area delle notifiche nell’angolo in alto a destra della dashboard di Imagify e quindi facendo clic su API – Integrazione.

Dopo aver copiato la chiave API, possiamo tornare alla nostra pagina originale con la notifica di Imagify e fare clic sul pulsante HO LA MIA CHIAVE API. Questo fa apparire una casella con un input per l’aggiunta della nostra chiave API.

Se abbiamo inserito correttamente le chiavi API, dovremmo vedere una nota che dice “Congratulazioni! La tua chiave API è valida. Ora puoi configurare le impostazioni di Imagify per ottimizzare le tue immagini.”

  1. Configuralo

Facendo clic sul terzo pulsante, etichettato Vai a Impostazioni, arriviamo alla dashboard di Imagify. Ai fini di questo tutorial, accetteremo le impostazioni predefinite per la maggior parte delle impostazioni.

Imagify consiglia l’impostazione Aggressivo. Non è senza perdita di dati, ma si nota raramente e fornisce una significativa riduzione delle dimensioni del file.

  1. Eseguilo

Infine faremo clic su Save & Go to Bulk Optimizer nella parte inferiore della pagina delle impostazioni (o seguire il collegamento Media > Bulk Optimization nel menu di amministrazione di WordPress).

Questa pagina mostra una panoramica di tutte le ottimizzazioni che sono avvenute sul nostro sito. Tuttavia, non è molto utile a questo punto perché non abbiamo ancora ottimizzato nulla. Modifichiamolo facendo clic sul pulsante Imagif’m All nella parte inferiore della pagina.

Verrà quindi presentato un popup che ci informa che questo processo può richiedere del tempo e che dovremmo tenere la finestra aperta fino al termine dell’elaborazione. Non ci resta che aspettare che Imagify faccia la sua magia.

WP Rocket è dotato di molte funzionalità che la maggior parte dei plug-in di cache non ha. Ciò significa che se dovessi utilizzare altri plugin di cache, dovresti installare plugin extra per ottenere queste funzionalità quando WP Rocket le ha già integrate (più funzionalità, ma meno plugin sul tuo sito).

Questo è anche il motivo per cui WP Rocket produce risultati migliori.

Lascia un commento

Adrian Gram

Contatta

info@adriangram.it

Collegati

Iscriviti

Unisciti alla mia mailing list per ricevere gli ultimi aggiornamenti.