Il manuale definitivo per l’ottimizzazione delle prestazioni dei siti web basati su WooCommerce: come aumentare i tassi di conversione e migliorare l’esperienza utente

Un sito WooCommerce che carica lentamente rappresenta un vero ostacolo per i tassi di conversione: ogni secondo in più trascorso per il caricamento delle pagine può comportare una diminuzione del 71% dei tassi di conversione. L’ottimizzazione delle prestazioni non è un compito esclusivamente tecnico, ma riguarda direttamente i vostri ricavi e la fidelizzazione degli utenti. Questo guida vi aiuterà ad ottimizzare sistematicamente il vostro negozio WooCommerce, partendo dai server fino all’interfaccia utente, per garantire che il sito sia veloce, affidabile e in grado di trasformare i visitatori in clienti fedeli.

Ottimizzazione dei server e degli ambienti di hosting.

La base della prestazione parte dal vostro server. Un host con prestazioni scarse rende difficile ottenere velocità ottimali, indipendentemente da come si ottimizzi il codice.

Scegliere una soluzione di hosting ad alte prestazioni

Per i negozi basati su WooCommerce, gli host condivisi di solito non riescono a soddisfare le esigenze, soprattutto durante i picchi di traffico. Si consiglia di utilizzare host dedicati alla gestione di siti web basati su WooCommerce o soluzioni più avanzate come i VPS. Queste soluzioni sono solitamente dotate di cache per i dati, versioni più recenti di PHP (ad esempio PHP 8.0+) e ottimizzazioni specifiche per il funzionamento del server. Assicurarsi che il provider di hosting supporti i protocolli HTTP/2 o addirittura HTTP/3: ciò permette di migliorare notevolmente l’efficienza nell’ caricamento dei contenuti.

Si consiglia di leggere Analisi approfondita: come utilizzare WooCommerce per creare siti di e-commerce efficienti ed estensibili。

Configurare un software per server web efficiente

Nginx Nel trattamento di file statici e connessioni concorrenti, i sistemi moderni sono generalmente più efficienti rispetto a quelli tradizionali. Apache Più efficiente. Molti host ottimizzati lo utilizzano già per impostazione predefinita. Nginx 或 Nginx + Apache Modalità mista: potreste prendere in considerazione l’uso di questa opzione. Nginx In qualità di proxy inverso, serve ad accelerare il processo. Apache Server. Attivare anche… Gzip o più avanzati Brotli La compressione permette di ridurre notevolmente le dimensioni dei file da trasmettere.

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

Implementare un meccanismo di cache per gli oggetti

WooCommerce e WordPress effettuano frequenti interrogazioni al database, il che rappresenta uno dei principali limiti di prestazioni. Il caching degli oggetti consente di memorizzare i risultati delle query nel memory, permettendo alle richieste successive di accedervi direttamente e in modo molto veloce. Tra le soluzioni più popolari per risolvere questo problema vi sono:
Redis: un database di memoria ad alte prestazioni per coppie chiave-valore.
– Memcached: Un altro classico sistema di cache basato sull’uso della memoria per l’archiviazione di oggetti.

È necessario installare e attivare questi servizi sul server, e successivamente utilizzare plugin per gestirli correttamente. Redis Object CachePer collegarsi in WordPress, all’interno del sito web… wp-config.php Basta aggiungere la configurazione appropriata al file per attivarla.

// 示例：在 wp-config.php 中定义 Redis 为对象缓存后端
define('WP_REDIS_HOST', '127.0.0.1');
define('WP_REDIS_PORT', 6379);
define('WP_CACHE', true);

Ottimizzazione di WordPress e WooCommerce per un funzionamento più efficiente

Dopo aver consolidato le basi del server, è necessario ottimizzare WordPress e WooCommerce stessi al fine di ridurre il carico non necessario.

Ridurre il numero di plugin e temi utilizzati.

Ogni plugin rappresenta una potenziale fonte di rallentamento del sito. Effettua regolarmente un’analisi della tua lista di plugin e disattiva/disponi di quelli non necessari. Fai particolare attenzione ai plugin che caricano una grande quantità di file CSS e JavaScript in ogni pagina del sito. Per quanto riguarda i temi (theme), scegli temi a pagamento caratterizzati da codice compatto e ottimizzato per le prestazioni, oppure temi “leggeri” (lightweight).

Si consiglia di leggere 10 strategie chiave e guide pratiche per ottimizzare le prestazioni dei siti web di e-commerce basati su WooCommerce。

Ottimizzare funzionalità specifiche di WooCommerce

Alcune funzionalità di WooCommerce, per impostazione predefinita, potrebbero non essere favorevoli al miglioramento delle prestazioni del sito web. È possibile modificare queste impostazioni utilizzando frammenti di codice o plugin dedicati.
Disabilitare gli stili e gli script non necessari di WooCommerce: se il tuo tema gestisce già bene gli stili del negozio, puoi impedire a WooCommerce di caricare i suoi file CSS e JS predefiniti nelle pagine non relative al negozio.
– Limitazione dei dati di sessione: WooCommerce crea una sessione per ogni visitatore; il loro accumulo prolungato può rallentare il funzionamento del database. È consigliabile pulire regolarmente i dati di sessione o impostare un meccanismo di pulizia automatica.
– Ottimizzazione delle ricerche di prodotti: Nei grandi negozi che dispongono di migliaia di prodotti, le ricerche standard nella lista dei prodotti possono risultare lente. Si consiglia di utilizzare funzionalità come la paginazione, il caricamento differito dei dati o i filtri via AJAX per migliorare l’esperienza utente.

Manutenzione e ottimizzazione dei database

È importante pulire regolarmente il database di WordPress da dati ridondanti, come versioni di articoli modificate, bozze automatiche e commenti inutili. Per farlo, si possono utilizzare plugin specifici. WP-Optimize Esegui questa operazione in modo sicuro. Ottimizzare i tabelli di dati può inoltre ridurre i tempi di esecuzione delle query.

Ottimizzazione degli asset front-end e della velocità di caricamento

La velocità percepita dall’utente dipende in gran parte dalla velocità con cui il browser rende la pagina. L’ottimizzazione dei risorse front-end rappresenta quindi un passo fondamentale.

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

Ottimizzazione delle immagini e dei file multimediali

Le immagini dei prodotti rappresentano una risorsa fondamentale per il sito web WooCommerce e rappresentano anche la principale fonte di occupazione dello spazio di archiviazione (in termini di dimensioni dei file).
1. Compressione e ridimensionamento: Assicurarsi che tutte le immagini caricate siano state compresse (utilizzando strumenti come TinyPNG o plugin appropriati). Imagify) e adattarlo alle dimensioni effettive di visualizzazione.
2. Utilizzando formati moderni: convertire i file PNG e JPEG in formato WebP permette di ridurne notevolmente le dimensioni senza perdere qualità.
3. Caricamento differito: Utilizzare il caricamento differito (Lazy Load) per le immagini e i video presenti al di fuori della prima pagina, in modo che il sito carichi prima i contenuti visibili.

Unire, minimizzare e caricare i risorse in modo asincrono

I temi e i plugin di WordPress caricano un gran numero di file CSS e JavaScript, il che comporta l’esecuzione di molteplici richieste HTTP.
Unire i file: unire più piccoli file CSS/JS in pochi file.
– Minimizzazione: Rimuovere i caratteri di spazio, i commenti e altri elementi non necessari dal codice per ridurre le dimensioni del file.
Caricamento asincrono o ritardato: utilizzare per il JS non essenziale (come i commenti e i pulsanti di condivisione sui social media). async 或 defer Questo attributo serve a prevenire che determinati elementi bloccino il rendering della pagina.

Queste operazioni possono essere eseguite tramite plugin per il miglioramento delle prestazioni (come…). WP Rocket、AutoptimizeÈ possibile realizzarlo facilmente. Per i codici CSS più importanti, è possibile inserirli “in linea” nella parte iniziale del file HTML, al fine di accelerare il rendering della prima pagina.

Si consiglia di leggere La guida definitiva per l’accelerazione dei siti web WordPress: dall’inizio alla perfezione。

Attuare una strategia di cache per i browser

Impostando i header di cache HTTP, è possibile indicare al browser di memorizzare per un certo periodo di tempo i risorse statiche (come immagini, CSS, JS). Quando l’utente visita nuovamente il vostro sito web, queste risorse vengono caricate dalla cache locale, senza la necessità di essere scaricate nuovamente dal server. Questo può essere realizzato attraverso la configurazione del server. .htaccess Può essere completato utilizzando file specifici o plugin di cache.

Advanced caching strategies and content distribution

Questo è l’ultimo passo verso un notevole miglioramento delle prestazioni velocistiche per i negozi gestiti da WooCommerce, soprattutto per gli utenti in tutto il mondo.

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

Mecanismo di cache per le pagine delle applicazioni

Il cache della pagina converte le pagine di WordPress generate dinamicamente in file HTML statici. Quando un visitatore richiede una pagina, viene inviato direttamente il file HTML, evitando completamente l’utilizzo di PHP e le query al database, il che consente una velocità di caricamento molto elevata. Questo approccio è particolarmente efficace per le pagine il cui contenuto non cambia frequentemente (ad esempio, pagine di prodotti o articoli di blog).

Attenzione: poiché le pagine di WooCommerce (come il carrello, il processo di pagamento e il profilo utente) sono estremamente dinamiche e personalizzate per ogni utente, queste pagine devono essere escluse dal cache delle pagine. La maggior parte dei plugin di cache avanzati (come…) W3 Total Cache, WP RocketTutti forniscono regole a livello di dettaglio per impostare questi elementi da escludere.

Utilizzare una rete di distribuzione dei contenuti (Content Delivery Network, CDN).

Il CDN (Content Delivery Network) distribuisce i file statici del vostro sito web (immagini, CSS, JS, font) su server dislocati in tutto il mondo. Quando un utente accede al sito, i file vengono recuperati dal server più vicino a lui, riducendo notevolmente i tempi di caricamento. Questo è particolarmente importante per i negozi WooCommerce che contengono un gran numero di immagini dei prodotti. È quindi fondamentale scegliere un provider di servizi CDN affidabile (come Cloudflare o KeyCDN) e integrarlo nel vostro sito web.

Attivare le tecnologie di pre-caricamento e pre-elaborazione dei dati.

Il “pre caricamento” (Preload) indica al browser di scaricare in anticipo determinati risorse essenziali, come l’immagine del protagonista della pagina iniziale, i font necessari o i file CSS principali. Il “prefetching” (Prefetching), invece, consiglia al browser di caricare in modo anticipato i contenuti delle pagine che l’utente potrebbe visitare successivamente, quando non è attivamente impegnato (ad esempio, la pagina di un singolo prodotto). Questi metodi permettono di migliorare notevolmente la velocità di navigazione e l’esperienza d’uso dell’utente.

Riassumendo

L’ottimizzazione delle prestazioni di un sito web basato su WooCommerce rappresenta un progetto completo che coinvolge sia l’infrastruttura di base che l’aspetto visivo del sito (l’interfaccia utente). Inizia con la scelta di server potenti e sistemi di cache per i dati, al fine di gestire in modo efficace i contenuti dinamici del negozio online. Successivamente, si riduce il carico sul sistema ottimizzando il codice sorgente e la struttura del database. Per accelerare la visualizzazione delle pagine, vengono utilizzate tecniche come l’ottimizzazione delle immagini, il trattamento dei file necessari al funzionamento del sito e il caching nei browser. Infine, il caching delle pagine stesse, insieme all’utilizzo di servizi CDN (Content Delivery Networks), garantisce un’esperienza di utilizzo rapida e uniforme in tutto il mondo. L’applicazione sistematica e continua di queste strategie non solo permette di ridurre notevolmente i tempi di caricamento delle pagine e di diminuire il tasso di abbandono del sito da parte degli utenti, ma contribuisce anche direttamente all’aumento dei tassi di conversione e alla soddisfazione dei clienti, permettendo al proprio negozio online di distinguersi dalla concorrenza.

FAQ - Domande frequenti

L’ caching delle pagine può influenzare le funzionalità del carrello della spesa e del processo di pagamento in WooCommerce?

Sì, se le impostazioni non sono corrette. Le informazioni relative al carrello della spesa e alla pagina di pagamento contengono dati di sessione unici per l’utente (come i prodotti aggiunti, i codici sconto, l’indirizzo dell’utente) e devono essere generate dinamicamente in ogni occasione.

Pertanto, quando si configura qualsiasi plugin per la cache delle pagine, è essenziale impostare delle regole per determinare quali contenuti vengano memorizzati nella cache. /cart/、/checkout/、/my-account/ L’URL del percorso, nonché quello utilizzato per aggiornare il carrello della spesa. wc-ajax Gli endpoint vengono esclusi esplicitamente dalla cache. La maggior parte dei plugin di qualità offre questa funzionalità.

Cosa succede se il sito web presenta errori dopo aver abilitato la cache degli oggetti (ad esempio, con Redis)?

Questo problema solitamente si verifica a causa di un’installazione o di una configurazione errata del servizio Redis sul server, oppure a causa di parametri di connessione sbagliati configurati in WordPress.

Innanzitutto, verificare tramite SSH o il pannello di controllo del host che il servizio Redis sia in esecuzione. In secondo luogo, controllare… wp-config.php I parametri di connessione presenti nel file (come l’indirizzo del server, il porto, la password) sono completamente in linea con la configurazione del server? Infine, assicuratevi che il plugin di cache degli oggetti appropriato sia stato installato e attivato. Redis Object CacheIl plugin indica che la connessione è stata avviata con successo. Si consiglia di eseguire il test in momenti in cui il traffico sul sito web è più basso.

Come posso scoprire quali parti del mio sito web WooCommerce stanno rallentando la velocità di caricamento?

È necessario utilizzare strumenti di analisi del performance per individuare i punti di blocco. Ecco alcuni strumenti gratuiti consigliati:
– Google PageSpeed Insights: Fornisce valutazioni sulle prestazioni del sito sia per desktop che per dispositivi mobili, indicando punti specifici in cui è possibile apportare miglioramenti (ad esempio: “ridurre il codice JavaScript non utilizzato”, “impostare correttamente le dimensioni delle immagini”).
– GTmetrix: Fornisce grafici dettagliati che mostrano l’ordine di caricamento, le dimensioni e i tempi di esecuzione di ciascun elemento del sito web, permettendo di individuare con chiarezza quale file o richiesta sia all’origine dei tempi di caricamento più lunghi.
Query Monitor (plug-in WordPress): si tratta di un potente strumento di sviluppo che consente di visualizzare direttamente nell'area di amministrazione di WordPress tutte le query di database, gli errori PHP, gli hook attivati e gli script caricati durante la generazione della pagina. È particolarmente efficace nell'individuare i problemi di prestazioni causati da plug-in o codice tematico inefficienti.

Per i negozi che dispongono di un gran numero di prodotti, quali sono i suggerimenti particolari per ottimizzare la pagina della lista dei prodotti?

Quando il numero di prodotti raggiunge migliaia o addirittura decine di migliaia, il caricamento della pagina standard di archiviazione dei prodotti diventa molto lento. È possibile adottare le seguenti strategie:
1. Potenziare la cache del server: Assicurarsi che la pagina della lista dei prodotti venga correttamente memorizzata nella cache.
2. Implementazione di una paginazione efficiente: evitare di caricare tutti i prodotti in una sola volta; utilizzare funzionalità di paginazione o pulsanti per “caricare di più”.
3. Filtrazione tramite AJAX: Quando l’utente utilizza criteri di filtrazione (ad esempio per colore o dimensione), viene utilizzata la tecnologia AJAX per aggiornare soltanto l’area che mostra i prodotti, senza ricaricare l’intera pagina.
4. Ottimizzazione degli indici del database: Assicurarsi che le tabelle del database relative ai prodotti di WooCommerce siano ben ottimizzate, in modo da garantire un funzionamento efficiente del sistema. wp_posts, wp_postmeta, wp_term_relationshipsNei campi di ricerca più utilizzati (come…) post_type, meta_keySono stati creati degli indici su tale struttura di dati. Per farlo, potrebbero essere necessarie conoscenze di gestione dei database o l’uso di plugin specifici.
5. Si potrebbe considerare l’uso di motori di ricerca specializzati, come Elasticsearch, al posto della ricerca predefinita di WordPress, per gestire query di prodotto più complesse; tuttavia, questa rappresenta una soluzione di livello più avanzato.