Прискорення фільтрів категорій WooCommerce: Lazy-Load Slideout

Якщо у вас є батьківська категорія з:

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

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

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

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

Якщо динамічний перерахунок увімкнено, WOOF має:

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

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

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

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

Оптимальне рішення: відкладене завантаження 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:
- Кешувати динамічний перерахунок: так
- Терміни кешу: так
- Приховати порожні умови: Так
- Динамічний перерахунок: Так
Додаткове налаштування:
- Налаштування висувної ширини: змінитиwidth: 350pxіright: -350px
- Змінити положення кнопки: змінитиtop: 50%
- Налаштувати кольори: оновитиbackgroundіcolorзначення
- Зробіть так, щоб це працювало на всьому сайті: видалітьif (!is_product_category())хвороба

Як це працює

Сторінка завантажується:Рендериться лише кнопка тригера (без обробки фільтром)
Користувач натискає кнопку:Slideout відкривається, з’являється накладання
Лише перший відкритий:JavaScript автоматично натискає приховану кнопку «Почати фільтрацію».
Навантаження фільтрів:WOOF обробляє всі запити та відображає параметри фільтра
Наступні відкриття:Фільтр вже завантажений, відкривається миттєво

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

Раніше:

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

після:

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

Сумісність

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

Advanced Налаштування

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

/* 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

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

Використовуйте відкладене завантаження, коли:

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

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

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

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

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

This solution provides the best balance between performanceіфункціональність, забезпечуючи швидке завантаження сторінок, зберігаючи повні можливості фільтрації для користувачів, яким вони потрібні.

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