WordPress Tema Geliştirmede Performans İpuçları

WordPress ile tema geliştirirken en çok gözden kaçan şey performanstır. Tema görsel olarak harika olabilir ama yüklenmesi 5 saniyeyi geçiyorsa ziyaretçilerin yarısını daha sayfa açılmadan kaybedersiniz. Kendi geliştirdiğim temalarda Lighthouse performans skorunu 90+’a çıkarmak için uyguladığım teknikleri bu yazıda paylaşıyorum.

Bu ipuçlarının çoğu eklenti gerektirmiyor; doğrudan tema kodunda yapılabilecek optimizasyonlar. Eğer bir tema geliştiricisiyseniz veya kendi temanızı özelleştiriyorsanız bu yazı tam size göre.

Neden tema performansı bu kadar önemli?

Google, sayfa hızını resmi bir sıralama faktörü olarak kullanıyor. Ama SEO bir yana, asıl önemli olan kullanıcı deneyimi. Araştırmalar, sayfa yükleme süresinin 1 saniyeden 3 saniyeye çıkması durumunda hemen çıkma oranının %32 arttığını gösteriyor. 5 saniyeye çıktığında bu oran %90’a ulaşıyor.

Tema, bir WordPress sitesinin yüklenme süresini doğrudan etkileyen en büyük faktörlerden biridir. Kötü yazılmış bir tema, en güçlü sunucuda bile yavaş çalışır. İyi optimize edilmiş bir tema ise paylaşımlı hosting’de bile tatmin edici hızlar sunar.

Gereksiz script ve stilleri temizlemek

WordPress varsayılan olarak birçok script ve stil dosyası yükler. jQuery, wp-embed, dashicons, Gutenberg blok stilleri gibi kaynaklar her sayfada yüklenir ama çoğu zaman tema tarafından kullanılmaz. Bunları kaldırmak ilk ve en etkili optimizasyondur.

function tema_gereksiz_scriptleri_kaldir() {
    // jQuery (tema jQuery kullanmıyorsa)
    if (!is_admin()) {
        wp_dequeue_script('jquery');
        wp_deregister_script('jquery');
    }

    // WordPress embed
    wp_dequeue_script('wp-embed');

    // Dashicons (admin değilse)
    if (!is_admin()) {
        wp_dequeue_style('dashicons');
    }

    // Gutenberg blok kütüphanesi stilleri
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    wp_dequeue_style('wc-blocks-style'); // WooCommerce blok stilleri

    // Global styles (tema desteklemiyorsa)
    wp_dequeue_style('global-styles');
}
add_action('wp_enqueue_scripts', 'tema_gereksiz_scriptleri_kaldir', 100);

Bu tek fonksiyon bile ortalama bir WordPress sitesinde 4-6 HTTP isteğini ve 100-200 KB civarında gereksiz yükü ortadan kaldırır. Önemli olan, kaldırdığınız kaynakların gerçekten kullanılmadığından emin olmaktır. Sitenizi her değişiklikten sonra test edin.

Font optimizasyonu

Web fontları sayfa performansını en çok etkileyen unsurlardan biridir. Bir Google Fonts isteği hem DNS çözümlemesi hem de font dosyasının indirilmesini gerektirir, bu da kolayca 200-500ms gecikme demektir.

Yerel font barındırma

Google Fonts’u CDN’den yüklemek yerine font dosyalarını temaya dahil edip yerel olarak sunmak hem GDPR uyumluluğu hem performans açısından daha iyidir:

@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-v18-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter-v18-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

font-display: swap

font-display: swap kullanmak kritiktir. Bu özellik, font dosyası indirilene kadar sistem fontunu gösterir ve FOIT (Flash of Invisible Text) sorununu önler. Kullanıcı metni hemen görür, font yüklenince yumuşak bir geçiş olur.

Preconnect ile bağlantıyı önceden kurmak

Eğer harici bir font CDN’i kullanmak zorundaysanız preconnect ile DNS çözümlemesini önceden başlatın:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Ama en iyi performans her zaman yerel barındırmadadır. Google Webfonts Helper aracıyla font dosyalarını kolayca indirebilirsiniz.

Görsel optimizasyonu ve lazy loading

Görseller genellikle bir web sayfasının toplam boyutunun %50-70’ini oluşturur. Doğru optimizasyon ile sayfa boyutunu dramatik şekilde azaltabilirsiniz.

WebP formatı

WebP, JPEG’e göre %25-35 daha küçük dosya boyutu sunar ve tüm modern tarayıcılar tarafından desteklenir. WordPress 5.8’den itibaren WebP yüklemeyi native olarak destekliyor. Temada srcset ve sizes attribute’larını doğru kullanarak tarayıcının en uygun boyutu ve formatı seçmesini sağlayın.

Native lazy loading

WordPress 5.5’ten itibaren görsellere otomatik olarak loading="lazy" eklenir. Ancak burada önemli bir istisna var: hero görseli ve ekranın üst kısmında (above the fold) görünen görseller için lazy loading devre dışı bırakılmalıdır. Aksi halde LCP metriği olumsuz etkilenir:

// Hero görseli için lazy loading'i kaldır
function tema_hero_lazy_loading_kaldir($attr, $attachment, $size) {
    // İlk görsel için lazy loading'i kaldır
    if (is_singular() && in_the_loop() && $GLOBALS['wp_query']->current_post === 0) {
        $attr['loading'] = 'eager';
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'tema_hero_lazy_loading_kaldir', 10, 3);

Görsel boyutlarını belirtmek

Her <img> etiketine width ve height attribute’ları eklemek CLS (Cumulative Layout Shift) sorunlarını önler. WordPress bunu otomatik yapar ama özel şablonlarda manuel eklenen görseller için dikkatli olun.

CSS ve JavaScript optimizasyonu

Kritik CSS ve render-blocking kaynaklar

Tarayıcı, CSS dosyası tamamen yüklenene kadar sayfayı render etmez. Bu yüzden büyük CSS dosyaları doğrudan yükleme süresini etkiler. İki strateji uyguluyorum:

Kritik CSS’i inline olarak eklemek: Ekranın üst kısmında görünen içerik için gereken minimum CSS’i <style> etiketi içinde doğrudan HTML’e gömmek
Geri kalan CSS’i asenkron yüklemek: media="print" onload="this.media='all'" tekniğiyle kritik olmayan stilleri ertelemek

JavaScript yükleme stratejisi

WordPress’te script’leri wp_enqueue_script() ile yüklerken in_footer parametresini true yaparak footer’a taşıyın. Ek olarak, kritik olmayan script’lere defer veya async attribute’u ekleyin:

function tema_script_defer($tag, $handle, $src) {
    $defer_scripts = ['tema-slider', 'tema-lightbox', 'tema-analytics'];

    if (in_array($handle, $defer_scripts)) {
        return str_replace(' src=', ' defer src=', $tag);
    }

    return $tag;
}
add_filter('script_loader_tag', 'tema_script_defer', 10, 3);

Veritabanı ve cache stratejileri

Tema tarafında yapılabilecek veritabanı optimizasyonları genellikle göz ardı edilir ama büyük fark yaratır.

Transient API

Sık tekrarlanan ve ağır sorguları WordPress Transient API ile önbelleğe alabilirsiniz. Örneğin, sidebar’daki popüler yazılar listesini her sayfa yüklemesinde sorgulamak yerine 1 saatlik bir cache kullanın:

function tema_populer_yazilar_getir() {
    $cache = get_transient('tema_populer_yazilar');

    if ($cache !== false) {
        return $cache;
    }

    $yazilar = new WP_Query([
        'posts_per_page' => 5,
        'orderby' => 'comment_count',
        'order' => 'DESC',
        'no_found_rows' => true, // sayfalama gerekmediğinde
        'update_post_meta_cache' => false,
        'update_post_term_cache' => false,
    ]);

    set_transient('tema_populer_yazilar', $yazilar->posts, HOUR_IN_SECONDS);

    return $yazilar->posts;
}

Object cache ile Redis

Sunucunuzda Redis veya Memcached varsa, WordPress object cache’i bu sistemlerle entegre etmek veritabanı sorgularını dramatik şekilde azaltır. Kendi VPS’imde Redis kullanıyorum ve ortalama bir sayfa yüklemesinde veritabanı sorgu sayısı 45’ten 12’ye düştü.

Sorgu optimizasyonu

WP_Query kullanırken gereksiz veri çekmekten kaçının:

no_found_rows => true — Sayfalama gerekmediğinde toplam satır sayısını hesaplatmayın
update_post_meta_cache => false — Meta veri gerekmediğinde cache güncellemesini atlayın
update_post_term_cache => false — Kategori/etiket bilgisi gerekmediğinde
fields => 'ids' — Sadece ID’ler yeterliyse tam post nesnelerini çekmeyin

Core Web Vitals hedefleri

Google’ın Core Web Vitals metrikleri, tema performansının ölçülebilir göstergeleridir. Hedeflenmesi gereken değerler:

LCP (Largest Contentful Paint): 2.5 saniyenin altı — hero görseli ve sunucu yanıt süresiyle doğrudan ilişkili
INP (Interaction to Next Paint): 200ms altı — JavaScript yükü ve event handler’ların verimliliğiyle ilişkili
CLS (Cumulative Layout Shift): 0.1 altı — görsel boyutları, font yükleme stratejisi ve dinamik içerikle ilişkili

Bu metrikleri düzenli olarak PageSpeed Insights ile ölçün. Lab verileri (Lighthouse) yanıltıcı olabilir; asıl önemli olan gerçek kullanıcı verileridir (CrUX raporu). SEO’nun tema performansıyla ilişkisi hakkında daha fazla bilgi için SEO Uyumlu WordPress Teması Nasıl Olmalı? yazıma göz atabilirsiniz.

Sunucu tarafı optimizasyonlar

Tema optimizasyonu kadar hosting seçimi de önemlidir. Paylaşımlı hosting’den VPS’e geçmek genellikle en büyük performans sıçramasını sağlar. Kendi sunucumda Docker ile izole WordPress container’ları çalıştırıyorum, bu sayede her site kendi kaynaklarını kullanıyor ve birbirini etkilemiyor.

PHP sürümü: Her zaman en güncel PHP sürümünü kullanın. PHP 8.3, PHP 7.4’e göre %20-40 daha hızlıdır
OPcache: PHP OPcache’in aktif olduğundan emin olun
Gzip/Brotli sıkıştırma: Nginx veya Apache’de metin tabanlı kaynaklar için sıkıştırmayı aktifleştirin
HTTP/2 veya HTTP/3: Çoklu kaynak yüklemeyi paralelleştirmek için
CDN: Statik kaynakları Cloudflare gibi bir CDN üzerinden sunun

Performans test araçları

Tema performansını ölçmek ve sorunları tespit etmek için kullandığım araçlar:

PageSpeed Insights — Google’ın resmi aracı, hem lab hem saha verileri
WebPageTest — Detaylı waterfall analizi ve çoklu lokasyon testi
Chrome DevTools → Performance sekmesi — Gerçek zamanlı profiling
Chrome DevTools → Network sekmesi — HTTP istek analizi
DebugBear — Core Web Vitals odaklı izleme
Query Monitor eklentisi — WordPress veritabanı sorguları ve hook analizi

Sıkça sorulan sorular

WordPress sitemin hızını nasıl ölçerim?

En güvenilir yol PageSpeed Insights kullanmaktır. Hem laboratuvar verisi (Lighthouse simülasyonu) hem de gerçek kullanıcı verileri (Chrome UX Report) sunar. Siteyi birden fazla sayfadan test edin — sadece anasayfayı değil, blog yazıları ve ürün sayfalarını da ölçün.

Hangi cache eklentisini kullanmalıyım?

Eğer Nginx kullanıyorsanız sunucu seviyesinde FastCGI cache en performanslı çözümdür ve eklenti gerektirmez. Eklenti kullanmanız gerekiyorsa WP Super Cache (basit, güvenilir) veya W3 Total Cache (gelişmiş ayarlar) iyi seçeneklerdir. Ücretli seçeneklerden WP Rocket kullanım kolaylığıyla öne çıkar.

Lighthouse skorum düşük, nereden başlamalıyım?

Lighthouse raporundaki “Opportunities” bölümüne bakın; tahmini tasarruf süresine göre sıralanmış öneriler görürsünüz. Genellikle en büyük kazanımlar şu sırayla gelir: gereksiz script’leri kaldırmak, görselleri optimize etmek, fontları yerel barındırmak ve render-blocking CSS’i çözmek.

Paylaşımlı hosting’de performans artırılabilir mi?

Evet, ama bir noktadan sonra sınıra ulaşırsınız. Tema optimizasyonu, cache eklentisi ve CDN kullanarak paylaşımlı hosting’de bile 80+ Lighthouse skoru elde etmek mümkündür. Ancak tutarlı olarak 90+ hedefliyorsanız VPS veya managed WordPress hosting’e geçiş kaçınılmaz olur.

jQuery kullanmayan tema mı geliştirmeliyim?

Mümkünse evet. jQuery 85 KB’lık bir kütüphanedir ve modern JavaScript API’leri (querySelector, fetch, IntersectionObserver) aynı işlevleri daha hafif şekilde sunar. Kendi temalarımda jQuery’ye hiç bağımlılık olmadan geliştirme yapıyorum. Ancak WooCommerce gibi jQuery’ye bağımlı eklentiler kullanıyorsanız jQuery’yi kaldırmak sorunlara yol açabilir.

WordPress temanızın performansını optimize etmek veya sıfırdan performans odaklı bir tema geliştirmek istiyorsanız iletişim sayfamdan bana ulaşabilirsiniz. Sorularınızı aşağıdaki yorum bölümünden de paylaşabilirsiniz.