Optimisation des performances : Lazy-Load pour les grandes hiérarchies de catégories

Quand vous avez une catégorie parente avec :

Grand nombre de produits (500-1000+)
Hiérarchie profonde des catégories (niveaux multiples de sous-catégories)
Recomptage dynamique activé

Le filtre de produits peut générer des centaines de requêtes SQL à chaque chargement de page, même si l'utilisateur n'utilise jamais le filtre. Cela cause :

Chargement lent de la page (10+ secondes)
erreurs 504 Gateway Timeout
Charge serveur élevée
Mauvaise expérience utilisateur

Pourquoi cela se produit

Avec le décompte dynamique activé, WOOF doit :

Traiter récursivement toutes les catégories enfants
Exécute des requêtes SQL pour chaque terme afin de compter les produits
Calculer les comptes en tenant compte du contexte de la catégorie actuelle

Exemple : Une catégorie "Lunettes de soleil" avec des sous-catégories (Hommes → Femmes → Formes → Marques) génère une charge de requête massive.

Solutions traditionnelles (insuffisantes)

❌ Masquer le volet coulissant avec des règles CSS/display – le filtre continue de s'exécuter sur le serveur
❌ Désactivation du décompte dynamique – Perd des fonctionnalités importantes
❌ Suppression des options de filtre – Les utilisateurs ne peuvent pas filtrer correctement
❌ Index de base de données – Amélioration mineure, ne résout pas la cause profonde

La solution optimale : Slideout en chargement différé

Concept clé : Charger le filtre UNIQUEMENT lorsque l'utilisateur ouvre réellement le tiroir.

✅ La page se charge instantanément (aucun traitement de filtre)
✅ Le filtre fonctionne parfaitement quand nécessaire
✅ Pas de ressources serveur gaspillées
✅ Parfait pour les bots et les navigateurs occasionnels
✅ Conserve toutes les fonctionnalités du filtre intactes

Mise en œuvre

Ajoutez le code suivant au fichier de votre thème 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);

Étapes de configuration

Désactiver votre glissière actuelle dans les paramètres WOOF si c'est activé
Ajoutez le code ci-dessus à functions.php de votre thème actif
Gardez ces paramètres WOOF activés :
- Cache du recompte dynamique : Oui
- Mettre en cache les termes : Oui
- Masquer les termes vides : Oui
- Recompte dynamique : Oui
Personnalisation optionnelle :
- Ajuster la largeur du slideout : changer width: 350px et right: -350px
- Changer la position du bouton : modifier top: 50%
- Personnaliser les couleurs : mettre à jour background et color valeurs
- Faites-le fonctionner sur tout le site : supprimez le if (!is_product_category()) condition

Comment ça marche

Chargements de page : Seul le bouton de déclenchement est rendu (aucun traitement de filtre)
L'utilisateur clique sur le bouton : Le volet coulissant s'ouvre, l'overlay apparaît
Ouvrir en premier uniquement : JavaScript clique automatiquement sur le bouton caché "Démarrer le filtrage"
Le filtre se charge : WOOF traite toutes les requêtes et affiche les options de filtre
Ouvertures suivantes : Le filtre est déjà chargé, s'ouvre instantanément

Résultats réels

Avant :

Chargement de la page : 10-15 secondes (ou délai d'attente 504)
500+ requêtes SQL par vue de page
Taux de rebond élevé

Après :

Chargement de page : < 2 secondes
Le filtre se charge en ~3 secondes (uniquement sur demande)
~50% de réduction de la charge serveur (beaucoup d'utilisateurs n'ouvrent jamais le filtre)

Compatibilité

✅ Fonctionne avec toutes les versions de WOOF
✅ Compatible avec la mise en cache des pages (WP Rocket, LiteSpeed, etc.)
✅ Adapté aux mobiles
✅ Fonctionne avec n'importe quel thème WordPress

Personnalisation avancée

Faites correspondre le style de votre thème :

/* 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);
}

Glissière latérale gauche :

Modifiez ces valeurs :

right: -350px  →  left: -350px
right: 0       →  left: 0
right: -350px  →  left: -350px

Quand utiliser cette solution

Utiliser le lazy-load coulissant lorsque :

La catégorie a une hiérarchie profonde (3 niveaux et plus)
500+ produits dans la catégorie
Le décompte dynamique est requis
Temps de chargement de la page > 5 secondes
Rencontre des timeouts 504

Alternative pour le filtre de la barre latérale

Si vous préférez une barre latérale au lieu d'un tiroir, utilisez :

echo do_shortcode('[woof autohide=1 start_filtering_btn=1]');

Cela crée un bouton “Démarrer le filtrage” dans votre barre latérale qui charge le filtre au clic.

Cette solution offre le meilleur équilibre entre performance et fonctionnalité, garantissant des chargements de page rapides tout en maintenant des capacités de filtrage complètes pour les utilisateurs qui en ont besoin.

Ref: https://pluginus.net/support/topic/performance-issue-504-timeouts-on-parent-category-with-deep-hierarchy-flatsome-theme/