Leistungsoptimierung: Lazy-Load-Slideout für große Kategoriehierarchien

Wenn Sie eine übergeordnete Kategorie haben mit:

Große Anzahl von Produkten (500-1000+)
Tiefe Kategoriehierarchie (mehrere Ebenen von Unterkategorien)
Dynamische Neuberechnung aktiviert

Produktfilter kann generieren Hunderte von SQL-Abfragen bei jedem Seitenaufruf, auch wenn der Benutzer den Filter nie verwendet. Dies verursacht:

Langsame Seitenladung (10+ Sekunden)
504 Gateway Timeout Fehler
Hohe Serverlast
Schlechte Benutzererfahrung

Warum das passiert

Mit aktiviertem dynamischem Neuberechnung muss WOOF:

Alle Unterkategorien rekursiv verarbeiten
Führen Sie SQL-Abfragen für jeden Begriff aus, um Produkte zu zählen
Zählung unter Berücksichtigung des aktuellen Kategoriekontexts berechnen

Beispiel: Eine Kategorie „Sonnenbrillen“ mit Unterkategorien (Herren → Damen → Formen → Marken) erzeugt eine massive Abfragelast.

Traditionelle Lösungen (nicht ausreichend)

❌ Ausklappbares Menü mit CSS/Display-Regeln ausblenden – Filter wird weiterhin auf dem Server verarbeitet
❌ Deaktivieren der dynamischen Neuberechnung – Verliert wichtige Funktionalität
❌ Filteroptionen entfernen – Benutzer können nicht richtig filtern
❌ Datenbankindizes – Kleinere Verbesserung, löst nicht die Ursache

Die optimale Lösung: Lazy-Load Slideout

Schlüsselkonzept: Laden Sie den Filter NUR, wenn der Benutzer den Slideout tatsächlich öffnet.

✅ Seite wird sofort geladen (keine Filterverarbeitung)
✅ Filter funktioniert einwandfrei, wenn er benötigt wird
✅ Keine verschwendeten Serverressourcen
✅ Perfekt für Bots und Gelegenheitsbesucher
✅ Behält die gesamte Filterfunktionalität bei

Implementierung

Fügen Sie den folgenden Code zu Ihrem Theme hinzu 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);

Einrichtungsschritte

Deaktivieren Sie Ihr aktuelles Slideout in den WOOF-Einstellungen, wenn aktiviert
Fügen Sie den obigen Code hinzu zu functions.php Ihres aktiven Themes
Halten Sie diese WOOF-Einstellungen aktiviert:
- Dynamische Neuberechnung des Caches: Ja
- Begriffe zwischenspeichern: Ja
- Leere Begriffe ausblenden: Ja
- Dynamische Neuberechnung: Ja
Optionale Anpassung:
- Slideout-Breite anpassen: ändern Sie width: 350px und right: -350px
- Button-Position ändern: modifizieren top: 50%
- Farben anpassen: aktualisieren background und color Werte
- Machen Sie es seitenweit verfügbar: entfernen Sie die if (!is_product_category()) Bedingung

Funktionsweise

Seitenaufrufe: Nur die Trigger-Schaltfläche wird gerendert (keine Filterverarbeitung)
Benutzer klickt auf Button: Ausklappbares Menü öffnet sich, Overlay erscheint
Nur zuerst öffnen: JavaScript klickt automatisch auf den ausgeblendeten „Start Filtering“-Button
Filter lädt: WOOF verarbeitet alle Abfragen und zeigt Filteroptionen an
Nachfolgende Öffnungen: Filter ist bereits geladen, öffnet sich sofort

Ergebnisse aus der Praxis

Vorher:

Seitenladezeit: 10-15 Sekunden (oder 504 Timeout)
500+ SQL-Abfragen pro Seitenaufruf
Hohe Absprungrate

Nach:

Seitenladezeit: < 2 Sekunden
Filter lädt in ~3 Sekunden (nur bei Bedarf)
~50% Reduzierung der Serverlast (viele Benutzer öffnen den Filter nie)

Kompatibilität

✅ Funktioniert mit allen WOOF-Versionen
✅ Kompatibel mit Page Caching (WP Rocket, LiteSpeed, etc.)
✅ Mobilfreundlich
✅ Funktioniert mit jedem WordPress-Theme

Erweiterte Anpassung

Passen Sie sich dem Styling Ihres Themes an:

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

Linksseitiges Ausklappmenü:

Ändern Sie diese Werte:

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

Wann diese Lösung verwenden

Lazy-Load-Slideout verwenden, wenn:

Kategorie hat tiefe Hierarchie (3+ Ebenen)
500+ Produkte in der Kategorie
Dynamic Recount ist erforderlich
Seitenladezeit > 5 Sekunden
504-Timeouts erleben

Alternative für Sidebar-Filter

Wenn Sie eine Seitenleiste anstelle eines Slideouts bevorzugen, verwenden Sie:

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

Dies erstellt eine Schaltfläche „Filter starten“ in Ihrer Seitenleiste, die den Filter beim Klicken lädt.

Diese Lösung bietet die beste Balance zwischen Leistung und Funktionalität, um schnelle Seitenladezeiten zu gewährleisten und gleichzeitig die volle Filterfunktionalität für Benutzer beizubehalten, die sie benötigen.

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