Optimización del Rendimiento: Lazy-Load Slideout para Jerarquías de Categorías Grandes

Cuando tienes una categoría padre con:

• Gran número de productos (500-1000+)
• Jerarquía de categorías profundas (múltiples niveles de subcategorías)
• Dynamic Recount enabled

El filtro de productos podría generar cientos de consultas SQL en cada carga de página, incluso si el usuario nunca usa el filtro. Esto causa:

• Carga lenta de página (más de 10 segundos)
• Errores 504 Gateway Timeout
• Alta carga del servidor
• Mala experiencia de usuario

Por qué sucede esto

Con el Recuento Dinámico habilitado, WOOF debe:

1. Procesa recursivamente todas las subcategorías
2. Ejecutar consultas SQL para cada término para contar productos
3. Calcular recuentos considerando el contexto de la categoría actual

Ejemplo: Una categoría “Gafas de sol” con subcategorías (Hombres → Mujeres → Formas → Marcas) genera una carga masiva de consultas.

Soluciones Tradicionales (Insuficientes)

❌ Ocultar el slideout con CSS/reglas de visualización – El filtro todavía se procesa en el servidor
❌ Desactivar Recuento Dinámico – Pierde funcionalidad importante
❌ Eliminación de opciones de filtro – Los usuarios no pueden filtrar correctamente
❌ Índices de base de datos – Mejora menor, no resuelve la causa raíz

La Solución Óptima: Slideout Lazy-Load

Concepto clave: Carga el filtro SÓLO cuando el usuario abre realmente el slideout.

✅ La página se carga instantáneamente (sin procesamiento del filtro)
✅ El filtro funciona perfectamente cuando es necesario
✅ No se desperdician recursos del servidor
✅ Perfecto para bots y navegadores casuales
✅ Mantiene intacta toda la funcionalidad del filtro

Implementación

Añade el siguiente código a tu tema’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);

Pasos de configuración

1. Desactiva tu deslizador actual en la configuración de WOOF si está habilitado
2. Agrega el código anterior a functions.php de tu tema activo
3. Mantenga habilitada esta configuración de WOOF:
   • Caché de recuento dinámico: Sí
   • Caché de términos: Sí
   • Ocultar términos vacíos: Sí
   • Recuento Dinámico: Sí
4. Personalización opcional:
   • Ajusta el ancho del slideout: cambia width: 350px y right: -350px
   • Cambiar posición del botón: modificar top: 50%
   • Personalizar colores: actualizar background y color valores
   • Haz que funcione en todo el sitio: elimina el if (!is_product_category()) condición

Cómo Funciona

1. Cargas de página: Solo se renderiza el botón de activación (no hay procesamiento de filtros)
2. El usuario hace clic en el botón: Se abre el Slideout, aparece el overlay
3. Primero abre solo: JavaScript hace clic automáticamente en el botón oculto "Iniciar Filtrado"
4. Carga del filtro: WOOF procesa todas las consultas y muestra las opciones de filtro
5. Aperturas subsiguientes: El filtro ya está cargado, se abre instantáneamente

Resultados del mundo real

Antes:

• Carga de página: 10-15 segundos (o tiempo de espera de 504)
• 500+ consultas SQL por visita a la página
• Alta tasa de rebote

Después:

• Carga de página: < 2 segundos
• El filtro se carga en ~3 segundos (solo cuando se solicita)
• ~50% de reducción en la carga del servidor (muchos usuarios nunca abren el filtro)

Compatibilidad

✅ Funciona con todas las versiones de WOOF
✅ Compatible con caché de página (WP Rocket, LiteSpeed, etc.)
✅ Optimizado para móviles
✅ Funciona con cualquier tema de WordPress

Personalización Avanzada

Coincide con el estilo de tu tema:

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

Deslizante lateral:

Cambia estos valores:

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

Cuándo usar esta solución

Usa el slideout de carga diferida cuando:

• La categoría tiene una jerarquía profunda (3+ niveles)
• más de 500 productos en la categoría
• Recuento dinámico requerido
• Tiempo de carga de página > 5 segundos
• Experimentando tiempos de espera 504

Alternativa para el Filtro de Barra Lateral

Si prefieres una barra lateral en lugar de un deslizamiento, usa:

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

Esto crea un botón "Iniciar Filtrado" en tu barra lateral que carga el filtro al hacer clic.

Esta solución proporciona el mejor equilibrio entre rendimiento y funcionalidad, asegurando cargas rápidas de página mientras se mantienen las capacidades de filtrado completas para los usuarios que las necesitan.

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