Ottimizzazione delle prestazioni: Lazy-Load Slideout per gerarchie di categorie estese
Quando hai una categoria genitore con:
- Gran numero di prodotti (500-1000+)
- Gerarchia di categorie profonda (livelli multipli di sottocategorie)
- Riconto dinamico abilitato
Il filtro prodotti potrebbe generare centinaia di query SQL ad ogni caricamento della pagina, anche se l'utente non utilizza mai il filtro. Questo causa:
- Caricamento lento della pagina (10+ secondi)
- Errori 504 Gateway Timeout
- Elevato carico del server
- Scarsa esperienza utente
Perché succede questo
Con il conteggio dinamico abilitato, WOOF deve:
- Elabora ricorsivamente tutte le categorie figlie
- Esegui query SQL per ogni termine per contare i prodotti
- Calcola i conteggi considerando il contesto della categoria corrente
Esempio: Una categoria "Occhiali da sole" con sottocategorie (Uomo → Donna → Forme → Marche) genera un carico di query massiccio.
Soluzioni tradizionali (non sufficienti)
❌ Nascondere lo slideout con regole CSS/display – Il filtro elabora ancora sul server
❌ Disabilitazione del ricalcolo dinamico – Perde funzionalità importanti
❌ Rimozione delle opzioni di filtro – Gli utenti non possono filtrare correttamente
❌ Indici del database – Miglioramento minore, non risolve la causa principale
La Soluzione Ottimale: Lazy-Load Slideout
Concetto Chiave: Carica il filtro SOLO quando l'utente apre effettivamente lo slideout.
✅ Il caricamento della pagina è istantaneo (nessuna elaborazione del filtro)
✅ Il filtro funziona perfettamente quando necessario
✅ Nessuna risorsa server sprecata
✅ Perfetto per i bot e i navigatori occasionali
✅ Mantiene intatta tutta la funzionalità del filtro
Implementazione
Aggiungi il seguente codice al tuo tema functions.php:
/**
* 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 di WOOF se abilitato
- Aggiungi il codice sopra a
functions.phpdel tuo tema attivo - Mantieni abilitate queste impostazioni WOOF:
- Cache conteggio dinamico: Sì
- Cache termini: Sì
- Nascondi termini vuoti: Sì
- Ricalcolo dinamico: Sì
- Personalizzazione opzionale:
- Regola l'ampiezza dello slideout: cambia
width: 350pxeright: -350px - Cambia posizione pulsante: modifica
top: 50% - Personalizza i colori: aggiorna
backgroundecolorvalori - Rendilo funzionante su tutto il sito: rimuovi il
if (!is_product_category())condizione
- Regola l'ampiezza dello slideout: cambia
Come Funziona
- Caricamenti pagina: Viene visualizzato solo il pulsante di attivazione (nessuna elaborazione del filtro)
- L'utente clicca sul pulsante: Lo slideout si apre, appare l'overlay
- Prima apertura solo: JavaScript fa clic automaticamente sul pulsante nascosto "Start Filtering"
- Caricamento filtro: WOOF elabora tutte le query e visualizza le opzioni del filtro
- Aperture successive: Il filtro è già caricato, si apre istantaneamente
Risultati nel mondo reale
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 delle pagine (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 laterale sinistro:
Modifica questi valori:
right: -350px → left: -350px
right: 0 → left: 0
right: -350px → left: -350pxQuando Usare Questa Soluzione
Usa lazy-load slideout quando:
- La categoria ha una gerarchia profonda (3+ livelli)
- 500+ prodotti in categoria
- È richiesto il Ricalcolo Dinamico
- Tempo di caricamento della pagina > 5 secondi
- Tentativi di timeout 504
Alternativa per Filtro Sidebar
Se preferisci la barra laterale invece di quella scorrevole, usa:
echo do_shortcode('[woof autohide=1 start_filtering_btn=1]');Questo crea un pulsante “Inizia il Filtraggio” nella tua barra laterale che carica il filtro al clic.
Questa soluzione offre il miglior equilibrio tra performance e funzionalità, garantendo caricamenti rapidi della pagina pur mantenendo le piene capacità di filtraggio per gli utenti che ne hanno bisogno.