Core Web Vitals: Sayfa Hızı ve SEO Rehberi

Core Web Vitals, Google'ın bir sayfanın gerçek kullanıcı deneyimini ölçtüğü üç temel performans metriğidir: yükleme hızı (LCP), etkileşime tepki (INP) ve görsel kararlılık (CLS). Bu metrikler hem kullanıcının sayfayı nasıl hissettiğini hem de — küçük ama gerçek bir faktör olarak — arama sıralamanızı etkiler. Bu yazıda her metriğin ne anlama geldiğini, hangi eşik değerlerini hedeflemeniz gerektiğini ve pratikte nasıl iyileştirileceğini anlatıyorum.

Core Web Vitals nedir ve neden önemli?

Google, sayfa deneyimini değerlendirmek için Chrome kullanıcılarından toplanan gerçek alan verisini (CrUX — Chrome User Experience Report) kullanır. Yani metrikleriniz laboratuvar testinde değil, gerçek ziyaretçilerinizin cihaz ve bağlantılarında ölçülür. Üç ana metrik şunlardır:

• LCP (Largest Contentful Paint) — Görünür alandaki en büyük içerik öğesinin (genelde bir görsel ya da başlık) ekrana çizilme süresi. Yükleme hızını temsil eder.
• INP (Interaction to Next Paint) — Kullanıcının tıklama, dokunma veya tuş girişine sayfanın görsel tepki verme gecikmesi. Mart 2024'te eski FID metriğinin yerini aldı ve artık etkileşim duyarlılığını ölçen resmi metriktir.
• CLS (Cumulative Layout Shift) — Sayfa yüklenirken öğelerin beklenmedik şekilde kayması; görsel kararlılığı ölçer.

SEO açısından bu metrikler bir sıralama faktörüdür, ancak içerik kalitesi kadar ağırlıklı değildir. Yine de eşit kalitedeki iki sayfa arasında hızlı olan öne geçer ve düşük dönüşüm/yüksek hemen çıkma oranı zaten dolaylı olarak sıralamayı etkiler.

Hedef eşik değerleri

Google her metrik için "iyi", "iyileştirme gerekli" ve "kötü" eşikleri tanımlar. Ölçüm, ziyaretçilerin %75'inin gördüğü değere (75. yüzdelik) göre yapılır:

• LCP: iyi ≤ 2,5 sn — kötü > 4 sn
• INP: iyi ≤ 200 ms — kötü > 500 ms
• CLS: iyi ≤ 0,1 — kötü > 0,25

Hedefiniz her üç metrikte de "iyi" bölgede kalmaktır. Mobil ve masaüstü ayrı ayrı değerlendirilir; mobil genelde daha zorludur, bu yüzden önceliğinizi oraya verin.

LCP nasıl iyileştirilir?

LCP genellikle ya yavaş sunucu yanıtı ya da büyük/geç yüklenen bir görselden kaynaklanır. İyileştirme adımları:

• En önemli görseli erken yükleyin. LCP öğesi bir hero görseliyse, onu lazy-load etmeyin ve fetchpriority="high" ile öne çekin.
• Modern görsel formatları kullanın (WebP/AVIF) ve doğru boyutta sunun; gereğinden büyük görseller LCP'yi şişirir.
• Kritik kaynakları önceden bağlayın.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<img src="hero.avif" fetchpriority="high" width="1200" height="630" alt="...">

Ayrıca sunucu yanıt süresini (TTFB) düşürmek için önbellekleme (örneğin Laravel'de php artisan optimize, sayfa cache, CDN) çoğu zaman en büyük kazancı sağlar.

INP nasıl iyileştirilir?

INP, ana iş parçacığının (main thread) ne kadar meşgul olduğuyla doğrudan ilgilidir. Kullanıcı tıkladığında JavaScript hâlâ ağır bir iş yürütüyorsa, tarayıcı yanıtı geciktirir. Çözümler:

• JavaScript miktarını azaltın ve kullanılmayan kodu ayıklayın; üçüncü taraf scriptleri (chat widget, analiz, reklam) çoğu INP probleminin kaynağıdır.
• Uzun görevleri bölün. Ağır hesaplamaları küçük parçalara ayırın veya requestIdleCallback / setTimeout ile erteleyin.
• Görsel geri bildirimi önceliklendirin. Tıklamadan sonra önce UI'yi güncelleyin, ağır işi sonraya bırakın.

button.addEventListener('click', () => {
  showSpinner();              // anlık görsel tepki
  requestAnimationFrame(() => {
    doExpensiveWork();        // ağır iş bir sonraki kareye
  });
});

CLS nasıl iyileştirilir?

CLS, sayfa yüklenirken bir öğenin yerinin kayıp diğer içeriği itmesiyle oluşur — örneğin geç yüklenen bir reklam metni aşağı atması. En etkili önlemler:

• Görsel ve video'lara her zaman width ve height verin (veya CSS aspect-ratio), böylece tarayıcı yeri önceden ayırır.
• Dinamik içerik için yer tutucu (placeholder) kullanın; reklam ve gömülü içeriğe sabit alan ayırın.
• Web fontlarını font-display: swap ile yükleyin ve mümkünse preload edin ki metin sıçraması azalsın.

Ölçüm araçları

İki tür veriyle çalışırsınız: laboratuvar (kontrollü test) ve alan (gerçek kullanıcı). İkisi de gerekli:

• PageSpeed Insights — hem CrUX alan verisini hem de Lighthouse lab skorunu birlikte gösterir; başlamak için en pratik araç.
• Search Console > Core Web Vitals raporu — sitenizin tamamındaki URL gruplarını "iyi / iyileştirme gerekli / kötü" olarak listeler.
• Chrome DevTools (Lighthouse + Performance paneli) — bir sayfayı derinlemesine analiz etmek için.
• web-vitals kütüphanesi — gerçek ziyaretçilerden metrik toplayıp analytics'e göndermek için.

Önemli not: INP ve CLS gibi metrikler etkileşim ve kaydırma boyunca birikir, bu yüzden lab testi her zaman gerçek deneyimi yansıtmaz. Alan verisini esas alın.

Sık Sorulan Sorular

FID hâlâ kullanılıyor mu?

Hayır. FID (First Input Delay), Mart 2024'te resmi olarak emekliye ayrıldı ve yerini INP aldı. INP, ilk etkileşimle sınırlı kalmayıp sayfadaki tüm etkileşimlerin tepkisini ölçtüğü için daha kapsamlı bir metriktir.

Core Web Vitals doğrudan sıralamamı yükseltir mi?

Tek başına büyük bir sıçrama beklemeyin. Bu metrikler bir sıralama sinyalidir ama içerik alaka düzeyi ve kalitesi çok daha ağır basar. En iyi yaklaşım, iyi içeriği hızlı bir sayfayla birleştirmektir.

Skorlarım PageSpeed'de neden dalgalanıyor?

Lighthouse lab testi her çalıştırmada ağ ve cihaz koşullarına göre değişebilir. Karar verirken tek bir testten çok, 28 günlük CrUX alan verisine bakın.

Sayfanız yavaş mı yoksa Core Web Vitals raporunuz kırmızı mı? Sitenizi denetleyip LCP, INP ve CLS'i hedef değerlere çekecek somut bir iyileştirme planı çıkarabilirim. Benimle iletişime geçin.