Performans Optimizasyonu: Büyük Kategori Hiyerarşileri için Tembel Yükleme Kaydırması

Ana kategorinizde şunlar olduğunda:

• Büyük sayıda ürün (500-1000+)
• Derin kategori hiyerarşisi (çoklu alt kategori seviyeleri)
• Dinamik Geri Sayım etkinleştirildi

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

• Yavaş sayfa yüklemesi (10+ saniye)
• 504 Gateway Timeout hataları
• Yüksek sunucu yükü
• Zayıf kullanıcı deneyimi

Neden Bu Oluyor

Dinamik Yeniden Sayma etkinleştirildiğinde, WOOF şunları yapmalıdır:

1. Tüm alt kategorileri özyinelemeli olarak işle
2. Ürünleri saymak için her terim için SQL sorguları yürüt
3. Mevcut kategori bağlamını dikkate alarak sayımları hesapla

Örnek: Bir "Güneş Gözlüğü" kategorisi alt kategorilerle (Erkek → Kadın → Şekiller → Markalar) büyük bir sorgu yükü oluşturur.

Geleneksel Çözümler (Yetersiz)

❌ Kaydırarak açılanı CSS/görüntü kurallarıyla gizleme – Filtre hala sunucuda işleniyor
❌ Dinamik Yeniden Saymayı Devre Dışı Bırakma – Önemli işlevselliği kaybeder
❌ Filtre seçeneklerini kaldırma – Kullanıcılar düzgün bir şekilde filtreleyemez
❌ Veritabanı indeksleri – Küçük iyileştirme, kök nedeni çözmez

En Uygun Çözüm: Lazy-Load Slaytlı

Anahtar Kavram: Filtreyi yalnızca kullanıcı kaydırılabiliri açtığında yükleyin.

✅ Sayfa anında yüklenir (filtre işleme yok)
✅ Filtre gerektiğinde mükemmel çalışıyor
✅ Boşa sunucu kaynağı harcanmaz
✅ Botlar ve sıradan göz atanlar için mükemmel
✅ Tüm filtre işlevselliğini bozulmadan tutar

Uygulama

Şu kodu temanıza ekleyin 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);

Yapılandırma Adımları

1. Mevcut kayan pencerenizi devre dışı bırakın etkinse WOOF ayarlarında
2. Yukarıdaki kodu ekleyin için functions.php aktif temanızın
3. Bu WOOF ayarlarını etkin tutun:
   • Önbellek dinamik yeniden sayma: Evet
   • Terimleri önbelleğe al: Evet
   • Boş terimleri gizle: Evet
   • Dinamik Yeniden Sayma: Evet
4. İsteğe bağlı özelleştirme:
   • Kaydırılabilen panel genişliğini ayarla: değiştir width: 350px ve right: -350px
   • Düğme konumunu değiştir: değiştir top: 50%
   • Renkleri özelleştirin: güncelleme background ve color değerler
   • Site genelinde çalışmasını sağlayın: kaldırın if (!is_product_category()) koşul

Nasıl Çalışır

1. Sayfa yüklemeleri: Yalnızca tetikleyici düğmesi işlenir (filtre işleme yok)
2. Kullanıcı düğmeye tıklar: Kaydırmalı pencere açılır, bindirme görünür
3. Yalnızca ilk açıldığında: JavaScript otomatik olarak gizli “Filtrelemeyi Başlat” düğmesine tıklar
4. Filtre yüklendi: WOOF tüm sorguları işler ve filtre seçeneklerini görüntüler
5. Sonraki açılışlar: Filtre zaten yüklendi, anında açılır

Gerçek Dünya Sonuçları

Önce:

• Sayfa yüklenmesi: 10-15 saniye (veya 504 zaman aşımı)
• Sayfa başına 500+ SQL sorgusu
• Yüksek hemen çıkma oranı

Sonra:

• Sayfa yüklemesi: < 2 saniye
• Filtre ~3 saniyede yüklenir (sadece 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ğiyle uyumlu (WP Rocket, LiteSpeed, vb.)
✅ Mobil uyumlu
✅ Herhangi bir WordPress temasıyla çalışır

Gelişmiş Özelleştirme

Tema stilinize uyun:

/* 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 taraftaki kaydırıcı:

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

Aşağıdaki durumlarda kaydırmalı lazy-load kullanın:

• Kategori derin hiyerarşiye sahip (3+ seviye)
• Kategoride 500+ ürün
• Dinamik Yeniden Sayım gerekli
• Sayfa yükleme süresi > 5 saniye
• 504 zaman aşımları yaşıyor

Kenar Çubuğu Filtresi Alternatifi

Sürgülü bir kaydırmaçayı tercih ediyorsanız şunu kullanın:

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

Bu, kenar çubuğunuza bir "Filtreyi Başlat" düğmesi oluşturur ve tıklanarak filtreyi yükler.

Bu çözüm en iyi dengeyi sağlar performans ve işlevsellik, ihtiyaç duyan kullanıcılar için tam filtreleme yeteneklerini korurken hızlı sayfa yüklemeleri sağlayarak.

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