Gereksiz CSS ve JS Dosyalarını Kaldırma: wp_dequeue Kullanımı

Tarafındankomut
0 Comments

WordPress siteniz yavaş yükleniyorsa ve PageSpeed Insights size “Render-engelleyen kaynakları ortadan kaldırın” uyarısı veriyorsa, büyük ihtimalle yüklü olmayan onlarca eklentinin CSS ve JS dosyası arka planda sessiz sedasız yükleniyor demektir. Bu dosyalar sitenizi doğrudan etkiliyor, kullanıcı deneyimini bozuyor ve arama motoru sıralamalarınızı aşağı çekiyor. wp_dequeue_script() ve wp_dequeue_style() fonksiyonları ise tam bu noktada devreye giriyor.

wp_dequeue Nedir ve Neden Kullanmalıyız?

WordPress, eklentiler ve temalar tarafından yüklenen her CSS ve JS dosyasını bir kuyruğa (queue) ekler. Bu kuyruğu wp_enqueue_scripts hook’u yönetir. Bir dosyayı kuyruğa almak için wp_enqueue_script() veya wp_enqueue_style() kullanılır. Peki bunu geri almak için? İşte orada wp_dequeue_script() ve wp_dequeue_style() devreye girer.

Bu iki fonksiyon, daha önce kuyruğa eklenmiş dosyaları kuyruktan çıkarır. Yani eklentiyi devre dışı bırakmadan, sadece o eklentinin belirli bir sayfada veya koşulda yüklediği dosyayı engellemiş olursunuz. Bu yaklaşım hem güvenlidir hem de temadaki functions.php dosyasına eklenerek kolayca yönetilebilir.

Neden bunu yapmamız gerekiyor?

  • WooCommerce, Contact Form 7, Elementor gibi büyük eklentiler her sayfada CSS/JS yükler, ama bu dosyalara her sayfada ihtiyaç duyulmaz
  • Üçüncü parti eklentiler bazen gereksiz kütüphaneler (jQuery UI, Dashicons vb.) ekler
  • Birden fazla eklenti aynı kütüphaneyi farklı versiyonlarda yüklemeye çalışır
  • Sayfa hızı skoru doğrudan bu fazla dosyalardan etkilenir

Temel Kullanım Yapısı

wp_dequeue_style() ve wp_dequeue_script() fonksiyonlarının kullanım yapısı oldukça basittir. Önemli olan nokta, bu fonksiyonları doğru hook’a ve doğru öncelik (priority) değeriyle bağlamaktır.

// functions.php içine ekleyin
function site_gereksiz_dosyalari_kaldir() {
    // CSS kaldırma
    wp_dequeue_style( 'handle-adi' );
    wp_deregister_style( 'handle-adi' );

    // JS kaldırma
    wp_dequeue_script( 'handle-adi' );
    wp_deregister_script( 'handle-adi' );
}
add_action( 'wp_enqueue_scripts', 'site_gereksiz_dosyalari_kaldir', 100 );

Burada priority değeri olan 100 çok kritik. Çoğu eklenti dosyalarını 10 veya default olan priority ile kuyruğa ekler. Siz 100 değeriyle geç çalıştırırsanız, önce eklenti dosyayı ekler, sonra siz çıkarırsınız. Eğer önceliği düşük tutarsanız siz kaldırmadan önce eklenti dosyayı tekrar ekleyebilir.

wp_deregister_style() ve wp_deregister_script() ise dosyayı sadece kuyruktan çıkarmakla kalmaz, kayıt sisteminden de siler. Bu sayede başka bir kodun aynı dosyayı tekrar kuyruğa eklemesi de önlenmiş olur. Güvenli tarafta kalmak için ikisini birlikte kullanmak iyi bir alışkanlıktır.

Handle Adını Nasıl Bulursunuz?

Bu işin en kritik kısmı doğru handle adını bulmak. Handle, her enqueue edilmiş dosyanın benzersiz kimliğidir. Birkaç yöntemle bulabilirsiniz.

Yöntem 1: Sayfa kaynak kodunu inceleme

Tarayıcıda sayfanın kaynak kodunu görüntüleyin (Ctrl+U). CSS için taglarına bakın. Genellikle şu yapıda olurlar:

<link rel='stylesheet' id='contact-form-7-css' href='...' />

Buradaki contact-form-7 handle adıdır. -css veya -js eki handle’ın parçası değildir, WordPress’in eklediği bir sonektir.

Yöntem 2: Query Monitor Eklentisi

Query Monitor eklentisini geliştirme ortamında kurarak admin bar üzerinden tüm enqueue edilmiş script ve style listesine ulaşabilirsiniz. Bu yöntem en güvenilir olanıdır.

Yöntem 3: Eklenti kaynak koduna bakma

Eklentinin ana PHP dosyasında wp_enqueue_style veya wp_enqueue_script araması yaparak handle adını bulabilirsiniz.

Gerçek Dünya Senaryosu 1: Contact Form 7’yi Sadece İletişim Sayfasında Yüklemek

En klasik senaryo budur. Contact Form 7 varsayılan olarak sitenizin tüm sayfalarında CSS ve JS dosyalarını yükler, ama forma sadece /iletisim/ sayfasında ihtiyaç duyarsınız.

function cf7_sadece_iletisim_sayfasinda( $q ) {
    // Eğer iletişim sayfası değilse kaldır
    if ( ! is_page( 'iletisim' ) ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_deregister_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
        wp_deregister_script( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'cf7_sadece_iletisim_sayfasinda', 100 );

Bu tek düzenleme bile birçok sitede PageSpeed skorunu 5-10 puan artırabilir çünkü CF7’nin JS dosyası render-blocking özellik gösterebilir.

Gerçek Dünya Senaryosu 2: WooCommerce CSS’ini Sadece Shop Sayfalarında Yüklemek

WooCommerce oldukça büyük CSS dosyaları yükler. Anasayfada ya da blog yazılarında bu dosyalara ihtiyaç yoktur.

function woocommerce_css_optimize() {
    // WooCommerce sayfalarını kontrol et
    if ( function_exists( 'is_woocommerce' ) ) {
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
            // Ana WooCommerce stilleri
            wp_dequeue_style( 'woocommerce-general' );
            wp_dequeue_style( 'woocommerce-layout' );
            wp_dequeue_style( 'woocommerce-smallscreen' );
            wp_dequeue_style( 'woocommerce_frontend_styles' );
            wp_dequeue_style( 'wc-blocks-style' );

            // WooCommerce JS dosyaları
            wp_dequeue_script( 'woocommerce' );
            wp_dequeue_script( 'wc-cart-fragments' );
            wp_dequeue_script( 'woocommerce-cart-fragments' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'woocommerce_css_optimize', 100 );

Dikkat: wc-cart-fragments script’ini kaldırmak sepet sayısının header’da dinamik güncellenmemesine yol açabilir. Bunu sadece WooCommerce dışı sayfalarda kaldırın, ya da mini cart kullanmıyorsanız tamamen kaldırabilirsiniz.

Gerçek Dünya Senaryosu 3: Dashicons’ı Frontend’den Kaldırmak

WordPress, Dashicons ikonlarını sadece admin panel için yükler ama çoğu zaman frontend’e de eklenir. Admin değilseniz ve temanız Dashicons kullanmıyorsa bunu güvenle kaldırabilirsiniz.

function dashicons_frontend_kaldir() {
    // Admin değilse Dashicons'ı kaldır
    if ( ! is_admin() && ! is_user_logged_in() ) {
        wp_dequeue_style( 'dashicons' );
        wp_deregister_style( 'dashicons' );
    }
}
add_action( 'wp_enqueue_scripts', 'dashicons_frontend_kaldir', 100 );

Bazı eklentiler Dashicons’a bağımlıdır (dependency olarak tanımlarlar). Bu durumda o eklentinin CSS’i de yüklenmeyebilir. Kaldırmadan önce mutlaka görsel kontrol yapın.

Gerçek Dünya Senaryosu 4: Elementor’un Gereksiz CSS Dosyalarını Temizlemek

Elementor, her widget için ayrı CSS dosyaları oluşturabilir. Bazı sayfalar Elementor ile oluşturulmamışsa o sayfada Elementor CSS yüklemek anlamsızdır.

function elementor_css_optimize() {
    // Elementor aktif mi?
    if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
        return;
    }

    // Elementor ile oluşturulmamış sayfalarda kaldır
    if ( ! ElementorPlugin::$instance->db->is_built_with_elementor( get_the_ID() ) ) {
        wp_dequeue_style( 'elementor-icons' );
        wp_dequeue_style( 'elementor-frontend' );
        wp_dequeue_style( 'elementor-post-' . get_the_ID() );
        wp_dequeue_script( 'elementor-frontend' );
        wp_dequeue_script( 'elementor-webpack-runtime' );
    }
}
add_action( 'wp_enqueue_scripts', 'elementor_css_optimize', 100 );

Gerçek Dünya Senaryosu 5: Belirli Bir Sayfa Tipinde Toplu Temizlik

Bazen blog yazılarında hiçbir eklentinin CSS’ine ihtiyaç duymayabilirsiniz çünkü tema kendi stilini hallediyor. Bu durumda daha agresif bir temizlik yapabilirsiniz.

function blog_yazisi_css_temizle() {
    if ( is_single() && get_post_type() === 'post' ) {
        // Yorum formu için gereksiz JS
        wp_dequeue_script( 'comment-reply' );

        // Gutenberg block stili (klasik tema kullanıyorsanız)
        wp_dequeue_style( 'wp-block-library' );
        wp_dequeue_style( 'wp-block-library-theme' );
        wp_dequeue_style( 'global-styles' );

        // Classic Editor stilleri
        wp_dequeue_style( 'classic-theme-styles' );

        // Emoji scripti (gereksizse)
        remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
        remove_action( 'wp_print_styles', 'print_emoji_styles' );
    }
}
add_action( 'wp_enqueue_scripts', 'blog_yazisi_css_temizle', 100 );

wp-block-library stilini kaldırmak Gutenberg blokları kullanan sayfalarda görsel bozukluklara yol açar. Klasik tema ve klasik editör kullanıyorsanız kaldırabilirsiniz, ama Full Site Editing (FSE) teması kullanıyorsanız dokunmayın.

Gerçek Dünya Senaryosu 6: Admin Panel’de Gereksiz Dosyaları Kaldırmak

Bazen eklentiler admin paneline de gereksiz dosyalar ekler. Özellikle performans açısından kritik olmasa da dağınık admin panelini temizlemek için kullanışlıdır.

function admin_gereksiz_script_kaldir( $hook ) {
    // Sadece belirli admin sayfasında çalıştır
    // $hook değerleri: 'index.php', 'post.php', 'edit.php' vb.
    if ( $hook !== 'index.php' ) {
        return;
    }

    // Dashboard'da gereksiz eklenti scripti kaldır
    wp_dequeue_script( 'gereksiz-eklenti-admin-js' );
    wp_dequeue_style( 'gereksiz-eklenti-admin-css' );
}
add_action( 'admin_enqueue_scripts', 'admin_gereksiz_script_kaldir', 100 );

Admin tarafı için wp_enqueue_scripts yerine admin_enqueue_scripts hook’unu kullandığınıza dikkat edin.

Gerçek Dünya Senaryosu 7: Koşullu Mantıkla Kapsamlı Optimizasyon

Büyük bir siteniz varsa tüm bu kuralları tek bir fonksiyonda organize etmek yönetimi kolaylaştırır.

function kapsamli_kaynak_optimizasyonu() {
    // 1. Emoji desteğini kaldır (modern tarayıcılar destekliyor)
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );

    // 2. OEmbed JS kaldır
    wp_dequeue_script( 'wp-embed' );

    // 3. Gutenberg block stilleri (klasik tema için)
    if ( ! current_theme_supports( 'wp-block-styles' ) ) {
        wp_dequeue_style( 'wp-block-library' );
        wp_dequeue_style( 'wp-block-library-theme' );
    }

    // 4. Global styles (FSE değilse)
    wp_dequeue_style( 'global-styles' );

    // 5. Contact Form 7 - sadece ilgili sayfalarda
    if ( ! is_page( array( 'iletisim', 'teklif-al', 'destek' ) ) ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_deregister_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
        wp_deregister_script( 'contact-form-7' );
    }

    // 6. WooCommerce optimizasyonu
    if ( function_exists( 'is_woocommerce' ) ) {
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
            wp_dequeue_style( 'woocommerce-general' );
            wp_dequeue_style( 'woocommerce-layout' );
            wp_dequeue_script( 'woocommerce' );
            wp_dequeue_script( 'wc-cart-fragments' );
        }
    }

    // 7. Dashicons (giriş yapmamış kullanıcılar için)
    if ( ! is_user_logged_in() ) {
        wp_dequeue_style( 'dashicons' );
    }
}
add_action( 'wp_enqueue_scripts', 'kapsamli_kaynak_optimizasyonu', 100 );

Sık Yapılan Hatalar ve Dikkat Edilecekler

Handle adını yanlış yazmak: En sık karşılaşılan problem budur. Handle büyük-küçük harfe duyarlıdır. Contact-Form-7 ile contact-form-7 farklı şeylerdir. Her zaman kaynak koddan ya da Query Monitor’dan doğru handle adını alın.

Priority değerini düşük tutmak: Eğer priority olarak 1 ya da 10 verirseniz, bazı eklentiler sizin kaldırma işleminizden sonra dosyayı tekrar kuyruğa ekleyebilir. 100 veya daha yüksek bir değer genellikle yeterlidir.

Bağımlılıkları görmezden gelmek: Bir script’i kaldırdığınızda, o script’e bağımlı olan diğer script’ler de çalışmaz. Örneğin jQuery’yi kaldırırsanız jQuery’ye bağımlı her şey bozulur. Dependency zincirini her zaman kontrol edin.

Staging ortamında test etmemek: Bu değişiklikleri doğrudan canlı sitede yapmayın. Önce staging ya da lokal ortamda test edin, her sayfayı görsel olarak kontrol edin, sonra canlıya alın.

wp_deregister olmadan sadece wp_dequeue kullanmak: Bazı durumlarda sadece kuyruktan çıkarmak yetmez. Başka bir hook ya da eklenti aynı dosyayı tekrar ekleyebilir. wp_deregister ile kayıt sisteminden de silmek daha kesin bir çözümdür.

Hangi Fonksiyonu Ne Zaman Kullanmalısınız?

  • wp_dequeue_style: CSS dosyasını sadece kuyruktan çıkarır, kayıtlı kalır
  • wp_deregister_style: CSS dosyasını kayıt sisteminden tamamen siler
  • wp_dequeue_script: JS dosyasını sadece kuyruktan çıkarır, kayıtlı kalır
  • wp_deregister_script: JS dosyasını kayıt sisteminden tamamen siler
  • remove_action: wp_head gibi hook’lara bağlı fonksiyonları kaldırır, örneğin emoji scripti için kullanılır

Genel kural olarak: Eğer o dosyanın hiçbir koşulda yüklenmemesini istiyorsanız hem dequeue hem de deregister kullanın. Eğer belirli koşullarda tekrar yüklenmesine izin vermek istiyorsanız sadece dequeue kullanın.

Sonuç

wp_dequeue_script() ve wp_dequeue_style() fonksiyonları, WordPress performans optimizasyonunun en güçlü ama en az bilinen araçlarından ikisidir. Doğru kullanıldığında sayfa yüklenme sürelerinde ciddi iyileşmeler elde edebilirsiniz. Contact Form 7 örneğinden yola çıkacak olursak, bu tek değişiklik bile bazı sitelerde 200-300ms kazanç sağlayabilir.

Yapılacak en iyi yaklaşım şudur: Önce sitenizi PageSpeed Insights veya GTmetrix ile analiz edin, hangi dosyaların yüklendiğini Query Monitor ile listeleyin, sonra her dosyanın hangi sayfada gerçekten gerekli olduğunu belirleyin ve bu yazıdaki örnekleri şablon olarak kullanarak functions.php dosyanıza ekleyin. Canlıya almadan önce her sayfayı, özellikle form içeren ve interaktif element barındıran sayfaları, titizlikle test edin.

Performans optimizasyonu tek seferlik bir iş değil, süregelen bir süreçtir. Yeni eklenti ekledikçe bu listeyi güncellemeniz ve zaman zaman yeniden audit yapmanız gerekecektir. Ama bir kez bu alışkanlığı edindikten sonra WordPress siteniz hem kullanıcılarınıza hem de arama motorlarına çok daha iyi bir deneyim sunacaktır.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir