Accelerare i grandi filtri di categoria WooCommerce: Lazy-Load Slideout
Quando hai una categoria padre con:
- Grande numero di prodotti (500-1000+)
- Gerarchia di categorie profonda (più livelli di sottocategorie)
- Dynamic Recount abilitato
Il filtro prodotti potrebbe generare centinaia di query SQL a ogni caricamento di pagina, anche se l'utente non usa mai il filtro. Questo causa:
- Caricamento pagina lento (10+ secondi)
- Errori 504 Gateway Timeout
- Carico elevato del server
- Pessima esperienza utente
Perché Succede
Con Dynamic Recount abilitato, WOOF deve:
- Elaborare ricorsivamente tutte le sottocategorie
- Eseguire query SQL per ogni termine per contare i prodotti
- Calcolare i conteggi considerando il contesto della categoria corrente
Esempio: Una categoria “Sunglasses” con sottocategorie (Uomo → Donna → Forme → Marche) genera un carico di query enorme.
Soluzioni Tradizionali (Non Abbastanza)
❌ Nascondere lo slideout con regole CSS/display – Il filtro elabora comunque sul server
❌ Disabilitare Dynamic Recount – Perde funzionalità importanti
❌ Rimuovere opzioni filtro – Gli utenti non possono filtrare correttamente
❌ Indici del database – Miglioramento minore, non risolve la causa principale
La Soluzione Ottimale: Slideout a Caricamento Ritardato
Concetto Chiave: Caricare il filtro SOLO quando l'utente apre effettivamente lo slideout.
✅ La pagina si carica istantaneamente (nessuna elaborazione del filtro)
✅ Il filtro funziona perfettamente quando serve
✅ Nessuno spreco di risorse del server
✅ Perfetto per bot e navigatori occasionali
✅ Mantiene intatta tutta la funzionalità del filtro
Implementazione
Aggiungi il seguente codice al functions.php del tuo tema:
/**
* WOOF Lazy-Load Slideout Filter
* Loads filter only when user clicks to open slideout
* Solves performance issues with deep category hierarchies
*/
add_action('wp_footer', function () {
// Only on product category pages (optional - remove condition to show everywhere)
if (!is_product_category()) {
//return;
}
?>
<!-- Slideout Trigger Button -->
<div id="woof-slideout-trigger" style="position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9999; cursor: pointer; background: #333; color: #fff; padding: 15px 10px; border-radius: 5px 0 0 5px; font-weight: bold; writing-mode: vertical-rl; text-orientation: mixed;">
FILTERS
</div>
<!-- Slideout Panel -->
<div id="woof-slideout-panel" style="position: fixed; right: -350px; top: 0; width: 350px; height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,0.3); z-index: 9998; transition: right 0.3s ease; overflow-y: auto; padding: 20px;">
<!-- Close Button -->
<div style="text-align: right; margin-bottom: 15px;">
<span id="woof-slideout-close" style="cursor: pointer; font-size: 24px; font-weight: bold;">✖</span>
</div>
<!-- WOOF Filter with autohide - loads only on first click -->
<?php echo do_shortcode('[woof autohide=0 start_filtering_btn=1]'); ?>
</div>
<!-- Background Overlay -->
<div id="woof-slideout-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9997; display: none;"></div>
<script>
jQuery(document).ready(function ($) {
var $trigger = $('#woof-slideout-trigger');
var $panel = $('#woof-slideout-panel');
var $overlay = $('#woof-slideout-overlay');
var $close = $('#woof-slideout-close');
var filterLoaded = false;
// Open slideout
$trigger.on('click', function () {
$panel.css('right', '0');
$overlay.fadeIn(300);
// Auto-trigger WOOF "Start Filtering" button on first open
if (!filterLoaded) {
setTimeout(function () {
var $woofBtn = $('.woof_start_filtering_btn');
if ($woofBtn.length) {
$woofBtn.trigger('click');
// Hide the button after triggering
$woofBtn.hide();
filterLoaded = true;
}
}, 500);
}
});
// Close slideout
function closeSlideout() {
$panel.css('right', '-350px');
$overlay.fadeOut(300);
}
$close.on('click', closeSlideout);
$overlay.on('click', closeSlideout);
});
</script>
<?php
}, 999);Passaggi di Configurazione
- Disabilita il tuo slideout attuale nelle impostazioni WOOF se è abilitato
- Aggiungi il codice sopra a
functions.phpdel tuo tema attivo - Mantieni abilitate queste impostazioni WOOF:
- Cache dynamic recount: Sì
- Cache terms: Sì
- Hide empty terms: Sì
- Dynamic Recount: Sì
- Personalizzazione opzionale:
- Regola larghezza slideout: modifica
width: 350pxeright: -350px - Cambia posizione pulsante: modifica
top: 50% - Personalizza colori: aggiorna i valori
backgroundecolor - Fallo funzionare su tutto il sito: rimuovi la condizione
if (!is_product_category())
- Regola larghezza slideout: modifica
Come Funziona
- Caricamento pagina: Viene renderizzato solo il pulsante di attivazione (nessuna elaborazione filtro)
- L'utente clicca il pulsante: Lo slideout si apre, appare l'overlay
- Solo al primo apertura: JavaScript clicca automaticamente il pulsante nascosto “Avvia Filtro”
- Caricamento filtro: WOOF elabora tutte le query e mostra le opzioni filtro
- Aperture successive: Il filtro è già caricato, si apre istantaneamente
Risultati Reali
Prima:
- Caricamento pagina: 10-15 secondi (o timeout 504)
- 500+ query SQL per visualizzazione pagina
- Alto tasso di rimbalzo
Dopo:
- Caricamento pagina: < 2 secondi
- Il filtro si carica in ~3 secondi (solo quando richiesto)
- ~50% di riduzione del carico del server (molti utenti non aprono mai il filtro)
Compatibilità
✅ Funziona con tutte le versioni di WOOF
✅ Compatibile con la cache di pagina (WP Rocket, LiteSpeed, ecc.)
✅ Ottimizzato per dispositivi mobili
✅ Funziona con qualsiasi tema WordPress
Personalizzazione Avanzata
Abbina lo stile del tuo tema:
/* Add to your theme's CSS */
#woof-slideout-trigger {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Your Theme Font', sans-serif;
letter-spacing: 2px;
}
#woof-slideout-panel {
background: #f8f9fa;
font-family: 'Your Theme Font', sans-serif;
}
#woof-slideout-trigger:hover {
transform: translateY(-50%) scale(1.05);
}Slideout sul lato sinistro:
Modifica questi valori:
right: -350px → left: -350px
right: 0 → left: 0
right: -350px → left: -350pxQuando Usare Questa Soluzione
Usa lo slideout a caricamento ritardato quando:
- La categoria ha una gerarchia profonda (3+ livelli)
- 500+ prodotti nella categoria
- Dynamic Recount è richiesto
- Tempo di caricamento pagina > 5 secondi
- Si verificano timeout 504
Alternativa per Filtro Sidebar
Se preferisci la barra laterale invece dello slideout, usa:
echo do_shortcode('[woof autohide=1 start_filtering_btn=1]');Questo crea un pulsante “Avvia Filtro” nella tua barra laterale che carica il filtro al clic.
Questa soluzione offre il miglior equilibrio tra prestazioni e funzionalità, garantendo caricamenti rapidi delle pagine mantenendo al contempo tutte le capacità di filtraggio per gli utenti che ne hanno bisogno.