Come velocizzare WooCommerce con WP Rocket e Botiga

Stai lottando con come velocizzare WooCommerce e creare un negozio a caricamento rapido?

Avere un negozio veloce è essenziale perché i tempi di caricamento del tuo negozio influenzeranno le esperienze dei tuoi acquirenti, le tue classifiche SEO e persino i tassi di conversione del tuo negozio.

Ma allo stesso tempo, i negozi WooCommerce sono più difficili da ottimizzare rispetto ai normali siti WordPress, il che potrebbe farti deludere dai tempi di caricamento del tuo negozio.

Ci sono diversi motivi, ma due dei più grandi sono che i negozi WooCommerce richiedono molto più database rispetto ai normali siti WordPress e non puoi memorizzare nella cache tutte le pagine del tuo negozio.

Tuttavia, ciò non significa che non hai opzioni per creare un negozio più veloce.

Con gli strumenti giusti puoi velocizzare il tuo negozio senza richiedere particolari conoscenze tecniche.

In questo tutorial, ti guiderò attraverso l'ottimizzazione della velocità di WooCommerce nel modo più semplice che conosco: con il plug-in WP Rocket e alcuni altri strumenti e modifiche.

Lungo la strada, condividerò i dati di test delle prestazioni reali in modo che tu possa vedere in che modo ogni modifica influisce sul tempo di caricamento del negozio.

Alla fine, dovresti avere un negozio che si carica molto più velocemente e non avrai bisogno di una laurea in informatica per impostare tutto.

Suona bene? Velocizziamo insieme WooCommerce.

Due tattiche fondamentali di ottimizzazione della velocità di WooCommerce prima di WP Rocket

Nella prossima sezione, ti dirò tutto su come utilizzare WP Rocket per velocizzare WooCommerce e ottenere un negozio che si carica più velocemente.

Tuttavia, se desideri un negozio WooCommerce a caricamento rapido, devi comunque disporre di solide basi per le prestazioni. Altrimenti, usare WP Rocket è un po' come mettere il rossetto su un maiale.

Fondamentalmente, WP Rocket renderà comunque il tuo negozio più veloce . Ma se la tua fondazione è troppo lenta per iniziare, avrai comunque un negozio lento. Sarà solo un po'…”meno lento”.

Quindi, qual è una solida base per le prestazioni di WooCommerce?

Devi inchiodare questi due dettagli:

1. Scegli un tema WooCommerce più veloce

Il tema del tuo negozio giocherà un ruolo enorme nella velocità di caricamento. Temi grandi e gonfi caricheranno più risorse, il che rallenterà il tuo sito.

D'altra parte, un tema WooCommerce veloce farà il contrario: caricherà solo il minimo necessario per creare un negozio di bell'aspetto e adatto agli acquirenti.

Abbiamo un post dedicato in cui abbiamo testato una serie di opzioni per trovare i temi WooCommerce più veloci. Ma, se vuoi risparmiare tempo, puoi utilizzare il nostro tema gratuito Botiga:

Da zero, Botiga è costruito per le prestazioni. Usa solo JavaScript vanilla (nessuna dipendenza da jQuery), minimizza automaticamente il suo codice e ha meno di 44,3 KB pronto all'uso.

Inoltre, tutti i siti demo sono creati con l'editor di blocchi nativo, il che significa che non è necessario appesantire il tuo negozio con un plug-in per la creazione di pagine solo per rendere il tuo sito simile alla demo.

Allo stesso tempo, Botiga offre una serie di utili funzionalità di eCommerce, tra cui le seguenti:

• Stili di pagina di pagamento e carrello multipli
• Ricerca istantanea dei prodotti per aiutare gli acquirenti a trovare rapidamente i prodotti
• Consigli sui prodotti alla moda
• Campioni di variazione del prodotto
• Più layout di galleria di prodotti
• Lista dei desideri
• Barra di aggiunta al carrello appiccicosa

Botiga ha una versione gratuita completamente funzionante e un'edizione Pro da $ 69 che aggiunge più funzionalità.

Per questi motivi, useremo Botiga come esempio per velocizzare il nostro negozio.

Puoi scaricare Botiga qui o sfogliare le demo per vedere alcuni esempi.

2. Usa l'hosting WooCommerce ottimizzato per le prestazioni

Oltre a utilizzare un tema veloce, ti consigliamo anche di scegliere un hosting WordPress ottimizzato per le prestazioni.

Sebbene possa essere allettante scegliere l'hosting più economico possibile, l'hosting condiviso economico di solito non ha le risorse per gestire WooCommerce, il che porterà a tempi di caricamento e prestazioni poco brillanti, qualunque cosa tu faccia.

Anche in questo caso, abbiamo un articolo in cui abbiamo testato un gruppo di provider di hosting per trovare l'hosting WordPress più veloce. Se hai fretta, ecco alcune buone opzioni da considerare:

• Kinsta – leggi la nostra recensione completa su Kinsta
• WP Engine: consiglio in particolare i piani di hosting eCommerce dedicati che includono Elasticsearch (che migliorerà notevolmente le prestazioni di ricerca dei prodotti del tuo negozio)
• Cloudways: leggi la mia recensione completa su Cloudways

Come velocizzare WooCommerce con WP Rocket

Ora è il momento di usare WP Rocket per agganciare i booster e rendere WooCommerce ancora più veloce.

Poiché utilizziamo un hosting solido e il tema Botiga veloce per il nostro negozio, si carica già abbastanza rapidamente da solo. Ecco uno screenshot delle metriche delle prestazioni di WebPageTest che mostra da dove stiamo partendo sulla home page:

Tuttavia, con WP Rocket, possiamo ancora caricarlo più velocemente. Esistono molti ottimi plugin per l'ottimizzazione delle prestazioni di WordPress, quindi perché consiglio WP Rocket per WooCommerce?

Bene, puoi leggere la mia recensione completa su WP Rocket per scoprire perché mi piace, ma ecco un breve riassunto dei punti salienti:

1. Ha una compatibilità WooCommerce pronta all'uso . Se WP Rocket vede che stai usando WooCommerce, si configurerà automaticamente in modo ottimale quando si tratta di nozioni di base come la memorizzazione nella cache. Questo è un enorme vantaggio, poiché configurare in modo errato la memorizzazione nella cache su un negozio WooCommerce può interrompere la funzionalità chiave.
2. È molto facile da usare . Oltre al punto sopra, WP Rocket ha generalmente un'interfaccia semplice, documentazione dettagliata e supporto premium.
3. Rende il tuo sito molto più veloce . Ho conservato il meglio per ultimo. WP Rocket funziona semplicemente e fa un ottimo lavoro nel far caricare più velocemente i negozi WooCommerce (e anche altri siti WordPress). Ha anche caratteristiche uniche come la possibilità di rimuovere CSS inutilizzati e ritardare l'esecuzione di JavaScript.

WP Rocket è un plug-in premium, ma pagare $ 49 è un piccolo prezzo da pagare per un negozio WooCommerce più veloce. Esiste una relazione diretta tra i tempi di caricamento della pagina e i tassi di conversione, quindi accelerare il tuo negozio può facilmente recuperare i tuoi soldi sotto forma di tassi di conversione più elevati.

Per iniziare, assicurati di acquistare una copia di WP Rocket. Quindi, ecco come configurarlo per WooCommerce.

1. Installa il plug-in per attivare le ottimizzazioni di base

Per iniziare, vai al tuo negozio WooCommerce (o configuralo prima se non ne hai ancora uno) e installa e attiva WP Rocket:

Non appena attivi il plugin WP Rocket, attiverà automaticamente le seguenti funzionalità per velocizzare il tuo negozio:

• Caching della pagina : WP Rocket escluderà automaticamente anche i contenuti chiave di WooCommerce per evitare problemi pur conservando nella cache il maggior numero possibile di contenuti. Ad esempio, escluderà il carrello e le pagine di pagamento, tra le altre modifiche alla compatibilità.
• Memorizzazione nella cache del browser
• Compressione GZIP
• Supporto multiorigine per i caratteri web
• Ottimizzazione dei file di Google Fonts

Su un negozio WooCommerce, WP Rocket ottimizzerà automaticamente anche la richiesta AJAX get_refreshed_fragments . Questo è ciò che WooCommerce utilizza per aggiornare dinamicamente il contenuto del carrello di un acquirente.

Ancora una volta, queste ottimizzazioni avvengono tutte automaticamente, quindi il tuo negozio dovrebbe già caricarsi più velocemente non appena attivi WP Rocket.

Ecco come viene caricata la home page del nostro negozio ora senza toccare una singola impostazione in WP Rocket:

Puoi vedere che il tempo al primo byte è stato ridotto di circa 450 ms (da 0,509 a 0,043 sec), il che porta a una riduzione simile in quasi tutte le altre metriche, incluso Largest Contentful Paint (LCP). Il tempo più lungo di Contentful Paint è sceso da ~1,1 secondi a ~0,7 secondi.

Questa riduzione è principalmente il risultato della memorizzazione nella cache della pagina compatibile con WooCommerce implementata da WP Rocket, sebbene anche le altre modifiche siano d'aiuto.

2. Imposta le ottimizzazioni dei file

Sebbene WP Rocket attivi molte funzioni utili per impostazione predefinita, ce ne sono anche alcune importanti che dovrai abilitare manualmente.

Per iniziare, vai alla scheda Ottimizzazione file nell'area delle impostazioni di WP Rocket ( Impostazioni → WP Rocket ).

È qui che puoi ottimizzare il codice CSS e JavaScript del tuo negozio, che può fare una grande differenza nelle prestazioni del tuo negozio (soprattutto quando si tratta di Core Web Vitals e del punteggio di performance di Lighthouse).

Ecco le impostazioni che consiglio:

File CSS :

• Minimizza i file CSS – Il tema Botiga minimizza già il suo codice per impostazione predefinita, ma questo può essere utile per minimizzare il codice dai plugin che stai utilizzando.
• Ottimizza la consegna CSS → Rimuovi CSS inutilizzati – Ciò rimuoverà i CSS non necessari pagina per pagina per ridurre le dimensioni del file di ogni pagina.

Non consiglio di combinare file CSS, poiché questo non è molto utile ora che la maggior parte degli host di qualità utilizza HTTP/2.

File JavaScript :

• Minimizza i file JavaScript
• Carica JS differito
• Ritarda l'esecuzione di JavaScript

Come con CSS, non consiglio di combinare file JavaScript.

Per garantire il funzionamento del tuo negozio, potresti voler aggiungere alcune esclusioni all'impostazione del ritardo di esecuzione di JavaScript . Questo essenzialmente ritarda il caricamento di tutto il JavaScript fino a quando un utente non interagisce con il tuo sito (ad es. clic o pergamene).

Questo è ottimo per migliorare il tuo tempo di creazione di contenuti più grande, ma potresti avere alcuni JavaScript che desideri caricare immediatamente, come script di monitoraggio (ad es. Google Analytics o Google Tag Manager) o alcuni plug-in che potresti utilizzare.

WP Rocket mantiene una pagina dettagliata di tutte le potenziali esclusioni in modo che tu non abbia bisogno di capire gli script per escluderti. Puoi semplicemente copiarli da questo articolo della guida di WP Rocket e incollarli nel campo File JavaScript esclusi .

Ad esempio, se desideri escludere Google Analytics, devi configurarlo in questo modo:

Dopo aver apportato queste modifiche, puoi vedere ancora più miglioramenti. La dimensione della pagina della nostra home page è stata ridotta di circa 80 KB e il tempo di creazione di contenuti più grande è sceso ulteriormente da ~0,7 secondi a ~0,5 secondi.

3. Ottimizza i tuoi media

A questo punto, hai spremuto la maggior parte del valore delle prestazioni di WP Rocket. Tuttavia, ci sono alcune altre aree delle impostazioni che potresti voler esplorare per apportare alcune modifiche aggiuntive.

Nella scheda Media , ti consiglio di abilitare il caricamento lento e le dimensioni dell'immagine mancanti. Il primo ti aiuterà con le prestazioni e il secondo può ridurre i problemi con Cumulative Layout Shift (CLS) per migliorare ulteriormente le prestazioni di Core Web Vitals:

4. Aggiungi una rete di distribuzione dei contenuti (per i negozi globali)

Una rete di distribuzione dei contenuti (CDN) ti consente di accelerare i tempi di caricamento del tuo negozio memorizzando nella cache risorse statiche come immagini e script su una rete di server globali.

Quindi, i visitatori possono scaricare quei file statici dal server che si trova fisicamente più vicino a loro, il che riduce i tempi di download e velocizza il tuo negozio.

Se il tuo negozio si rivolge solo agli acquirenti in un'area geografica specifica, ad esempio all'interno del Regno Unito, probabilmente non noterai molti vantaggi da un CDN.

Ma se ti rivolgi ad acquirenti in tutto il mondo, ad esempio nel Regno Unito e negli Stati Uniti, un CDN è un'altra grande opzione per velocizzare WooCommerce.

Nella sezione CDN , WP Rocket ti offre due opzioni per aggiungere una CDN al tuo negozio:

1. Puoi utilizzare il servizio ufficiale RocketCDN, che costa solo $ 7,99 al mese per una larghezza di banda illimitata. Si basa sulla rete globale di StackPath. Questa è l'opzione più semplice perché offre una configurazione automatica.
2. Puoi integrarti con qualsiasi CDN di terze parti facendo in modo che WP Rocket riscriva i tuoi URL. Le opzioni popolari sono StackPath, KeyCDN, Bunny CDN, CloudFront e altre.

Se non ti senti sicuro di configurare la tua CDN, ti consiglio di utilizzare il servizio RocketCDN, in quanto offre un buon rapporto qualità-prezzo poiché ottieni una larghezza di banda illimitata a un prezzo fisso:

Risoluzione dei problemi con WP Rocket su WooCommerce

Sebbene seguire le istruzioni sopra dovrebbe portare a un negozio WooCommerce più veloce senza problemi, ci sono alcuni rari scenari in cui potresti riscontrare problemi minori.

L'esempio più comune potrebbe essere problemi con alcuni tipi di contenuti dinamici come liste dei desideri degli utenti, articoli visualizzati di recente o contenuti specifici per località (ad esempio prezzi diversi per paesi diversi).

Ad esempio, se un utente visita un prodotto che ha aggiunto alla sua lista dei desideri, potresti voler mostrarlo nella pagina del prodotto. Ma in alcuni casi, la memorizzazione nella cache può portare a comportamenti traballanti qui.

Quindi, come puoi risolvere questo problema? Esaminiamo alcuni suggerimenti.

Prima di tutto, prova a utilizzare plug-in di contenuti dinamici codificati in modo compatibile con la cache. In sostanza, ciò significa che il plug-in genera il suo contenuto dinamico utilizzando JavaScript o AJAX anziché PHP.

Se non sei sicuro, puoi contattare lo sviluppatore del plug-in in cui stai riscontrando problemi. Alcuni plugin includono strumenti di compatibilità integrati. Ad esempio, il plug-in YITH WooCommerce Wishlist ha un'impostazione per abilitare il caricamento AJAX, che risolverà eventuali problemi con la memorizzazione nella cache.

Il team di WP Rocket ha anche creato alcuni plug-in/strumenti di compatibilità per i plug-in WooCommerce più diffusi che potrebbero causare problemi:

• Plugin YITH WooCommerce Wishlist
• Widget dei prodotti visualizzati di recente di Native WooCommerce
• Plugin YITH WooCommerce per i prodotti visti di recente

Se le correzioni precedenti non sono un'opzione, un'altra potenziale soluzione consiste nell'aggiungere una regola di esclusione della cache che ha come target il cookie impostato dal plug-in. Questo è più avanzato, ma ti consentirà di ignorare la cache per gli utenti che hanno bisogno di vedere il contenuto dinamico.

Puoi provare a trovare le informazioni sui cookie dalla documentazione del plug-in o assumere uno sviluppatore per scoprirlo per te. Quindi, puoi impostare le regole di esclusione della cache dei cookie nell'area Regole avanzate di WP Rocket:

Altri utili plugin per l'ottimizzazione della velocità di WooCommerce oltre a WP Rocket

WP Rocket può fare quasi tutto ciò di cui hai bisogno per l'ottimizzazione delle prestazioni di WooCommerce. Ma c'è un'eccezione principale:

Immagini!

Il tuo negozio avrà probabilmente un sacco di immagini di prodotti. E se non stai attento, quelle immagini dei prodotti possono rallentare il tuo negozio (in particolare le pagine dei prodotti e del negozio).

La soluzione è ottimizzare le immagini del tuo sito comprimendole e ridimensionandole. Puoi ottenerlo automaticamente utilizzando un plug-in di ottimizzazione delle immagini.

Abbiamo un intero post sui migliori plugin per l'ottimizzazione delle immagini di WordPress, ma ecco alcune delle migliori opzioni:

• Imagify: questo plugin proviene dallo stesso sviluppatore di WP Rocket
• ShortPixel – questo è il plugin che uso sui miei siti
• WP Compress: un'altra opzione di alta qualità; scopri di più nella nostra recensione di WP Compress

Oltre alle immagini, un altro strumento utile per i grandi negozi è un qualche tipo di soluzione per la ricerca di prodotti.

Se disponi di molti prodotti, la ricerca dei prodotti può richiedere molte risorse perché causa molte query pesanti sul database.

Puoi risolvere questo problema utilizzando soluzioni di ricerca fuori server come Elasticsearch (tramite il plug-in ElasticPress) o Jetpack Search (anch'esso basato su Elasticsearch, ma più semplice da implementare).

Accelera il tuo negozio WooCommerce oggi

Se vuoi che il tuo negozio WooCommerce abbia successo, è importante che si carichi rapidamente.

Per preparare il tuo negozio al successo, è importante innanzitutto stabilire una solida base:

1. Scegli un tema WooCommerce a caricamento rapido come il tema gratuito Botiga.
2. Usa hosting WordPress ottimizzato per le prestazioni come Kinsta o WP Engine.
3. Crea le basi del tuo sito eCommerce.

Da lì, WP Rocket può aiutarti a implementare una serie di ottimizzazioni delle prestazioni di WooCommerce, tra cui la memorizzazione nella cache compatibile con WooCommerce, l'ottimizzazione CSS e JavaScript e altro ancora.

Se aggiungi anche un plug-in di ottimizzazione delle immagini per ottimizzare le immagini dei tuoi prodotti, dovresti essere impostato per utilizzare un negozio WooCommerce leggero e veloce.

Hai ancora domande su come velocizzare WooCommerce con WP Rocket e Botiga? Fateci sapere nei commenti!