Core Web Vitals ve E-Ticaret SEO: Google'ın Gizli Puanlama Sistemi

2021'de Google'ın "Page Experience" güncellmesiyle birlikte Core Web Vitals, resmi bir sıralama faktörü haline geldi. Ancak Türkiye'deki e-ticaret sitelerinin büyük çoğunluğunun bu metrikleri hâlâ göz ardı ettiğini görüyoruz. Bu, sizi öne geçirecek bir rekabet avantajı sunuyor.

Core Web Vitals, kullanıcı deneyiminin üç kritik boyutunu ölçer: yükleme performansı, etkileşim yanıt hızı ve görsel stabilite. Bu üç metrik, Google'ın "siteni kullanmak nasıl bir deneyim?" sorusuna verdiği sayısal yanıttır.

Core Web Vitals Nedir?

1. LCP - Largest Contentful Paint (En Büyük İçerik Çizimi)

LCP, sayfanın görünür alanındaki en büyük içerik öğesinin (genellikle ana ürün görseli veya hero banner) yüklenmesi için geçen süreyi ölçer.

• İyi: 2.5 saniye veya altı
• Geliştirilmeli: 2.5 - 4 saniye
• Kötü: 4 saniyenin üzeri

• Ürün detay sayfasındaki ana ürün fotoğrafı
• Kategori sayfasındaki hero banner veya ilk ürün görseli
• Ana sayfa slider'ının ilk karesi

2. INP - Interaction to Next Paint (Etkileşimden Sonraki Çizim)

INP (2024'te FID'in yerini aldı), kullanıcının sayfayla etkileşime girmesinden (tıklama, dokunma, klavye girişi) sonra tarayıcının görsel olarak güncellenmesi için geçen süreyi ölçer.

• İyi: 200 milisaniye veya altı
• Geliştirilmeli: 200 - 500 milisaniye
• Kötü: 500 milisaniyenin üzeri

• Ürün görsellerinde farklı açı veya renk seçiminde geçişler
• Filtreleme butonlarına tıklama sonrası liste güncellemesi
• "Sepete Ekle" butonuna basıldıktan sonraki animasyon/güncelleme
• Sayfa içi tab geçişleri

3. CLS - Cumulative Layout Shift (Kümülatif Düzen Kayması)

CLS, sayfa yüklenirken görsel öğelerin beklenmedik şekilde yerinden kaymasını ölçer. Kullanıcı bir butona tıklamak üzereyken buton yukarı fırlarsa, bu kötü bir CLS sinyalidir.

• İyi: 0.1 veya altı
• Geliştirilmeli: 0.1 - 0.25
• Kötü: 0.25'in üzeri

• Boyutsuz görseller (width/height attribute eksikliği)
• Geç yüklenen reklamlar veya banner'lar
• Web fontlarının geç yüklenmesi (FOUT/FOIT)
• Dinamik olarak eklenen içerikler (bildirim bar'ları, cookie banner'ları)

Core Web Vitals'ı Ölçme Araçları

• Lab verisi: Kontrollü ortamda yapay test (PageSpeed, Lighthouse)
• Field verisi: Gerçek kullanıcıların deneyimi (CrUX)

Google sıralama için field verisini (gerçek kullanıcı verisi) kullanır. Lab verisi geliştirme sürecinde rehberlik eder.

LCP Optimizasyonu: E-Ticaret İçin Pratik Adımlar

Adım 1: LCP Öğesini Belirleyin

Sayfanızı PageSpeed Insights'ta analiz edin. "LCP element" bölümü size hangi öğenin LCP olduğunu gösterir. Genellikle bu, ürün detay sayfasındaki ana görseldir.

Adım 2: LCP Görselini Preload Edin

LCP öğesi bir görsel ise, tarayıcıya bu görseli öncelikli yüklemesini söyleyin:

<link rel="preload" as="image" href="/images/urun-ana-gorsel.webp" fetchpriority="high" />

Next.js kullanıyorsanız Image component'inde priority prop'u ekleyin:

<Image
  src="/images/urun-ana-gorsel.webp"
  alt="Ürün Ana Görseli"
  width={800}
  height={600}
  priority
/>

Adım 3: Görselleri Optimize Edin

• WebP veya AVIF formatına geçin (JPEG'e göre %25-50 küçük)
• Görsel boyutlarını responsive olarak sunun (srcset kullanın)
• Görüntüleme boyutundan büyük görseller yüklemeyin

Adım 4: Sunucu Yanıt Süresini Azaltın (TTFB)

LCP, Time to First Byte (TTFB) ile doğrudan ilişkilidir. Sunucunuz yavaş yanıt veriyorsa, LCP hiçbir zaman iyi olamaz.

• CDN kullanın (Cloudflare, AWS CloudFront vb.)
• Sunucu tarafı caching aktif edin
• Veritabanı sorgularını optimize edin
• Hosting planınızı yükseltin (paylaşımlı hosting'den VPS'e geçin)

Adım 5: Render-Blocking Resources'ı Ortadan Kaldırın

CSS ve JavaScript dosyaları sayfanın render edilmesini engelleyebilir:

<!-- Kötü: Render bloklayan CSS -->
<link rel="stylesheet" href="styles.css">

<!-- İyi: Critical CSS inline, geri kalanı async -->
<style>/* kritik CSS buraya */</style>
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

INP Optimizasyonu: Etkileşim Hızını Artırın

Sorunun Kaynağını Bulun

Chrome DevTools > Performance sekmesini kullanarak yavaş event handler'ları tespit edin. "Long Tasks" (50ms'yi aşan görevler) INP sorunlarının temel nedenidir.

Ağır JavaScript İşlerini Parçalayın

// Kötü: Ana thread'i 200ms bloklayan işlem
function heavyCalculation() {
  // 200ms süren ağır hesaplama
}

// İyi: setTimeout ile küçük parçalara bölme
function heavyCalculation() {
  setTimeout(() => {
    // İşlemin bir kısmı
    setTimeout(() => {
      // İşlemin geri kalanı
    }, 0);
  }, 0);
}

Üçüncü Taraf Script Etkisini Azaltın

E-ticaret sitelerinde sıkça kullanılan araçlar (chat widget, analytics, pixel) INP'yi olumsuz etkiler:

1. Her script'in INP üzerindeki etkisini ölçün
2. Kritik olmayan script'leri defer veya async ile yükleyin
3. Kullanılmayan script'leri kaldırın
4. Web Worker kullanımını değerlendirin

Sepete Ekle Butonu Optimizasyonu

Sepete ekle işlemi yavaşsa, kullanıcı deneyimi ciddi zarar görür:

// Optimized "Sepete Ekle" event handler
document.querySelector('#sepete-ekle').addEventListener('click', async (e) => {
  // Anında görsel geri bildirim
  e.currentTarget.textContent = 'Ekleniyor...';
  e.currentTarget.disabled = true;

  // API çağrısını arka planda yap
  const result = await addToCart(productId);

  // UI'yi güncelle
  if (result.success) {
    updateCartIcon(result.cartCount);
    showSuccessToast('Ürün sepete eklendi');
  }
  e.currentTarget.textContent = 'Sepete Ekle';
  e.currentTarget.disabled = false;
});

CLS Optimizasyonu: Görsel Stabilitenizi Sağlayın

Görsellere Her Zaman Boyut Belirtin

<!-- Kötü: Boyut belirtilmemiş, yüklenince kayma yapar -->
<img src="urun.jpg" alt="Ürün">

<!-- İyi: aspect-ratio korunuyor, yer ayrılıyor -->
<img src="urun.jpg" alt="Ürün" width="800" height="600">

Reklam ve Banner Alanları İçin Yer Ayırın

/* Reklam alanı için sabit boyut ayırın */
.reklam-alani {
  min-height: 250px;
  width: 100%;
}

Web Fontlarının Neden Olduğu CLS'i Önleyin

/* font-display: optional veya swap kullanın */
@font-face {
  font-family: 'SiteFont';
  src: url('font.woff2') format('woff2');
  font-display: optional; /* Eğer font yüklenmezse sistem fontu kullan */
}

Cookie Banner ve Bildirim Barlarını Dikkatli Yerleştirin

Sayfa yüklendikten sonra aniden beliren cookie banner'ları CLS'e neden olur. Çözüm: Bu alanı baştan sayfaya dahil edin, animasyonla gösterin.

E-Ticaret Sayfaları İçin Core Web Vitals Hedefleri

Ürün Detay Sayfası

Kategori / Listeleme Sayfası

Checkout / Sepet Sayfası

Checkout sayfalarında Core Web Vitals kritikliği daha da artar. Yavaş veya kayma yaşanan bir checkout, doğrudan sepet terk oranını artırır.

Core Web Vitals İzleme ve Raporlama

Google Search Console Entegrasyonu

Search Console > Core Web Vitals bölümü, sitenizin genel durumunu URL grupları bazında gösterir. Kötü ve geliştirilmesi gereken URL'leri öncelik sırasıyla çözün.

Gerçek Zamanlı İzleme

Bir web performans izleme aracı kurun:

// Web Vitals kütüphanesi ile gerçek kullanıcı izleme
import { getLCP, getINP, getCLS } from 'web-vitals';

getLCP(metric => {
  // Analytics'e gönderin
  sendToAnalytics('LCP', metric.value);
});

getINP(metric => {
  sendToAnalytics('INP', metric.value);
});

getCLS(metric => {
  sendToAnalytics('CLS', metric.value);
});

Sonuç: Core Web Vitals Rekabet Avantajınız Olabilir

Türkiye'deki e-ticaret sitelerinin büyük çoğunluğu Core Web Vitals'a gereken önemi vermez. Bu, "iyi" puanlara ulaşan sitelerin hem sıralama avantajı elde ettiği hem de kullanıcıları memnun ederek dönüşüm oranlarını artırdığı anlamına gelir.

Daha fazla bilgi için E-Ticaret Teknik SEO Rehberi ve Sayfa Hızı Optimizasyonu yazılarımıza göz atın.