WordPress’te Emoji Scriptlerini Devre Dışı Bırakarak Performansı Artırma

Tarafındankomut
0 Comments

WordPress kurulumunuzda fark etmeden arka planda çalışan onlarca küçük betik var ve bunların büyük çoğunluğu sitenizin gerçek işleyişiyle hiç ilgisi olmayan işlemler yapıyor. Emoji desteği bunların en klasik örneği. WordPress 4.2 ile birlikte gelen bu özellik, eski tarayıcılarda emoji görüntülenebilmesi için her sayfaya ekstra JavaScript ve CSS yüklüyor. Oysa 2024 yılında neredeyse tüm modern tarayıcılar emojileri yerel olarak destekliyor. Bu yazıda emoji scriptlerini neden devre dışı bırakmanız gerektiğini, nasıl yapacağınızı ve bunu doğru şekilde uygulayarak sitenizde gerçek bir performans kazanımı elde etmeyi anlatacağım.

WordPress Emoji Sistemi Aslında Ne Yapıyor?

WordPress, emoji özelliğini aktif tuttuğunda şu işlemleri gerçekleştiriyor:

  • Her sayfanın bölümüne wp-emoji-release.min.js dosyasını yüklüyor
  • DNS prefetch yönergesi ekliyor: s.w.org adresine bağlantı kuruyor
  • wp_print_styles kancasıyla satır içi CSS ekliyor
  • TinyMCE editörüne de emoji desteği için ayrı script yüklüyor
  • XML-RPC ve REST API yanıtlarını da bu özellik etkiliyor

Görünüşte masum görünen bu işlemler, özellikle yüksek trafikli sitelerde toplanıp ciddi bir yük oluşturuyor. Bir de hesaba katın: Her sayfa yüklemesinde DNS çözümleme için s.w.org‘a istek gidiyor. Sunucunuz başka bir bölgedeyse bu gecikme doğrudan kullanıcı deneyimine yansıyor.

Performans Etkisi: Rakamlarla Bakalım

Bir e-ticaret sitesi düşünün. Günlük 10.000 sayfa görüntülenmesi var. Her görüntülemede:

  • wp-emoji-release.min.js: yaklaşık 10-15 KB (gzip sonrası ~4-5 KB)
  • DNS lookup gecikmesi: 20-100ms arası (coğrafi konuma göre değişir)
  • Render-blocking potansiyeli: Script yükleme sıralamasına bağlı

Aylık bazda bu rakamlar ciddi bir bant genişliğine dönüşüyor. PageSpeed Insights veya GTmetrix raporlarında “render-blocking resources” uyarısı alan sitelerin büyük kısmında emoji scripti bu listede yer alıyor.

functions.php ile Emoji Desteğini Kapatma

Temel Yöntem

En basit ve etkili çözüm şu:

// functions.php dosyanıza ekleyin
function disable_wp_emojis() {
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('admin_print_scripts', 'print_emoji_detection_script');
    remove_action('wp_print_styles', 'print_emoji_styles');
    remove_action('admin_print_styles', 'print_emoji_styles');
    remove_filter('the_content_feed', 'wp_staticize_emoji');
    remove_filter('comment_text_rss', 'wp_staticize_emoji');
    remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
}
add_action('init', 'disable_wp_emojis');

Bu kod bloğu temel emoji kancalarını kaldırıyor ancak eksik bir yer var: TinyMCE eklentisi hâlâ yükleniyor. Bunu da kapatmak için:

// TinyMCE emoji eklentisini de kaldır
function disable_emojis_tinymce($plugins) {
    if (is_array($plugins)) {
        return array_diff($plugins, array('wpemoji'));
    }
    return array();
}

function disable_wp_emojis_complete() {
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('admin_print_scripts', 'print_emoji_detection_script');
    remove_action('wp_print_styles', 'print_emoji_styles');
    remove_action('admin_print_styles', 'print_emoji_styles');
    remove_filter('the_content_feed', 'wp_staticize_emoji');
    remove_filter('comment_text_rss', 'wp_staticize_emoji');
    remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
    add_filter('tiny_mce_plugins', 'disable_emojis_tinymce');
}
add_action('init', 'disable_wp_emojis_complete');

DNS Prefetch Temizleme

WordPress, emoji için s.w.org adresine DNS prefetch yönergesi ekliyor. Bunu da temizlemek gerekiyor:

// DNS prefetch kaldırma
function disable_emojis_remove_dns_prefetch($urls, $relation_type) {
    if ('dns-prefetch' == $relation_type) {
        $emoji_svg_url = apply_filters(
            'emoji_svg_url',
            'https://s.w.org/images/core/emoji/14.0.0/svg/'
        );
        $urls = array_diff($urls, array($emoji_svg_url));
    }
    return $urls;
}
add_filter(
    'wp_resource_hints',
    'disable_emojis_remove_dns_prefetch',
    10,
    2
);

Hepsini Bir Arada: Kapsamlı Çözüm

Gerçek dünya projelerinde tek tek fonksiyon yazmak yerine bütüncül bir yaklaşım tercih ediyorum. İşte production ortamında kullandığım versiyon:

/**
 * WordPress Emoji Özelliğini Tamamen Devre Dışı Bırak
 * Performans optimizasyonu için tüm emoji bileşenlerini kaldırır
 *
 * @author SysAdmin Blog
 * @version 1.0
 */
class WP_Emoji_Disabler {

    public function __construct() {
        add_action('init', array($this, 'disable_all_emoji'));
        add_filter(
            'wp_resource_hints',
            array($this, 'remove_dns_prefetch'),
            10,
            2
        );
    }

    public function disable_all_emoji() {
        // Frontend kancaları kaldır
        remove_action('wp_head', 'print_emoji_detection_script', 7);
        remove_action('wp_print_styles', 'print_emoji_styles');

        // Admin panel kancaları kaldır
        remove_action('admin_print_scripts', 'print_emoji_detection_script');
        remove_action('admin_print_styles', 'print_emoji_styles');

        // Feed ve mail filtrelerini kaldır
        remove_filter('the_content_feed', 'wp_staticize_emoji');
        remove_filter('comment_text_rss', 'wp_staticize_emoji');
        remove_filter('wp_mail', 'wp_staticize_emoji_for_email');

        // TinyMCE eklentisini kaldır
        add_filter('tiny_mce_plugins', array($this, 'remove_tinymce_emoji'));

        // Emoji SVG URL filtresini kaldır
        remove_filter(
            'the_content_feed',
            'wp_staticize_emoji'
        );
    }

    public function remove_tinymce_emoji($plugins) {
        if (!is_array($plugins)) {
            return array();
        }
        return array_diff($plugins, array('wpemoji'));
    }

    public function remove_dns_prefetch($urls, $relation_type) {
        if ('dns-prefetch' !== $relation_type) {
            return $urls;
        }

        $emoji_svg_url = apply_filters(
            'emoji_svg_url',
            'https://s.w.org/images/core/emoji/14.0.0/svg/'
        );

        return array_diff($urls, array($emoji_svg_url));
    }
}

new WP_Emoji_Disabler();

WooCommerce Sitelerinde Özel Dikkat Noktaları

WooCommerce kullanan sitelerde emoji devre dışı bırakma işlemi biraz daha kritik. Ürün açıklamalarında, kategori isimlerinde veya müşteri yorumlarında emoji kullanılıyorsa ve siz emoji support’u tamamen kaldırırsanız, bu karakterler nasıl görünecek?

Modern tarayıcılar (Chrome 66+, Firefox 60+, Safari 12+, Edge 79+) emojileri yerel olarak zaten işliyor. Yani WordPress’in bu scripti yüklemesine gerek kalmıyor. Ürün sayfalarınızdaki emojiler kaybolmayacak, sadece WordPress’in eski tarayıcılar için eklediği shim katmanı kaldırılmış olacak.

WooCommerce e-posta şablonları için ise dikkatli olmak gerek:

// WooCommerce e-posta bildirimlerinde emoji desteğini koru
// ancak frontend scriptleri yükleme
function smart_emoji_disable() {
    // E-posta bağlamında emoji filtresini koru
    if (!doing_filter('wp_mail')) {
        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');
        remove_filter('the_content_feed', 'wp_staticize_emoji');
        remove_filter('comment_text_rss', 'wp_staticize_emoji');
        add_filter('tiny_mce_plugins', 'remove_tinymce_emoji_plugin');
    }
}
add_action('init', 'smart_emoji_disable');

function remove_tinymce_emoji_plugin($plugins) {
    return is_array($plugins)
        ? array_diff($plugins, array('wpemoji'))
        : array();
}

Koşullu Devre Dışı Bırakma: Gelişmiş Senaryo

Bazı durumlarda emoji scriptini her yerde değil, sadece belirli sayfalarda kapatmak isteyebilirsiniz. Örneğin bir sosyal platform kuruyorsunuz ve kullanıcıların yorum yazarken emoji seçiciyi kullanmasını istiyorsunuz, ama ürün listesi sayfalarında buna gerek yok.

// Sayfa tipine göre koşullu emoji yönetimi
function conditional_emoji_disable() {
    // WooCommerce ürün listesi ve kategori sayfalarında kapat
    if (
        function_exists('is_shop') &&
        (is_shop() || is_product_category() || is_product_tag())
    ) {
        remove_action('wp_head', 'print_emoji_detection_script', 7);
        remove_action('wp_print_styles', 'print_emoji_styles');
        return;
    }

    // Tüm statik sayfalarda kapat
    if (is_page() && !is_singular('post')) {
        remove_action('wp_head', 'print_emoji_detection_script', 7);
        remove_action('wp_print_styles', 'print_emoji_styles');
        return;
    }

    // Ana sayfa ve arşivlerde kapat
    if (is_home() || is_archive() || is_search()) {
        remove_action('wp_head', 'print_emoji_detection_script', 7);
        remove_action('wp_print_styles', 'print_emoji_styles');
    }
}
add_action('template_redirect', 'conditional_emoji_disable');

Doğrulama: Gerçekten Çalışıyor mu?

Kodu ekledikten sonra değişikliğin etkili olduğunu doğrulamak için birkaç yöntem kullanıyorum.

Kaynak Kodunu İnceleme

Tarayıcıda sayfayı açın, Ctrl+U ile kaynak kodunu görüntüleyin. Şu satırları aramayın, olmamalılar:

# Bu satırların artık görünmemesi gerekiyor
# Grep ile terminal üzerinden de kontrol edebilirsiniz:
curl -s https://siteniz.com | grep -i emoji
curl -s https://siteniz.com | grep "s.w.org"
curl -s https://siteniz.com | grep "wp-emoji"

Yukarıdaki komutlar hiçbir çıktı vermiyorsa emoji scriptleri başarıyla kaldırılmış demektir.

Ağ İsteklerini İzleme

# Sayfanın yüklediği kaynakları listele ve emoji ile ilgili olanları filtrele
curl -s https://siteniz.com 
  | grep -E "(script|link|href|src)" 
  | grep -i "emoji|s.w.org"

# Boş çıktı = başarılı

Multisite Ortamında Uygulama

WordPress Multisite kurulumunda bu değişikliği ağ genelinde uygulamak için functions.php yerine mu-plugins klasörünü kullanmak daha güvenli:

<?php
/**
 * Must-Use Plugin: Emoji Disabler
 * Dosya yolu: wp-content/mu-plugins/emoji-disabler.php
 * Tüm ağ sitelerinde otomatik aktif olur
 */

if (!defined('ABSPATH')) {
    exit;
}

add_action('init', function() {
    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');
    remove_filter('the_content_feed', 'wp_staticize_emoji');
    remove_filter('comment_text_rss', 'wp_staticize_emoji');
    remove_filter('wp_mail', 'wp_staticize_emoji_for_email');

    add_filter('tiny_mce_plugins', function($plugins) {
        return is_array($plugins)
            ? array_diff($plugins, array('wpemoji'))
            : array();
    });
});

add_filter('wp_resource_hints', function($urls, $relation_type) {
    if ('dns-prefetch' === $relation_type) {
        $emoji_url = 'https://s.w.org/images/core/emoji/14.0.0/svg/';
        $urls = array_diff($urls, array($emoji_url));
    }
    return $urls;
}, 10, 2);

Gerçek Dünya Senaryosu: Müşteri Sitesi Vakası

Geçen yıl bir müşterimin WooCommerce sitesiyle ilgili şikayet aldım. Google PageSpeed Insights skoru 55-60 civarında takılıp kalmıştı. GTmetrix raporunda sürekli şu uyarılar çıkıyordu:

  • Eliminate render-blocking resources: wp-emoji-release.min.js listeleniyor
  • Reduce unused JavaScript: Emoji detection scripti sayılıyor
  • Avoid multiple page redirects: s.w.org DNS çözümlemesi yavaşlıyor

Emoji scriptini devre dışı bıraktıktan sonra yapılan test sonuçları:

  • Sayfa yükleme süresi: 3.8 saniyeden 3.2 saniyeye indi (yaklaşık 0.6 saniye kazanım)
  • PageSpeed Insights mobil skoru: 58’den 71’e çıktı
  • Toplam sayfa boyutu: ~15 KB azaldı
  • HTTP istek sayısı: 1 istek azaldı

Bu rakamlar küçük görünebilir ama konversiyon oranları üzerindeki etkisi daha belirgin oldu. Amazon’un kendi araştırmalarına göre her 100ms gecikme satışları %1 olumsuz etkiliyor.

Sıkça Yapılan Hatalar

Bu işlemi yaparken karşılaştığım yaygın hatalar şunlar:

  • Yanlış kanca önceliği: wp_head kancasından emoji kaldırırken öncelik değerini (7) doğru belirtmemek. WordPress bu scripti priority 7 ile ekliyor, bunu atlamak kancayı kaldıramamanıza yol açar.
  • TinyMCE’yi unutmak: Sadece frontend kancalarını kaldırıp TinyMCE eklentisini bırakmak. Editörde hâlâ emoji script yükleniyor.
  • DNS prefetch’i atlamak: Script kaldırılıyor ama s.w.org için DNS prefetch yönergesi HTML’de kalmaya devam ediyor.
  • Çocuk tema kullanmamak: Değişiklikleri ana tema functions.php‘sine yazmak. Tema güncellemesinde her şey gidiyor.
  • Cache temizlemeyi unutmak: Değişikliği yaptıktan sonra tüm cache katmanlarını (WP Cache, CDN, Varnish, tarayıcı) temizlememek.

Cache ve CDN ile Entegrasyon

Emoji scriptini kaldırdıktan sonra cache katmanlarınızı yenilemeniz gerekiyor:

# WP-CLI ile cache temizleme
wp cache flush

# Belirli bir sayfanın cache'ini temizle
wp cache delete "home" "options"

# W3 Total Cache kullanıyorsanız
wp w3-total-cache flush all

# WP Super Cache
wp super-cache flush

# Redis cache kullanıyorsanız
wp redis flush

# CloudFlare cache temizleme (API üzerinden)
curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/purge_cache" 
     -H "Authorization: Bearer API_TOKEN" 
     -H "Content-Type: application/json" 
     --data '{"purge_everything":true}'

functions.php’ye Güvenli Ekleme Pratiği

Her zaman söylediğim bir şey: functions.php‘ye kod eklemeden önce mutlaka yedek alın ve çocuk tema kullanın.

# Çocuk tema functions.php örnek yapısı
<?php
/**
 * Çocuk Tema Fonksiyonları
 * Ana tema güncellemelerinden bağımsız
 */

if (!defined('ABSPATH')) {
    exit('Direct access not allowed.');
}

// Ebeveyn tema stillerini yükle
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );
});

// Emoji desteğini devre dışı bırak
require_once get_stylesheet_directory() . '/inc/performance/emoji-disable.php';

Büyük projelerde emoji kapatma kodunu ayrı bir dosyaya taşımak ve require_once ile dahil etmek çok daha temiz bir yapı sağlıyor.

Sonuç

WordPress emoji scripti, siz farkında olmadan sitenizi yavaşlatan o küçük detaylardan biri. Devre dışı bırakmak ne kadar basit görünse de doğru yapılmadığında eksik kalıyor: Sadece wp_head kancasını kaldırmak yeterli değil, TinyMCE eklentisi ve DNS prefetch yönergesini de temizlemeniz gerekiyor.

Bu optimizasyonu tüm müşteri sitelerime standart olarak uyguluyorum. Tek başına devrim yaratmıyor elbette, ama diğer performans iyileştirmeleriyle birleşince (gereksiz scriptleri kaldırma, lazy loading, görüntü optimizasyonu, doğru cache yapılandırması) toplamda ciddi bir fark ortaya çıkıyor. Sysadmin olarak öğrendiğim en önemli şeylerden biri: Performans, büyük tek bir hamleden değil, binlerce küçük kararın birikiminden geliyor.

Emoji scriptini kapatmak da işte o küçük kararlardan biri. Şimdi kodu ekleyin, cache’i temizleyin ve PageSpeed skorunuzu tekrar ölçün.

Bir yanıt yazın

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