Оптимізація продуктивності: Lazy-Load Slideout для великих ієрархій категорій

Коли у вас є батьківська категорія з:

Велика кількість товарів (500-1000+)
Глибока ієрархія категорій (кілька рівнів підкатегорій)
Динамічний перерахунок увімкнено

Фільтр товарів може генерувати сотні SQL запитів при кожному завантаженні сторінки, навіть якщо користувач ніколи не використовує фільтр. Це спричиняє:

Повільне завантаження сторінки (10+ секунд)
помилки 504 Gateway Timeout
Високе навантаження на сервер
Поганий досвід користувача

Чому це відбувається

З увімкненим динамічним перерахунком WOOF повинен:

Рекурсивно обробляти всі дочірні категорії
Виконує SQL-запити для кожного терміна, щоб підрахувати товари
Розрахувати кількість з урахуванням поточного контексту категорії

Приклад: Категорія "Сонцезахисні окуляри" з підкатегоріями (Чоловіки → Жінки → Форми → Бренди) генерує величезне навантаження на запити.

Традиційні рішення (недостатньо)

❌ Приховування висувної панелі за допомогою CSS/правил відображення – фільтр все ще обробляється на сервері
❌ Вимкнення динамічного перерахунку – втрачає важливу функціональність
❌ Видалення опцій фільтра – Користувачі не можуть правильно фільтрувати
❌ Індекси бази даних – Незначне покращення, не вирішує першопричину

Оптимальне рішення: Lazy-Load Slideout

Ключова концепція: Завантажуйте фільтр ЛИШЕ тоді, коли користувач фактично відкриває висувну панель.

✅ Сторінка завантажується миттєво (без обробки фільтра)
✅ Фільтр працює ідеально, коли це необхідно
✅ Не витрачаються ресурси сервера
✅ Ідеально для ботів та випадкових відвідувачів
✅ Зберігає всю функціональність фільтра без змін

Реалізація

Додайте наступний код до вашої теми 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);

Кроки конфігурації

Вимкнути поточний слайдаут у налаштуваннях WOOF, якщо він увімкнений
Додайте наведений вище код до functions.php вашої активної теми
Залиште ці налаштування WOOF увімкненими:
- Кешування динамічного перерахунку: Так
- Cache terms: Yes
- Приховувати порожні терміни: Так
- Динамічний перерахунок: Так
Додаткова кастомізація:
- Налаштуйте ширину спливаючого вікна: змініть width: 350px та right: -350px
- Змінити положення кнопки: змінити top: 50%
- Налаштувати кольори: оновити background та color значення
- Зробити так, щоб це працювало на всьому сайті: видаліть if (!is_product_category()) умова

Як це працює

Завантаження сторінок: Відображається лише кнопка запуску (без обробки фільтра)
Користувач натискає кнопку: Відкривається висувне меню, з'являється накладання
Спочатку відкрийте тільки: JavaScript автоматично натискає приховану кнопку “Start Filtering”
Завантаження фільтра: WOOF обробляє всі запити та відображає опції фільтра
Наступні відкриття: Фільтр вже завантажений, відкривається миттєво

Реальні результати

Раніше:

Завантаження сторінки: 10-15 секунд (або тайм-аут 504)
500+ SQL запитів за перегляд сторінки
Високий показник відмов

Після:

Завантаження сторінки: < 2 секунди
Фільтр завантажується приблизно за 3 секунди (тільки за запитом)
~50% зменшення навантаження на сервер (багато користувачів ніколи не відкривають фільтр)

Сумісність

✅ Працює з усіма версіями WOOF
✅ Сумісність із кешуванням сторінок (WP Rocket, LiteSpeed тощо)
✅ Мобільний
✅ Працює з будь-якою темою WordPress

Розширені налаштування

Відповідайте стилю вашої теми:

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

Висувна панель зліва:

Змініть ці значення:

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

Коли використовувати це рішення

Використовувати lazy-load slideout, коли:

Категорія має глибоку ієрархію (3+ рівнів)
500+ товарів у категорії
Потрібен динамічний перерахунок
Час завантаження сторінки > 5 секунд
Виникають часові обмеження 504

Альтернатива для фільтра бічної панелі

Якщо ви віддаєте перевагу бічній панелі замість висувної, використовуйте:

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

Це створює кнопку "Почати фільтрацію" у вашому бічному меню, яка завантажує фільтр за кліком.

Це рішення забезпечує найкращий баланс між продуктивність та функціональність, забезпечуючи швидке завантаження сторінок, зберігаючи при цьому повні можливості фільтрації для користувачів, які їх потребують.

Посилання: https://pluginus.net/support/topic/performance-issue-504-timeouts-on-parent-category-with-deep-hierarchy-flatsome-theme/