Optymalizacja wydajności: Lazy-Load Slideout dla dużych hierarchii kategorii

Kiedy masz kategorię nadrzędną z:

Duża liczba produktów (500-1000+)
Głęboka hierarchia kategorii (wiele poziomów podkategorii)
Dynamiczne przeliczanie włączone

Filtr produktów może generować setki zapytań SQL przy każdym ładowaniu strony, nawet jeśli użytkownik nigdy nie korzysta z filtra. Powoduje to:

Powolne ładowanie strony (10+ sekund)
błędy 504 Gateway Timeout
Duże obciążenie serwera
Słabe doświadczenie użytkownika

Dlaczego tak się dzieje

Po włączeniu Dynamicznego Przeliczania WOOF powinien:

Rekursywnie przetwarzaj wszystkie podkategorie
Wykonaj zapytania SQL dla każdego terminu, aby policzyć produkty
Oblicz liczbę produktów uwzględniając bieżący kontekst kategorii

Przykład: Kategoria „Okulary przeciwsłoneczne” z podkategoriami (Mężczyźni → Kobiety → Kształty → Marki) generuje ogromne obciążenie zapytań.

Tradycyjne rozwiązania (niewystarczające)

❌ Ukrywanie rozwijanego menu za pomocą reguł CSS/display – Filtr nadal przetwarza na serwerze
❌ Wyłączanie dynamicznego ponownego zliczania – Traci ważną funkcjonalność
❌ Usuwanie opcji filtra – Użytkownicy nie mogą prawidłowo filtrować
❌ Indeksy bazy danych – Drobna poprawka, nie rozwiązuje pierwotnej przyczyny

Optymalne rozwiązanie: Lazy-Load Slideout

Kluczowa koncepcja: Załaduj filtr TYLKO wtedy, gdy użytkownik faktycznie otworzy wysuwany panel.

✅ Strona ładuje się natychmiast (bez przetwarzania filtra)
✅ Filtr działa idealnie, gdy jest potrzebny
✅ Brak zmarnowanych zasobów serwera
✅ Idealny dla botów i zwykłych przeglądających
✅ Zachowuje wszystkie funkcje filtra

Implementacja

Dodaj następujący kod do swojego motywu’s 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);

Kroki konfiguracji

Wyłącz swój bieżący wysuwany panel w ustawieniach WOOF, jeśli jest włączone
Dodaj powyższy kod do functions.php Twojego aktywnego motywu
Pozostaw te ustawienia WOOF włączone:
- Przeliczanie dynamiczne pamięci podręcznej: Tak
- Cache terminów: Tak
- Ukryj puste terminy: Tak
- Dynamiczne przeliczanie: Tak
Opcjonalna personalizacja:
- Dostosuj szerokość wysuwanego paska: zmień width: 350px i right: -350px
- Zmień pozycję przycisku: zmodyfikuj top: 50%
- Dostosuj kolory: aktualizuj background i color wartości
- Ustaw tak, aby działało w całej witrynie: usuń if (!is_product_category()) warunek

Jak to działa

Wyświetlenia stron: Renderowany jest tylko przycisk wyzwalający (brak przetwarzania filtra)
Użytkownik klika przycisk: Slideout się otwiera, pojawia się nakładka
Najpierw otwórz tylko: JavaScript automatycznie klika ukryty przycisk „Start Filtering”
Ładowanie filtra: WOOF przetwarza wszystkie zapytania i wyświetla opcje filtru
Kolejne otwarcia: Filtr jest już załadowany, otwiera się natychmiast

Rezultaty z rzeczywistego świata

Przed:

Ładowanie strony: 10-15 sekund (lub timeout 504)
Ponad 500 zapytań SQL na wyświetlenie strony
Wysoki wskaźnik odrzuceń

Po:

Ładowanie strony: < 2 sekundy
Filtr ładuje się w ~3 sekundy (tylko na żądanie)
~50% redukcji obciążenia serwera (wielu użytkowników nigdy nie otwiera filtra)

Kompatybilność

✅ Działa ze wszystkimi wersjami WOOF
✅ Kompatybilny z buforowaniem stron (WP Rocket, LiteSpeed itp.)
✅ Przyjazny dla urządzeń mobilnych
✅ Działa z każdym motywem WordPress

Zaawansowana personalizacja

Dopasuj styl swojego motywu:

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

Wysuwany panel boczny:

Zmień te wartości:

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

Kiedy użyć tego rozwiązania

Użyj lazy-load slideout, gdy:

Kategoria ma głęboką hierarchię (3+ poziomy)
ponad 500 produktów w kategorii
Wymagane jest dynamiczne przeliczanie
Czas ładowania strony > 5 sekund
Występują błędy 504 (timeout)

Alternatywa dla Filtra Paska Bocznego

Jeśli wolisz sidebar zamiast slideout, użyj:

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

Tworzy to przycisk "Rozpocznij filtrowanie" na Twoim pasku bocznym, który ładuje filtr po kliknięciu.

To rozwiązanie zapewnia najlepszą równowagę między wydajność i funkcjonalność, zapewniając szybkie ładowanie stron przy jednoczesnym zachowaniu pełnych możliwości filtrowania dla użytkowników, którzy ich potrzebują.

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