Core Web Vitals Nedir? 2025 Rehberi

Core Web Vitals Nedir?

Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için belirlediği temel performans metrikleridir. 2021'den itibaren doğrudan Google sıralamasını etkileyen bu metrikler, sitenizin gerçek kullanıcılar tarafından nasıl deneyimlendiğini gösterir.

2025 itibarıyla üç ana Core Web Vital metriği şunlardır:

1. LCP — Largest Contentful Paint (En Büyük İçerik Boyaması)
2. CLS — Cumulative Layout Shift (Kümülatif Düzen Kayması)
3. INP — Interaction to Next Paint (Sonraki Boyamaya Etkileşim)

Not: INP, Mart 2024'te FID'nin (First Input Delay) yerini aldı.

LCP: Yükleme Performansı

LCP, sayfanın görünen alanındaki en büyük içerik öğesinin (görsel, video veya büyük metin bloğu) ne zaman yüklendiğini ölçer.

LCP Eşikleri

LCP'yi Neyi Etkiler?

Genellikle LCP öğesi şunlardan biri olur:

• Hero görseli veya video
• Büyük başlık metni (H1)
• Arkaplan görseli

LCP Nasıl İyileştirilir?

1. Görsel Optimizasyonu

<!-- Öncelikli görseli preload edin -->
<link rel="preload" as="image" href="/hero.webp">

<!-- WebP formatı kullanın -->
<img src="/hero.webp" alt="Hero görseli" width="1200" height="630" loading="eager">

2. Sunucu Yanıt Süresini Kısaltın

• CDN (Content Delivery Network) kullanın
• Önbellekleme (caching) etkinleştirin
• TTFB (Time to First Byte) değerini 200ms altında tutun

Bu adımları daha kapsamlı ele aldığımız sayfa hızını nasıl artırabileceğinizi anlatan rehberimize göz atın.

3. Render-Blocking Kaynakları Kaldırın

<!-- JS dosyalarını defer ile yükleyin -->
<script src="app.js" defer></script>

<!-- Kritik olmayan CSS'i async yükleyin -->
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

CLS: Görsel Kararlılık

CLS, sayfa yüklenirken beklenmedik düzen kaymalarını ölçer. Bir butona tıklamak üzereyken reklam yüklenir ve buton kayar — işte bu CLS sorunudur.

CLS Eşikleri

CLS Nasıl Düzeltilir?

Görsellere boyut verin

<!-- ✅ Boyut belirlenmiş -->
<img src="foto.jpg" width="800" height="450" alt="Açıklama">

<!-- ❌ Boyut belirtilmemiş — layout shift yapar -->
<img src="foto.jpg" alt="Açıklama">

CSS aspect-ratio kullanın

.hero-image {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Font yükleme optimizasyonu

/* FOUT (Flash of Unstyled Text) önlemek için */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* veya optional */
}

Dinamik içerik için yer ayırın

/* Reklam alanı için sabit yükseklik */
.ad-container {
  min-height: 250px;
}

INP: Etkileşim Duyarlılığı

INP, kullanıcı bir sayfayla etkileşime girdiğinde (tıklama, klavye girişi) tarayıcının ne kadar sürede görsel güncelleme yaptığını ölçer. Mart 2024'te FID'nin yerini aldı.

INP Eşikleri

INP Nasıl İyileştirilir?

Uzun görevleri parçalayın

// ❌ Ana thread'i bloke eden uzun görev
function processLargeData(data) {
  // 500ms süren işlem
  data.forEach(item => heavyCalculation(item))
}

// ✅ Parçalara bölerek
async function processLargeData(data) {
  for (const chunk of chunkArray(data, 50)) {
    for (const item of chunk) heavyCalculation(item)
    await new Promise(resolve => setTimeout(resolve, 0)) // Nefes al
  }
}

JavaScript paketini küçültün

# Kullanılmayan kodu analiz edin
npx webpack-bundle-analyzer stats.json

Web Worker kullanın Yoğun hesaplamayı ana thread dışına taşıyın.

Core Web Vitals Nasıl Ölçülür?

1. Google PageSpeed Insights (Ücretsiz)

PageSpeed Insights adresinde URL'nizi girerek hem lab verisi hem de gerçek kullanıcı verisi görebilirsiniz.

2. Google Search Console

"Deneyim > Core Web Vitals" raporunda sitenizin tüm sayfalarının durumunu görebilirsiniz.

3. ucretsizseo.com Analiz Aracı (Ücretsiz)

Analiz aracımız LCP, CLS ve TBT değerlerinizi otomatik kontrol ederek Türkçe öneriler sunar.

İyileştirme Öncelik Sırası

1. LCP'ye odaklanın — En büyük etkiyi sağlar, genellikle görsel optimizasyonuyla çözülür
2. CLS'yi sıfıra yaklaştırın — Görsel boyutları ve dinamik içerik yönetimiyle
3. INP'yi optimize edin — JavaScript optimizasyonu gerektirir, en teknik olanıdır

Sonuç

Core Web Vitals, Google sıralamasında önemli bir faktör olsa da içerik kalitesi ve alaka hâlâ en belirleyici unsurdur. Teknik performansı iyi bir içerik stratejisiyle birleştirmek en iyi sonucu verir. Core Web Vitals'ın sayfa hızının SEO'ya etkisi içindeki rolünü ve mobil tarafını mobil SEO optimizasyonu rehberinde inceleyebilirsiniz.

Sitenizin Core Web Vitals değerlerini öğrenmek için ücretsiz analiz aracımızı kullanın.

İlgili içerikler: Site Hızı Nasıl Artırılır? • Sayfa Hızı SEO Etkisi • Teknik SEO Kontrol Listesi