Una guida pratica all'ottimizzazione delle prestazioni dei siti e-commerce WooCommerce e allo sviluppo di plug-in avanzati.

Perché ottimizzare le prestazioni di WooCommerce?

Per i siti e-commerce costruiti con WooCommerce, le prestazioni non sono una semplice opzione da considerare, bensì un fattore cruciale per il successo o il fallimento dell’attività. Tempi di caricamento lenti portano direttamente a un aumento della percentuale di utenti che abbandonano il sito, a una diminuzione dei tassi di conversione e a un impatto negativo sul posizionamento nei motori di ricerca. Un ritardo di un secondo nel caricamento di una pagina può essere sufficiente per spingere i potenziali clienti a rivolgersi ai concorrenti.

WooCommerce è di per sé un plugin molto funzionale, profondamente integrato con WordPress. Questo significa che, sebbene offra grande flessibilità, comporta anche un certo impatto sulle prestazioni del sito, soprattutto in termini di query al database, caricamento di script e gestione delle sessioni. Un negozio online basato su WooCommerce non ottimizzato effettua spesso query al database, il che può rallentare il funzionamento del sito. wp_posts、wp_postmeta、wp_woocommerce_order_items Per tabelle di dati di grandi dimensioni, soprattutto quando si lavora con elenchi di prodotti, varianti e ordini, sono comuni problemi di prestazioni. Inoltre, un gran numero di immagini non compresse, un eccesso di richieste HTTP, nonché file JavaScript e CSS che bloccano il processo di rendering, rappresentano ulteriori fattori che influenzano negativamente le prestazioni del sistema.

In sostanza, l’ottimizzazione delle prestazioni ha lo scopo di migliorare l’esperienza utente e i risultati commerciali. Un sito web più veloce consente agli utenti di navigare più rapidamente tra i prodotti, di aggiungere gli articoli al carrello e di completare il processo di acquisto. Dal punto di vista tecnico, l’ottimizzazione riguarda miglioramenti complessivi in diversi aspetti: i tempi di risposta del server, l’efficienza del caricamento delle risorse, la velocità di esecuzione del codice e le prestazioni delle query sul database.

Si consiglia di leggere Guida definitiva all’ottimizzazione delle prestazioni dei siti e-commerce WooCommerce: analisi completa da configurazioni a strategie di caching。

Strategie di ottimizzazione delle prestazioni del core

Ottimizzare le prestazioni di un sito web basato su WooCommerce rappresenta un vero e proprio progetto sistemico che richiede modifiche in tutti gli aspetti, dal lato front-end a quello back-end. Le strategie descritte di seguito costituiscono le basi per creare un’esperienza di shopping online veloce e efficiente.

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

Utilizzare al meglio il meccanismo di cache

Il caching è uno dei metodi più efficaci per migliorare le prestazioni di WooCommerce. Il caching degli oggetti, in particolare quando implementato tramite Redis o Memcached, può ridurre notevolmente il numero di query al database. Per WooCommerce, è fondamentale cacheare i dati dei prodotti, le sessioni del carrello degli acquisti e i risultati delle ricerche.

Il caching delle pagine permette di fornire agli utenti non connessi pagine HTML statiche, evitando completamente l’elaborazione da parte di PHP e del database. Molti ottimi plugin di caching, come WP Rocket o W3 Total Cache, offrono opzioni di configurazione specifiche per WooCommerce; ad esempio, è possibile escludere dalla cache le pagine del carrello, della procedura di pagamento e della pagina “Il mio account”, al fine di garantire l’accuratezza dei dati dinamici. A livello di codice, è possibile utilizzare l’API “Transients” di WordPress. set_transient() 和 get_transient()Vengono utilizzati meccanismi di caching per memorizzare i risultati di query costose, al fine di ridurre il carico sul sistema e migliorare le prestazioni.

Ottimizzare le immagini e le risorse statiche.

Le immagini dei prodotti rappresentano la principale fonte di traffico e l’elemento visivo più importante sui siti di e-commerce; inoltre, rappresentano anche la parte più facile da ottimizzare. Prima di tutto, tutte le immagini devono essere compresse, utilizzando plugin come ShortPixel o strumenti online come TinyPNG per una compressione con o senza perdita di qualità. In secondo luogo, è necessario attivare la tecnologia di caricamento differito (Lazy Load), in modo che le immagini presenti al di fuori della pagina iniziale vengano caricate soltanto quando l’utente si avvicina a esse: questo permette di ridurre significativamente il carico iniziale della pagina.

Inoltre, abilitare i formati di immagini moderni (come WebP) consente di ottenere immagini di dimensioni più ridotte nei browser che li supportano. Per i file CSS e JavaScript, è necessario unirli e ridurne le dimensioni (processo noto come “minification”), eliminando il codice non utilizzato. Il codice CSS essenziale dovrebbe essere inserito direttamente all’interno dell’HTML. <head> Per garantire il rapido rendering del contenuto della prima pagina, i dati essenziali vengono caricati in modo sincrono, mentre le risorse non fondamentali vengono caricate in modo asincrono o con ritardo.

Si consiglia di leggere Guida completa per l’ottimizzazione delle prestazioni e l’aumento dell’efficacia SEO dei siti web di e-commerce basati su WooCommerce。

Pulizia e manutenzione del database

WooCommerce genera una grande quantità di dati durante il suo funzionamento, tra cui registri di modifica degli ordini, dati temporanei scaduti e informazioni sui carrelli della spesa non più utilizzate. Questi dati possono rallentare le velocità di esecuzione delle query. Pulire regolarmente il database rappresenta quindi un’attività di manutenzione essenziale.

È possibile eseguire manualmente alcune operazioni di ottimizzazione delle query, ad esempio la pulizia dei dati in eccesso o l’eliminazione di informazioni non necessarie. wp_woocommerce_sessions Per gestire le sessioni scadute presenti nel database, si può utilizzare un plugin specifico. Tuttavia, un approccio più professionale consiste nella creazione di un job cron (Cron Job) per eseguire regolarmente uno script di ottimizzazione. Inoltre, è fondamentale assicurarsi che le tabelle del database siano dotate degli indici corretti, soprattutto in… post_id、order_id、product_id L’utilizzo di campi comuni come condizioni di ricerca può migliorare notevolmente l’efficienza delle query correlate.

Scegli un host e un CDN affidabili.

Tutte le ottimizzazioni a livello software si basano su un’infrastruttura solida. I server condivisi di solito non sono in grado di soddisfare le esigenze di negozi WooCommerce di dimensioni medie o superiori. Si consiglia di scegliere un host gestito (Managed Hosting) ottimizzato appositamente per WooCommerce o WordPress; tali soluzioni offrono solitamente cache preconfigurate, un ambiente di esecuzione PHP più veloce (ad esempio PHP-FPM) e supporto per il caching degli oggetti.

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

Una rete di distribuzione dei contenuti (CDN – Content Delivery Network) consente di distribuire i propri file statici (immagini, CSS, JS) su nodi distribuiti in tutto il mondo, permettendo agli utenti di riceverli dal server più vicino geograficamente e riducendo così i tempi di latenza. Questo aspetto è particolarmente importante per le aziende che hanno clienti internazionali. Configurare correttamente il CDN insieme alla certificazione SSL del proprio server principale rappresenta un passo fondamentale per garantire un accesso sicuro e veloce ai contenuti.

Best Practices for the Development of Advanced Plugins

Quando le funzionalità integrate e gli plugin esistenti non sono in grado di soddisfare esigenze aziendali specifiche, diventa necessario sviluppare plugin personalizzati per WooCommerce. Seguire le migliori pratiche non solo garantisce un funzionamento efficiente del plugin, ma anche una buona compatibilità con il nucleo di WooCommerce e con gli altri plugin.

Seguire gli standard di codifica di WordPress.

Lo sviluppo di qualsiasi plugin per WordPress, comprese le estensioni per WooCommerce, deve rispettare rigorosamente gli standard di codifica PHP di WordPress. Ciò garantisce la leggibilità, l’coerenza e la sicurezza del codice. Ad esempio, tutti i nomi di funzioni, hook e classi dovrebbero essere preceduti da prefissi significativi, solitamente abbreviazioni del nome del plugin, al fine di evitare conflitti di denominazione con altri plugin. Per gli plugin per WooCommerce, ciò significa che non è possibile utilizzare direttamente i nomi preesistenti forniti dal framework di base di WordPress. “wc_” Un tale prefisso principale.

Si consiglia di leggere Guida allo sviluppo di plugin per WooCommerce: Creare funzionalità e-commerce personalizzate da zero。

Una funzione chiamata… myplugin_add_custom_price() E' meglio così. add_price() Molto meglio. Inoltre, tutti i dati inseriti dagli utenti devono essere verificati, puliti ed escapati. WooCommerce offre molte funzioni sicure per gestire prezzi, date e informazioni fornite dagli utenti. wc_clean() 和 wc_sanitize_tooltip()。

Utilizzare correttamente gli action hook e i filter hook

Il punto di forza di WooCommerce risiede nel suo sistema di hook estremamente estensibile. Comprendere e utilizzare correttamente gli Action Hooks e i Filter Hooks rappresenta la base dello sviluppo avanzato.

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

Gli “action hooks” servono per inserire il tuo codice in momenti specifici. Ad esempio, puoi utilizzarli per… woocommerce_before_add_to_cart_button È possibile aggiungere contenuto personalizzato prima del pulsante “Aggiungi al carrello” sulla pagina del prodotto.

add_action( 'woocommerce_before_add_to_cart_button', 'myplugin_display_custom_field' );
function myplugin_display_custom_field() {
    echo '<div class="custom-field">Inserisci il testo da incidere.<input type="text" name="engraving_text"></div>';
}

Gli “hook” dei filtri vengono utilizzati per modificare i dati. Ad esempio, per… woocommerce_add_cart_item_data I filtri possono salvare i dati dei campi personalizzati inviati dall’utente nella parte front-end all’interno dell’articolo del carrello della spesa.

add_filter( 'woocommerce_add_cart_item_data', 'myplugin_save_custom_field_to_cart', 10, 2 );
function myplugin_save_custom_field_to_cart( $cart_item_data, $product_id ) {
    if( isset( $_POST['engraving_text'] ) ) {
        $cart_item_data['engraving_text'] = sanitize_text_field( $_POST['engraving_text'] );
        $cart_item_data['unique_key'] = md5( microtime().rand() ); // 确保唯一性
    }
    return $cart_item_data;
}

Creare un interfaccia di gestione configurabile.

Un plugin professionale dovrebbe fornire un’interfaccia di gestione chiara e facile da utilizzare, solitamente posizionata nel menu “Impostazioni” del backend di WordPress o in un menu indipendente di primo livello. L’utilizzo dell’API WordPress Settings rappresenta la pratica migliore per creare tale interfaccia, poiché consente di gestire in modo semplice l’ registrazione dei campi, la validazione dei dati e il loro salvataggio.

Ad esempio, creare una pagina di configurazione per il tuo plugin che permetta ai proprietari di negozio di abilitare/disabilitare alcune funzionalità o impostare parametri predefiniti. Tutte le opzioni di configurazione dovrebbero essere accessibili tramite… add_options_page() 或 add_menu_page() Aggiungere una funzione e utilizzarla. register_setting()、add_settings_section() 和 add_settings_field() Per creare il modulo, è necessario seguire specifiche procedure che garantiscano la coerenza con lo stile grafico del backend di WordPress nonché la sicurezza dei dati inseriti dagli utenti.

Pratica: Sviluppare un plugin per servizi aggiuntivi a un prodotto

Analizziamo un caso pratico per combinare i concetti di ottimizzazione e sviluppo menzionati in precedenza. Supponiamo di dover creare un plugin che permetta ai clienti di scegliere un servizio aggiuntivo di “elaborazione rapida” al momento dell’acquisto di un prodotto specifico, applicando un costo supplementare.

Definire la struttura e i metadati di un plugin

Prima di tutto, wp-content/plugins Creare una nuova cartella nella directory, ad esempio. myplugin-expedited-serviceCrea il file principale del plugin all’interno di quella cartella. myplugin-expedited-service.phpLa parte iniziale del file deve contenere le note di metadati standard relative al plugin.

<?php
/**
 * Plugin Name: MyPlugin 加急服务
 * Plugin URI:  https://www.yourwebsite.com/
 * Description: 为 WooCommerce 产品添加可选的加急处理服务。
 * Version:     1.0.0
 * Author:      你的名字
 * License:     GPL v2 or later
 * Text Domain: myplugin-expedited-service
 */

In seguito, definiamo le principali classi del plugin. MyPlugin_Expedited_ServiceE nel suo metodo di costruzione, avviate gli hook di inizializzazione necessari.

Aggiungere opzioni di servizio alla pagina del prodotto front-end

Dobbiamo aggiungere una casella di controllo vicino al pulsante “Aggiungi al carrello” sulla pagina del prodotto, in modo che gli utenti possano selezionare il servizio di consegna rapida. woocommerce_before_add_to_cart_button Implementazione degli action hooks.

Nel metodo di inizializzazione della classe principale del plugin, aggiungi il seguente codice:

add_action( 'woocommerce_before_add_to_cart_button', array( $this, 'render_expedited_checkbox' ) );

public function render_expedited_checkbox() {
    global $product;
    // 假设我们只对ID为 10, 20, 30 的产品启用此服务
    $eligible_products = array( 10, 20, 30 );
    if ( in_array( $product->get_id(), $eligible_products ) ) {
        ?>
        <div class="expedited-service-field">
            <label for="expedited_service">
                <input type="checkbox" id="expedited_service" name="expedited_service" value="yes" />
                <?php esc_html_e( '加急处理 (+￥50)', 'myplugin-expedited-service' ); ?>
            </label>
        </div>
        &lt;?php
    }
}

Allo stesso tempo, dobbiamo salvare questa selezione nei dati dell’articolo nel carrello della spesa e ricalcolare il prezzo. Per farlo, è necessario utilizzare quanto menzionato in precedenza. woocommerce_add_cart_item_data Filtro.

Gestire le spese aggiuntive nel carrello della spesa e nell’ordine

Dopo aver salvato l’informazione nel carrello della spesa, dobbiamo visualizzare questa opzione sia nel carrello stesso che sulla pagina di pagamento, e calcolarne il costo nell’importo totale. Questo richiede l’utilizzo di diversi meccanismi di integrazione (hook).
1. woocommerce_get_item_dataMostrare i dati personalizzati nella tabella del carrello della spesa.
2. woocommerce_before_calculate_totalsPrima di calcolare il totale del carrello della spesa, aggiungere un costo ai prodotti presenti nel carrello che soddisfano determinati requisiti.

// 在购物车中显示选项
add_filter( 'woocommerce_get_item_data', array( $this, 'display_expedited_info_in_cart' ), 10, 2 );
public function display_expedited_info_in_cart( $item_data, $cart_item ) {
    if ( isset( $cart_item['expedited_service'] ) && $cart_item['expedited_service'] === 'yes' ) {
        $item_data[] = array(
            'name'  => __( '加急处理', 'myplugin-expedited-service' ),
            'value' => __( '是', 'myplugin-expedited-service' )
        );
    }
    return $item_data;
}

// 增加费用
add_action( 'woocommerce_before_calculate_totals', array( $this, 'add_expedited_fee_to_cart' ), 20, 1 );
public function add_expedited_fee_to_cart( $cart ) {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
        return;
    }
    foreach ( $cart->get_cart() as $cart_item_key => $cart_item ) {
        if ( isset( $cart_item['expedited_service'] ) && $cart_item['expedited_service'] === 'yes' ) {
            // 增加50元费用
            $cart_item['data']->set_price( $cart_item['data']->get_price() + 50 );
        }
    }
}

Infine, dobbiamo salvare le informazioni su questo servizio aggiuntivo nei metadati dell’ordine, in modo da poterle visualizzare nelle dettagli dell’ordine, nelle email e nella gestione interna. Per farlo, sarà necessario utilizzare… woocommerce_checkout_create_order_line_item Action Hook.

Riassumendo

Ottimizzare le prestazioni di un sito web basato su WooCommerce e sviluppare plugin avanzati rappresentano due pilastri tecnici fondamentali per aumentare la competitività di un negozio elettronico. L’ottimizzazione delle prestazioni garantisce un’esperienza di navigazione fluida per gli utenti, è essenziale per trattenere i clienti e promuovere le conversioni, e comprende aspetti chiave come la cache, l’ottimizzazione delle risorse, la manutenzione del database e la scelta dell’infrastruttura. Lo sviluppo di plugin avanzati, invece, conferisce al sito funzionalità specifiche per il proprio business; il suo nucleo consiste nel rispettare gli standard di codifica di WordPress, nell’essere esperti nel sistema di hook (meccanismi di interazione tra moduli del software) e nella creazione di interfacce di back-end professionali.

Sviluppando un plugin per il “servizio di emergenza” attraverso la pratica, abbiamo visto come applicare la teoria alla realtà: dalla interazione con l’utente all’invio dei dati, fino al calcolo dei costi e alla gestione degli ordini, ogni passaggio richiede codice rigoroso e logica chiara. Integrando una consapevolezza della performance in tutto il processo di sviluppo (ad esempio evitando query ridondanti e utilizzando il caching per i risultati calcolati), è possibile creare estensioni per WooCommerce che siano sia potenti che reattive.

FAQ - Domande frequenti

###: Come posso capire se il mio sito web WooCommerce ha bisogno di ottimizzazioni di prestazioni?
È possibile verificare la velocità del proprio sito web utilizzando strumenti online come Google PageSpeed Insights, GTmetrix o Pingdom. Se il punteggio di prestazioni per la versione mobile o desktop è inferiore a 80, il tempo di caricamento della prima pagina supera i 3 secondi, o il rapporto degli strumenti evidenzia un’eccessiva quantità di risorse che bloccano il rendering del sito, immagini non compresse, o altri problemi simili, allora il sito necessita urgentemente di ottimizzazioni. La sezione “Ordinato per numero di query” presente nel rapporto di stato di WooCommerce può anche rivelare l’esistenza di query di dati inefficaci.

È necessario disporre di un alto livello di conoscenza di PHP per sviluppare plugin per WooCommerce?

Sì, è necessaria una solida base di programmazione in PHP, in particolare conoscenze di programmazione orientata agli oggetti (OOP). Dovrai comprendere i concetti fondamentali di WordPress (come gli “hook”, i cicli, le query), interagire in modo sicuro con i database e essere in grado di debuggare logiche complesse. Ancora più importante, è necessario conoscere a fondo l’architettura di WooCommerce, il suo modello di dati (prodotti, ordini, clienti) nonché il suo vasto sistema di hook. Iniziare praticando modifiche a funzionalità esistenti è un ottimo modo per imparare.

Come possono i plugin personalizzati per WooCommerce essere compatibili con i plugin di cache?

La chiave sta nel gestire correttamente i contenuti dinamici. Il vostro plugin potrebbe generare informazioni che dipendono dalla sessione dell’utente o da dati in tempo reale (ad esempio, prezzi personalizzati, disponibilità degli articoli). È necessario utilizzare i meccanismi offerti da WooCommerce e dai plugin di cache per indicare tali contenuti come “non cachabili”. Ad esempio, è possibile utilizzare il caching dei frammenti (Fragment Caching) o effettuare richieste AJAX per caricare tali informazioni in modo specifico. Assicuratevi che pagine come il carrello, il processo di pagamento e la sezione “Il mio account” non vengano mai cache.

Puoi spiegarmi in modo semplice la differenza principale tra gli “action hooks” e i “filter hooks”?

Gli “Action Hook” funzionano come dei punti di interazione (event points) che ti permettono di “eseguire” un frammento di codice in un momento specifico. Non modificano direttamente i dati esistenti, ma aggiungono azioni aggiuntive, ad esempio l’inserimento di un’icona dopo il titolo di un prodotto. Il codice utilizzato per questo scopo… add_action() Montaggio.

I “filter hook” funzionano come un canale di elaborazione dei dati, che ti permette di modificare i dati inviati. Devi ricevere un valore in ingresso, elaborarlo e poi restituirlo. Ad esempio, modificare il prezzo di un prodotto o aggiustare i risultati di una ricerca. Il codice utilizzato per questo scopo… add_filter() “Montaggio” (in inglese: “mounting”). In breve, un’azione consiste nel compiere qualcosa, mentre un filtro serve a modificare qualcos’altro.