Büyük WooCommerce Kategori Filtrelerini Hızlandırma: Tembel Yükleme Slideout

Bir üst kategoriye sahip olduğunuzda:

Çok sayıda ürün (500-1000+)
Derin kategori hiyerarşisi (birden çok alt kategori seviyesi)
Dynamic Recount etkin

Ürün filtresi, kullanıcı filtreyi hiç kullanmasa bile her sayfa yüklemesinde yüzlerce SQL sorgusu oluşturabilir. Bu şunlara neden olur:

Yavaş sayfa yüklemesi (10+ saniye)
504 Gateway Zaman Aşımı hataları
Yüksek sunucu yükü
Kötü kullanıcı deneyimi

Bu Neden Olur

Dynamic Recount etkinleştirildiğinde, WOOF şunları yapmalıdır:

Tüm alt kategorileri özyinelemeli olarak işlemek
Ürünleri saymak için her terim için SQL sorguları yürütmek
Mevcut kategori bağlamını dikkate alarak sayımları hesaplamak

Örnek: Alt kategorilere sahip bir “Güneş Gözlüğü” kategorisi (Erkek → Kadın → Şekiller → Markalar) büyük sorgu yükü oluşturur.

Geleneksel Çözümler (Yetersiz)

❌ CSS/görüntüleme kurallarıyla slideout’u gizlemek – Filtre sunucuda işlenmeye devam eder
❌ Dynamic Recount’u devre dışı bırakmak – Önemli işlevselliği kaybeder
❌ Filtre seçeneklerini kaldırmak – Kullanıcılar düzgün filtreleyemez
❌ Veritabanı indeksleri – Küçük iyileştirme, temel nedeni çözmez

Optimum Çözüm: Tembel Yükleme Slideout’u

Anahtar Kavram: Filtreyi yalnızca kullanıcı slideout’u gerçekten açtığında yükleyin.

✅ Sayfa anında yüklenir (filtre işleme yok)
✅ Filtre gerektiğinde mükemmel çalışır
✅ Boşa harcanan sunucu kaynağı yok
✅ Botlar ve sıradan tarayıcılar için mükemmel
✅ Tüm filtre işlevselliğini korur

Uygulama

Aşağıdaki kodu temanızın functions.php dosyasına ekleyin:

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

Yapılandırma Adımları

Mevcut slideout’unuzu devre dışı bırakın (WOOF ayarlarında etkinse)
Yukarıdaki kodu ekleyin aktif temanızın functions.php dosyasına
Bu WOOF ayarlarını etkin tutun:
- Dinamik sayım önbelleği: Evet
- Terim önbelleği: Evet
- Boş terimleri gizle: Evet
- Dynamic Recount: Evet
İsteğe bağlı özelleştirme:
- Slideout genişliğini ayarlayın: width: 350px ve right: -350px değerlerini değiştirin
- Buton konumunu değiştirin: top: 50% değerini değiştirin
- Renkleri özelleştirin: background ve color değerlerini güncelleyin
- Site genelinde çalışmasını sağlayın: if (!is_product_category()) koşulunu kaldırın

Nasıl Çalışır

Sayfa yüklenir: Yalnızca tetikleyici buton çalışır (filtre işleme yok)
Kullanıcı butona tıklar: Slideout açılır, katman görünür
Yalnızca ilk açılış: JavaScript gizli “Filtrelemeyi Başlat” butonuna otomatik olarak tıklar
Filtre yüklenir: WOOF tüm sorguları işler ve filtre seçeneklerini görüntüler
Sonraki açılışlar: Filtre zaten yüklüdür, anında açılır

Gerçek Dünya Sonuçları

Önce:

Sayfa yüklemesi: 10-15 saniye (veya 504 zaman aşımı)
Sayfa görüntüleme başına 500+ SQL sorgusu
Yüksek hemen çıkma oranı

Sonra:

Sayfa yüklemesi: < 2 saniye
Filtre ~3 saniyede yüklenir (yalnızca istendiğinde)
Sunucu yükünde ~%50 azalma (birçok kullanıcı filtreyi hiç açmaz)

Uyumluluk

✅ Tüm WOOF sürümleriyle çalışır
✅ Sayfa önbelleğe alma ile uyumlu (WP Rocket, LiteSpeed vb.)
✅ Mobil uyumlu
✅ Herhangi bir WordPress temasıyla çalışır

Gelişmiş Özelleştirme

Temanızın stilini eşleştirin:

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

Sol taraflı slideout:

Bu değerleri değiştirin:

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

Bu Çözüm Ne Zaman Kullanılır

Tembel yükleme slideout’unu şu durumlarda kullanın:

Kategori derin hiyerarşiye sahipse (3+ seviye)
Kategoride 500+ ürün varsa
Dynamic Recount gerekliyse
Sayfa yükleme süresi > 5 saniye ise
504 zaman aşımı yaşanıyorsa

Kenar Çubuğu Filtresi için Alternatif

Slideout yerine kenar çubuğunu tercih ediyorsanız, kullanın:

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

Bu, kenar çubuğunuzda, tıklandığında filtreyi yükleyen bir “Filtrelemeyi Başlat” butonu oluşturur.

Bu çözüm, performans ve işlevsellik arasında en iyi dengeyi sağlar, hızlı sayfa yüklemelerini garanti ederken ihtiyaç duyan kullanıcılar için tam filtreleme yeteneklerini korur.

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