Guida completa all’ottimizzazione delle prestazioni dei siti e-commerce WooCommerce: dall’aumento della velocità di caricamento dei contenuti al miglioramento dei tassi di conversione

Nel settore dell’e-commerce, altamente competitivo, la velocità del sito web non rappresenta soltanto una base fondamentale per l’esperienza utente, ma è anche un indicatore chiave che influisce direttamente sui tassi di conversione e sui ricavi. Un sito WooCommerce con tempi di caricamento lenti aumenta notevolmente il tasso di abbandono del carrello degli acquisti. Questo articolo esaminerà in dettaglio una serie di strategie di ottimizzazione, che vanno dal livello del server a quello del codice, al fine di migliorare complessivamente le prestazioni del vostro sito WooCommerce e trasformare il vantaggio legato alla velocità in crescita commerciale.

Ottimizzazione dei server e degli ambienti di hosting.

Un sito web WooCommerce ad alte prestazioni parte da una base serverica solida. Scegliere il giusto piano di hosting e la corretta configurazione è la premessa per tutte le ottimizzazioni successive.

Scegliere una soluzione di hosting professionale.

Sebbene i server condivisi siano economici, le risorse (come CPU e memoria) vengono condivise tra più siti, il che può causare lentezze di risposta o addirittura il collasso del sito web durante i picchi di traffico o durante periodi promozionali. Per i siti e-commerce, si consiglia caldamente di utilizzare soluzioni di hosting ottimizzate come WooCommerce, VPS (Server Virtuali Privati) o il cloud hosting (ad esempio AWS, Google Cloud). Queste soluzioni offrono risorse dedicate o scalabili, memorie più veloci (come SSD NVMe), nonché meccanismi di cache integrati e integrazioni con CDN (Content Delivery Network), garantendo così una velocità di risposta del sito web di qualità.

Si consiglia di leggere La guida definitiva all'ottimizzazione di WordPress: strategie per migliorare le prestazioni in tutti gli aspetti, dalla velocità alla sicurezza.。

Configurare un server web efficiente

Nginx di solito si comporta meglio di Apache tradizionale nel gestire file statici e richieste ad alto carico concorrente, consumando inoltre meno memoria. Per i siti che utilizzano Apache, è importante assicurarsi che sia abilitato e configurato correttamente. mod_deflate(Per la compressione con Gzip) e mod_expires(Modulo utilizzato per i header di cache del browser.) Inoltre, l’utilizzo delle ultime versioni di PHP (ad esempio PHP 8.x) può portare a notevoli miglioramenti delle prestazioni, poiché ogni aggiornamento principale include miglioramenti in termini di velocità di esecuzione e riduzione dell’occupazione di memoria. È essenziale abilitare OpCache sul server: questo permette di memorizzare nel cache il bytecode dei file PHP compilati, evitando che vengano ricompilati ad ogni richiesta e aumentando così notevolmente l’efficienza di esecuzione del codice PHP.

UltaHost – Hosting per siti WordPress

Garanzia di rimborso entro 30 giorni, larghezza di banda illimitata e accesso ai database, protezione gratuita contro gli attacchi DDoS; sconto del 50% per l’acquisto di un piano valido per 3 anni (da 3 a 4 TB di spazio di archiviazione).

pagina di accesso

Implementazione della cache degli oggetti

Per i siti WooCommerce che offrono un gran numero di prodotti e comportano interazioni frequenti da parte degli utenti, le query al database rappresentano uno dei principali colli di bottiglia per le prestazioni. Il caching degli oggetti consente di memorizzare i risultati delle query complesse nella memoria, permettendo di leggerli direttamente dalla memoria nelle richieste successive, riducendo notevolmente la pressione sul database. I soluzioni più efficaci sono l’utilizzo di Redis o Memcached.

Ad esempio, installando il server Redis e le relative estensioni PHP (come…) php-redis…) e inoltre… wp-config.php Aggiungendo la seguente configurazione al file, è possibile abilitare la cache object-based di Redis per WordPress:

// 在 wp-config.php 中添加
define('WP_CACHE', true);
define('WP_REDIS_HOST', '127.0.0.1');
define('WP_REDIS_PORT', 6379);
define('WP_REDIS_TIMEOUT', 1);
define('WP_REDIS_READ_TIMEOUT', 1);
// 可选：指定数据库索引，避免冲突
define('WP_REDIS_DATABASE', 0);

In seguito, sarà necessario installare un plugin come “Redis Object Cache” per attivare la connessione.

Ottimizzazione di temi, plugin e codice

Un codice inefficiente rappresenta un “assassino invisibile” che rallenta il funzionamento di un sito web. È quindi di fondamentale importanza revisionare e ottimizzare i temi (templates), i plugin nonché il codice personalizzato utilizzato nel sito.

Si consiglia di leggere Server dedicati: vantaggi, guide alla scelta e pratiche di implementazione。

Esaminare e semplificare i plugin e i temi (temi grafici per il sito web).

Ogni plugin attivato aumenta il carico sull’esecuzione del PHP, sulle query al database e sul caricamento dei risorse front-end. È quindi importante revisionare regolarmente l’elenco dei plugin presenti sul sito, disattivare e eliminare quelli che non vengono più utilizzati. Quando si sceglie un tema per il proprio sito, preferire i temi dedicati a WooCommerce che presentano un codice semplice, si concentrano esclusivamente sulle funzionalità legate al commercio elettronico e sono mantenuti con attenzione dai loro sviluppatori; evitare invece i temi “multifunzionali” che includono molti script e stili inutili. È possibile utilizzare strumenti di sviluppo come Query Monitor per individuare tutti i plugin e le query al database coinvolti nel caricamento di ogni pagina, nonché il tempo impiegato per il loro esecuzione, al fine di individuare con precisione i punti di rallentamento del sito.

Ottimizzare le query specifiche di WooCommerce

WooCommerce genera automaticamente alcune query che richiedono un elevato livello di prestazioni, soprattutto sulla pagina iniziale del negozio, sulle pagine delle categorie di prodotti e sulle pagine dei risultati di ricerca. È possibile ridurre questa pressione attuando le seguenti misure:
1. Limitare il numero di prodotti visualizzati sulla pagina del negozio: in WooCommerce, andare su “Impostazioni” -> “Prodotti” -> “Generale” e modificare i valori di “Numero di prodotti per riga” e “Numero di righe per pagina”.
2. Abilitare la paginazione invece di “Carica di più”: Sebbene l’esperienza di “scorrimento infinito” sia piacevole, essa aumenta costantemente il numero di elementi del DOM e l’occupazione di memoria; la paginazione rappresenta quindi una scelta più “leggera” (meno onerosa per il sistema).
3. Utilizzare con attenzione i plugin per il filtro delle proprietà dei prodotti: Alcuni plugin di filtraggio AJAX in tempo reale possono eseguire un gran numero di richieste; assicuratevi che siano configurati con un cache appropriato.

Caricare in ritardo risorse non essenziali

“La velocità di caricamento del contenuto visualizzato sulla prima pagina (quello che si vede immediatamente dopo aver aperto il sito web) è di fondamentale importanza. Per le immagini, i video presenti al di sotto della prima pagina, nonché per i contenuti inseriti da terze parti (come i box dei commenti o i pulsanti per condividere sui social media), è consigliabile utilizzare tecniche di caricamento differito. WordPress 5.5 e versioni successive offrono il supporto nativo per il caricamento differito delle immagini principali. Per un controllo più dettagliato, si possono utilizzare plugin come Lazy Load. Per i script aggiunti da plugin, se non influiscono sulla visualizzazione della prima pagina, si può provare a caricarli in modo asincrono o differito utilizzando plugin come Async JavaScript.

hosting.com Hosting condiviso

Prestazioni elevate con CPU AMD EPYC, storage SSD NVMe e LiteSpeed, supporto interno di esperti 24 ore su 24, 7 giorni su 7, misure di sicurezza avanzate, tra cui SSL, brute force, malware e protezione DDoS, risparmi fino a 73%

pagina di accesso

Risorse statiche e ottimizzazione delle prestazioni del front end

Ottimizzare il modo in cui vengono forniti i file statici, come immagini, CSS e JavaScript, può migliorare direttamente l’esperienza di caricamento visivo degli utenti.

Ottimizzazione delle immagini e formato WebP

Le immagini sono solitamente la parte più “ingombrante” (in termini di dimensioni) di una pagina web. I passaggi per ottimizzarle includono:
1. Compressione: Utilizzare plugin come Smush o ShortPixel, oppure strumenti offline come TinyPNG, per comprimere le immagini mantenendo al contempo la qualità visiva.
2. Adattamento delle dimensioni: Assicurarsi che le dimensioni dell’immagine caricata non siano superiori a quelle previste per la sua visualizzazione. WordPress genera diverse dimensioni di miniature, e il tema utilizzerà quella più appropriata.
3. Formato moderno: Convertire i file in formato PNG/JPEG in formato WebP consente di ridurne di dimensioni di circa il 251–351%. Questa conversione può essere eseguita automaticamente utilizzando plugin (come WebP Express) o servizi CDN (Content Delivery Network).
4. Caricamento differito: Come già accennato, i file immagine presenti al di fuori della pagina iniziale vengono caricati in modo differito (ossia non immediatamente all’apertura della pagina).

Unire, minimizzare e cache i file statici

Ridurre il numero di richieste HTTP inviate dal browser può accelerare il caricamento delle pagine.
Unione: unire più file CSS o JavaScript in pochi file.
– Minimizzazione: Rimuovere i caratteri di spazio, i commenti e il codice non necessario dai file CSS/JS.
Cache: impostando le intestazioni della cache del server, si consente al browser di memorizzare nella cache le risorse statiche come CSS, JavaScript e immagini per un periodo di tempo più lungo (ad esempio, un anno). Quando le risorse vengono aggiornate, il browser viene forzato a recuperarle nuovamente modificando il nome del file (controllo delle versioni).

Si consiglia di leggere Guida all’acquisto di server cloud: dalla spiegazione dei concetti alla comparazione dei servizi offerti dai principali fornitori。

Queste operazioni possono essere facilmente eseguite utilizzando plugin per il miglioramento delle prestazioni, come Autoptimize o WP Rocket. La loro configurazione include solitamente opzioni come “Ottimizzazione del codice CSS”, “Ottimizzazione del codice JavaScript” e “Aggregazione dei file JS/CSS”.

Rimuovere i risorse che causano blocchi nella rendering.

I browser bloccano la rendering della pagina quando analizzano il CSS e sincronizzano il JavaScript. Per quanto riguarda il CSS, è possibile indicare gli stili non essenziali per la prima pagina come “non critici” e caricarli in modo asincrono. Per il JavaScript, gli script non essenziali possono essere anch’essi caricati in modo asincrono.async) o ritardi (deferIl caricamento avviene normalmente; i plugin per migliorare le prestazioni delle pagine web offrono spesso questa funzionalità. Inoltre, si consiglia di includere il codice CSS essenziale (il insieme minimo di stili necessario per rendere visibile il contenuto della prima pagina) direttamente all’interno del file HTML. <head> In questo modo, si evita il blocco del rendering causato dall’attesa dei file CSS esterni.

Hosting condiviso InterServer

Hosting condiviso $2,50 USD al mese, primo mese $0,1 USD codice promozionale tryinterserver, 461 script di applicazioni cloud, installazione con un clic.

pagina di accesso

Advanced caching and content distribution strategies

Il caching è uno dei metodi più efficaci per migliorare la velocità dei siti web dinamici, mentre i servizi CDN (Content Delivery Networks) permettono di distribuire i contenuti in modo rapido agli utenti in tutto il mondo.

Implementare la cache delle pagine

La cache della pagina conserva l’intera pagina HTML generata dinamicamente sotto forma di un file statico; i visitatori successivi ottengono direttamente questo file statico, evitando completamente il trattamento da parte di PHP e del database, il che garantisce una velocità di accesso estremamente elevata. Per WooCommerce, tuttavia, poiché pagine come il carrello degli acquisti, la procedura di pagamento e la sezione “Il mio account” sono personali per ogni utente, non è possibile renderle completamente statiche. Pertanto, è necessario configurare regole di cache intelligenti.
Le pagine che possono essere memorizzate in cache includono: la pagina iniziale del negozio, le pagine dei prodotti, le pagine delle categorie, gli articoli del blog, ecc. Tutte queste pagine, che devono mostrare lo stesso contenuto per tutti gli utenti, dovrebbero essere completamente memorizzate in cache.
Escludere le pagine private: è necessario includere solo i contenuti pubblici. cart、checkout、my-account、wc-api Le pagine in questione, nonché le sessioni degli utenti già connessi (identificate tramite i Cookie), vengono escluse dalla cache.

Strumenti come WP Rocket, W3 Total Cache e LiteSpeed Cache offrono interfacce intuitive per configurare le regole relative alla cache. Ad esempio, nella sezione “Cache” di WP Rocket è possibile impostare facilmente quali pagine vanno memorizzate in cache e quali regole vanno escluse.

Utilizzare i servizi CDN (Content Delivery Networks) per accelerare l’accesso ai contenuti in tutto il mondo.

Il CDN (Content Delivery Network) funziona memorizzando copie dei file statici del vostro sito web, nonché intere pagine web, nei nodi distribuiti in tutto il mondo. Quando un utente accede al sito, i dati vengono recuperati dal nodo più vicino in termini di posizione geografica, riducendo notevolmente i tempi di risposta (i latenti). Questo è particolarmente vantaggioso per i siti e-commerce che contengono un gran numero di immagini, stili grafici e script. Servizi di CDN di punta, come Cloudflare, StackPath e KeyCDN, offrono soluzioni facili da integrare nel proprio sistema. Inoltre, Cloudflare fornisce anche funzionalità aggiuntive per la sicurezza e la compressione intelligente dei dati.

Gestire i contenuti dinamici in WooCommerce

Anche se si utilizza la cache della pagina, informazioni come lo stock dei prodotti, i prezzi e i banner promozionali potrebbero dover essere aggiornate in tempo reale. A tal fine, si possono adottare strategie come la “pulizia della cache” o la “non memorizzazione di parti della cache”. Ad esempio, quando lo stock di un prodotto cambia, la cache della pagina relativa a quel prodotto viene automaticamente eliminata. Per elementi dinamici di piccola entità, come il totale del carrello, si può utilizzare la tecnologia AJAX per ottenere e aggiornare i dati direttamente dal server, senza influenzare il resto del contenuto della pagina memorizzato in cache. Alcuni plugin di cache avanzati supportano questa funzionalità di “caricamento differito” di parti dinamiche del contenuto.

Riassumendo

L’ottimizzazione delle prestazioni di un sito web basato su WooCommerce rappresenta un progetto di ingegneria sistemica che coinvolge server, applicazioni, database e risorse front-end. I primi passi consistono nella scelta di un provider di hosting ad alte prestazioni e nella configurazione dei meccanismi di caching dei dati; successivamente, è necessario semplificare l’utilizzo degli plugin e ottimizzare il codice per eliminare eventuali rallentamenti. Ulteriori misure includono la compressione delle immagini, l’attivazione di sistemi di caching avanzati e l’utilizzo di servizi CDN (Content Delivery Network) per accelerare la distribuzione dei contenuti. È fondamentale utilizzare regolarmente strumenti di monitoraggio delle prestazioni, come GTmetrix, PageSpeed Insights o WebPageTest, per analizzare i tempi di caricamento del sito (ad esempio, il tempo necessario per visualizzare completamente il contenuto o il tempo di risposta al primo input da parte dell’utente) in relazione agli obiettivi commerciali (come tassi di conversione e valore medio per acquisto). Questo approccio permette di verificare costantemente l’efficacia degli interventi di ottimizzazione, assicurando che il proprio negozio online sia sempre pronto ad accogliere i clienti nel modo migliore possibile, e di creare così un ciclo virtuoso che porti a miglioramenti delle prestazioni e a una crescita commerciale.

FAQ - Domande frequenti

Cosa succede se, dopo aver abilitato la cache, le informazioni sulle scorte di prodotti visualizzate dagli utenti non sono aggiornate?

Questo rappresenta il problema principale da risolvere riguardo al caching di WooCommerce. La soluzione corretta non consiste nell’disabilitare il caching su tutte le pagine, ma nell’configurare regole di caching in modo da escludere i contenuti dinamici. È necessario assicurarsi che le pagine di pagamento, del carrello degli acquisti e del proprio account non vengano memorizzate in cache. Per le pagine dei prodotti, è possibile utilizzare la funzione “Esclusione totale del caching” fornita dagli plugin di caching, oppure impostare che il caching di tali pagine venga automaticamente cancellato ogni volta che vengono aggiornate le informazioni sull’invenduto. Un approccio più avanzato prevede di memorizzare soltanto la struttura della pagina in cache, mentre i dati dinamici (come l’invenduto e i prezzi) vengono richiesti in tempo reale tramite AJAX e inseriti successivamente nel contenuto visualizzato.

Quale plugin di cache dovrei scegliere?

La scelta dipende dall’ambiente del server e dalle preferenze tecniche. Per la maggior parte degli utenti…WP Rocket Offre le funzionalità più complete, facili da utilizzare e pronte all’uso fin dalla prima installazione: cache delle pagine, cache del browser, ottimizzazione dei file, caricamento differito dei contenuti, ecc., oltre alla compatibilità integrata con WooCommerce. Se il vostro server utilizza LiteSpeed, allora… LiteSpeed Cache I plugin rappresentano una scelta gratuita e di altissima qualità, in grado di integrarsi in modo profondo con i server. Sono particolarmente adatti per gli utenti che amano personalizzare i sistemi in modo dettagliato e cercano soluzioni gratuite.W3 Total Cache 或 WP Super Cache Anche questa è una scelta valida, ma richiede una maggiore conoscenza delle configurazioni.

Nonostante i miglioramenti apportati, i punteggi dei test sulla velocità del sito web rimangono bassi. Quali potrebbero essere le cause?

I punteggi ottenuti con strumenti di test della velocità (come PageSpeed Insights) sono influenzati da diversi fattori. Prima di tutto, è consigliabile esaminare i suggerimenti forniti nelle sezioni “Opportunità” e “Diagnosi”. Tra le cause più comuni figurano tempi di risposta del server (TTFB – Time To First Byte) eccessivamente lunghi, che richiedono interventi per ottimizzare il server e l’hosting; script di terze parti non ottimizzati (ad esempio, per pubblicità, analisi o strumenti di chat), che possono essere caricati in modo differito; nonché immagini di dimensioni eccessive o file CSS/JS non utilizzati. Inoltre, è importante utilizzare una finestra del browser anonima o “senza traccia” durante i test, per evitare che lo stato dell’utente connesso o gli estensioni del browser influenzino i risultati.

Ci sono molte immagini dei prodotti, e ottimizzarle richiede molto tempo. Esiste un metodo efficace?

Ottimizzare manualmente migliaia di immagini è irrealistico. Si consiglia di utilizzare soluzioni automatizzate: 1) utilizzare strumenti come… ShortPixel 或 Imagify Tali plugin permettono di ottimizzare in batch tutte le immagini presenti nella libreria multimediale, nonché di automatizzare l’ottimizzazione delle immagini nuovamente caricate. Inoltre, molti di questi plugin offrono anche la funzionalità di conversione delle immagini in formato WebP. È consigliabile considerare l’utilizzo di servizi CDN (Content Delivery Network) dotati di funzionalità di ottimizzazione e conversione delle immagini in tempo reale (ad esempio, la funzione “Polish” di Cloudflare Pro o servizi CDN specifici per il mercato cinese): tali servizi possono eseguire l’ottimizzazione e la conversione delle immagini dinamicamente al momento della loro richiesta, senza la necessità di pre-elaborare l’intera libreria di immagini originale.