Otimização de Desempenho: Lazy-Load Slideout para Grandes Hierarquias de Categorias

Quando você tem uma categoria pai com:

• Grande número de produtos (500-1000+)
• Hierarquia profunda de categorias (múltiplos níveis de subcategorias)
• Recálculo Dinâmico ativado

O filtro de produtos pode gerar centenas de consultas SQL a cada carregamento de página, mesmo que o usuário nunca use o filtro. Isso causa:

• Carregamento lento da página (10+ segundos)
• Erros 504 Gateway Timeout
• Alta carga no servidor
• Experiência do usuário ruim

Por que isso acontece

Com o Recount Dinâmico ativado, o WOOF deve:

1. Processar recursivamente todas as categorias filhas
2. Executar consultas SQL para cada termo para contar produtos
3. Calcular contagens considerando o contexto da categoria atual

Exemplo: Uma categoria “Óculos de Sol” com subcategorias (Homem → Mulher → Formatos → Marcas) gera uma carga de consulta massiva.

Soluções Tradicionais (Insuficientes)

❌ Ocultando slideout com regras CSS/display – O filtro ainda é processado no servidor
❌ Desativando a Recontagem Dinâmica – Perde funcionalidade importante
❌ Removendo opções de filtro – Os usuários não conseguem filtrar corretamente
❌ Índices de banco de dados – Melhoria menor, não resolve a causa raiz

A Solução Ótima: Slideout Lazy-Load

Conceito Chave: Carregue o filtro SOMENTE quando o usuário realmente abrir o slideout.

✅ Página carrega instantaneamente (sem processamento de filtro)
✅ Filtro funciona perfeitamente quando necessário
✅ Sem desperdício de recursos do servidor
✅ Perfeito para bots e navegadores casuais
✅ Mantém toda a funcionalidade do filtro intacta

Implementação

Adicione o seguinte código ao seu tema 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);

Etapas de configuração

1. Desabilite seu slideout atual nas configurações do WOOF se estiver ativado
2. Adicione o código acima para functions.php do seu tema ativo
3. Mantenha estas configurações do WOOF ativadas:
   • Cache de contagem dinâmica: Sim
   • Cache de termos: Sim
   • Ocultar termos vazios: Sim
   • Recalculo Dinâmico: Sim
4. Personalização opcional:
   • Ajuste a largura do slideout: mude width: 350px e right: -350px
   • Mudar posição do botão: modificar top: 50%
   • Personalizar cores: atualize background e color valores
   • Faça funcionar em todo o site: remova o if (!is_product_category()) condição

Como Funciona

1. Carregamentos de página: Apenas o botão de gatilho é renderizado (sem processamento de filtro)
2. Usuário clica no botão: Slideout abre, overlay aparece
3. Primeiro abra apenas: O JavaScript clica automaticamente no botão oculto "Iniciar Filtragem"
4. Filtro carrega: WOOF processa todas as consultas e exibe as opções de filtro
5. Aberturas subsequentes: O filtro já está carregado, abre instantaneamente

Resultados do Mundo Real

Antes:

• Carregamento da página: 10-15 segundos (ou timeout 504)
• 500+ consultas SQL por visualização de página
• Alta taxa de rejeição

Depois:

• Carregamento da página: < 2 segundos
• O filtro carrega em ~3 segundos (somente quando solicitado)
• ~50% de redução na carga do servidor (muitos usuários nunca abrem o filtro)

Compatibilidade

✅ Funciona com todas as versões do WOOF
✅ Compatível com cache de página (WP Rocket, LiteSpeed, etc.)
✅ Amigável para dispositivos móveis
✅ Funciona com qualquer tema WordPress

Customização Avançada

Combine o estilo do seu 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 esquerdo:

Altere estes valores:

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

Quando Usar Esta Solução

Use slide-out lazy-load quando:

• Categoria com hierarquia profunda (3+ níveis)
• 500+ produtos na categoria
• Recálculo Dinâmico é necessário
• Tempo de carregamento da página > 5 segundos
• Experimentando timeouts 504

Alternativa para Filtro de Barra Lateral

Se você prefere barra lateral em vez de slideout, use:

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

Isso cria um botão “Iniciar Filtragem” em sua barra lateral que carrega o filtro ao clicar.

Esta solução oferece o melhor equilíbrio entre performance e funcionalidade, garantindo carregamentos rápidos de página, mantendo capacidades de filtragem completas para usuários que precisam delas.

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