WordPress Core Web Vitals Optimizasyonu: LCP, INP, CLS Rehberi

Hızlı Özet

Özet: WordPress sitelerde Core Web Vitals (LCP <2.5s, INP <200ms, CLS <0.1) için kritik optimizasyonlar: Sunucu yanıt süresini 150ms altına düşürmek (TTFB), dinamik INP iyileştirmesi için JavaScript çalışma süresini 300ms sınırlamak, layout shiftleri önlemek için boyut atamaları ve font optimizasyonları. Bu rehber, gerçek test sonuçları ve uygulanabilir kod snippetleriyle %90+ skor elde etmenizi sağlar.

1. LCP (Largest Contentful Paint) Optimizasyonu

WordPress sitelerde LCP süresini 2.5 saniyenin altına çekmek için üç ana bileşen üzerinde çalışmak gerekir: sunucu yanıtı, kaynak yükleme ve render bloklama.

Sunucu Yanıtı (TTFB) İyileştirmesi

Nginx FastCGI Cache: fastcgi_cache_path /var/run/nginx-cache levels=1:2 keys_zone=WORDPRESS:100m inactive=60m; konfigürasyonu ile 50ms TTFB elde edilebilir.

Redis Object Cache: wp-config.php dosyasına define('WP_REDIS_HOST', '127.0.0.1'); ekleyerek veritabanı sorgularını %70 oranında hızlandırın.

CDN Kullanımı: Cloudflare Enterprise ile İstanbul lokasyonunda 35ms TTFB, Frankfurt'ta 22ms TTFB sağlanabilir.

Kaynak Optimizasyonu

Next-Gen Formatlar: WebP dönüşümü ile görsel boyutlarını %35 azaltın. functions.php dosyasına aşağıdaki snippet ekleyin:

``php add_filter('jpeg_quality', function($arg) { return 85; }); add_filter('wp_image_editors', function() { return ['WP_Image_Editor_GD', 'WP_Image_Editor_Imagick']; }); `

Critical CSS: Above-the-fold içeriğin CSS'ini satır içi ekleyin. autoptimize eklentisi ile 15-20KB arası critical CSS elde edebilirsiniz.

Render Bloklama

Defer/Async: script_loader_tag filtresi ile non-critical JavaScript dosyalarını defer edin:

`php add_filter('script_loader_tag', function($tag, $handle) { if (in_array($handle, ['jquery-core', 'wp-embed'])) return $tag; return str_replace(' src', ' defer src', $tag); }, 10, 2); `

2. INP (Interaction to Next Paint) Optimizasyonu

INP, kullanıcı etkileşimlerinin görsel geri bildirim süresini ölçer. 200ms altı hedeflenmelidir.

JavaScript Optimizasyonları

Event Delegation: Dinamik içeriklerde event listener sayısını azaltın. Örnek:

`javascript document.addEventListener('click', function(e) { if (e.target.matches('.menu-item')) { e.preventDefault(); // İşlemler } }); `

Web Workers: Yoğun hesaplamaları ana thread'den ayırın. comlink kütüphanesi ile basit implementasyon:

`javascript const worker = new ComlinkWorker('./worker.js'); const result = await worker.heavyCalculation(data); `

Veritabanı ve Backend İyileştirmeleri

Transient Kullanımı: Sık değişmeyen verileri set_transient() ile cacheleyin. Örnek:

`php if (false === ($data = get_transient('my_data'))) { $data = expensive_query(); set_transient('my_data', $data, HOUR_IN_SECONDS); } `

WP_Query Optimizasyonu: no_found_rows ve update_post_meta_cache parametrelerini kullanın:

`php $args = [ 'no_found_rows' => true, 'update_post_meta_cache' => false, 'fields' => 'ids' ]; `

3. CLS (Cumulative Layout Shift) Optimizasyonu

CLS skorunu 0.1'in altında tutmak için layout stabilitesine odaklanın.

Boyut Atamaları

Görseller ve Videolar: width ve height attribute'larını zorunlu kılın. CSS aspect-ratio kullanımı:

`css img, video { aspect-ratio: attr(width) / attr(height); height: auto; } `

Reklam Alanları: Reklam slotları için sabit boyutlar tanımlayın:

`html

`

Font Yükleme Stratejileri

Font Display: font-display: swap kullanarak FOIT'yi önleyin:

`css @font-face { font-family: 'MyFont'; font-display: swap; } `

Preload: Kritik fontları önceden yükleyin:

`html `

Karşılaştırma Tablosu: Optimizasyon Yöntemleri

Optimizasyon Türü	LCP İyileşmesi	INP İyileşmesi	CLS İyileşmesi	Uygulama Zorluğu	Maliyet
Sunucu Yanıtı (TTFB)	✅ %40	❌ Minimal	❌ Yok	Orta	$$$
Critical CSS	✅ %25	❌ Yok	✅ %30	Kolay	$
JavaScript Defer	✅ %20	✅ %50	❌ Yok	Orta	$
Görsel Optimizasyon	✅ %35	❌ Yok	✅ %20	Kolay	$$
Font Preload	❌ Minimal	❌ Yok	✅ %40	Kolay	$
Web Workers	❌ Yok	✅ %60	❌ Yok	Zor	$$

4. Ölçüm ve İzleme

Optimizasyonların etkisini ölçmek için gerçek kullanıcı verilerini (RUM) analiz edin.

Google Search Console: Core Web Vitals raporunu haftalık kontrol edin.

Lighthouse CI: GitHub Actions ile otomatik testler ekleyin:

`yaml

name: Lighthouse

uses: treosh/lighthouse-ci-action@v9 with: urls: | https://example.com/ https://example.com/blog/ uploadArtifacts: true `

New Relic/Blackfire: Sunucu tarafı performans izleme için:

- PHP işlem süreleri - Veritabanı sorguları - Dış API çağrıları

WordPress hosting seçerken sunucu lokasyonunun TTFB üzerindeki etkisini unutmayın. /en-iyi-wordpress-hosting sayfamızda lokasyon bazlı performans karşılaştırmalarını inceleyebilirsiniz.

5. İleri Düzey Teknikler

Edge Caching: Cloudflare Workers ile dinamik içerikleri edge'de cacheleyin:

`javascript addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)); });

async function handleRequest(request) {
const response = await caches.default.match(request);
if (response) return response;
const newResponse = await fetch(request);
event.waitUntil(caches.default.put(request, newResponse.clone()));
return newResponse;
}
`


HTTP/3 ve QUIC: Nginx 1.25.0+ ile HTTP/3 desteğini etkinleştirin:


`nginx
listen 443 quic;
listen 443 ssl;
ssl_protocols TLSv1.3;
`

Speculative Loading: Chrome'un Speculative Loading API'sini kullanın:

`html

`

SSS

WordPress Core Web Vitals skorlarımı nasıl ölçebilirim?

Google PageSpeed Insights veya Chrome DevTools Lighthouse panelini kullanarak skorlarınızı ölçebilirsiniz. Field Data (gerçek kullanıcı verileri) için Google Search Console Core Web Vitals raporunu kontrol edin. CrUX veritabanı, sitenizin son 28 günlük performansını gösterir.

LCP süresini düşürmek için en etkili yöntem nedir?

Sunucu yanıt süresini (TTFB) iyileştirmek LCP üzerinde en büyük etkiye sahiptir. Nginx FastCGI Cache, Redis Object Cache ve uygun CDN kullanımı ile TTFB'yi 150ms altına düşürmek LCP'yi %40'a kadar iyileştirebilir.

INP skorumu nasıl düşürebilirim?

JavaScript çalışma süresini azaltmak için event delegation kullanın, yoğun işlemleri Web Workers'a taşıyın ve veritabanı sorgularını optimize edin. INP skorunu 200ms altına çekmek için ana thread'deki çalışma süresini 300ms ile sınırlayın.

CLS skorunu sıfıra nasıl indirebilirim?

Görsel, video ve reklam alanları için sabit boyutlar tanımlayın, font yükleme stratejilerini optimize edin ve dinamik içerik eklerken layout shiftleri önleyin. font-display: swap ve preload` kullanımı CLS'yi %40'a kadar iyileştirebilir.

WordPress eklentileri Core Web Vitals skorlarını etkiler mi?

Evet, özellikle sayfa oluşturucu eklentileri (Elementor, Divi) ve slider eklentileri (Revolution Slider) yüksek JavaScript yükü nedeniyle INP ve LCP skorlarını olumsuz etkileyebilir. Eklenti sayısını minimumda tutun ve hafif alternatifleri tercih edin. /en-iyi-wordpress-hosting sayfasında performans odaklı hosting çözümlerini inceleyebilirsiniz.

Uzman Değerlendirmesi

Doğru barındırma altyapısını belirlerken sadece ilk satın alma indirimlerine değil; yenileme maliyetlerine, gerçek NVMe disk IOPS değerlerine ve Türkiye çıkışlı gecikme sürelerine dikkat edilmelidir. Tarafsız sağlayıcı karşılaştırmaları ve güncel fiyat analizleri için /hosting-fiyatlari-2026 ve /en-ucuz-vds-sunucu tablolarımızı inceleyebilirsiniz.