Core Web Vitals ve Sayfa Açılış Hızı İyileştirme Rehberi

Core Web Vitals Metrikleri Nelerdir?

Google sıralama algoritmasında doğrudan etken olan Core Web Vitals, kullanıcı deneyimini ölçen üç temel performans metriğinden oluşur. Her dijital ajans ve web geliştirici için bu metrikleri optimize etmek kritik SEO kuralıdır.

• LCP (Largest Contentful Paint): Sayfadaki ana görsel veya metin bloğunun yüklenme süresi. İdeal değer: 2.5 saniye altı.
• INP (Interaction to Next Paint): Sayfadaki tüm etkileşimlerin ortalama gecikme süresi (FID yerine geldi). İdeal değer: 200 ms altı.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken öğelerin kayma miktarı. İdeal değer: 0.1 altı.

Adım 1: LCP Değerini İyileştirme (Yükleme Hızı)

LCP skorunu düşürmek için ana yükü oluşturan hero görseli, başlık bloğu veya video kaynakları hızla sunulmalıdır.

1.1. Kritik Kaynaklara Öncelik Verme

Hero görselini tarayıcının önceliklendirmesi için fetchpriority ve preload kullanın:

<link rel='preload' fetchpriority='high' as='image' href='/hero.webp' type='image/webp'>
<img src='/hero.webp' alt='Ana Banner' fetchpriority='high' loading='eager'>

1.2. Görsel Boyutlandırma ve WebP/AVIF Dönüşümü

Yeni nesil görsel formatları modern web siteleri için standarttır. Görselleri sıkıştırın, gereksiz yüksek çözünürlüklü medya göndermeyin.

Adım 2: INP Değerini İyileştirme (Etkileşim Hızı)

INP, JavaScript ana iş parçacığının (main thread) uzun süreli kilitlenmesini önlemeyi gerektirir.

2.1. Uzun Görevleri (Long Tasks) Bölme

50 ms üzerindeki JS görevleri kullanıcı girdilerini geciktirir. scheduler.yield() veya setTimeout ile işleri parçalayın:

async function runHeavyTask() {
  for (const item of largeDataset) {
    processItem(item);
    if (scheduler.yield) {
      await scheduler.yield();
    } else {
      await new Promise(r => setTimeout(r, 0));
    }
  }
}

2.2. Kullanılmayan JS Kütüphanelerini Temizleme

Devasa kütüphaneler yerine yerel (native) tarayıcı API'lerini kullanın. Harici scriptleri defer veya async ile yükleyin.

Adım 3: CLS Değerini Sıfıra İndirme (Görsel Kararlılık)

Görsel kaymaları kullanıcı deneyimini bozar ve tıklama hatalarına yol açar.

3.1. Medya Öğelerine Sabit Boyut Tanımlama

Tüm <img>, <video> ve reklam alanlarına CSS aspect-ratio veya genişlik-yükseklik öznitelikleri verin:

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

3.2. Web Font Kaymalarını (FOUT/FOIT) Engelleme

Fontlar yüklenirken metin zıplamasını engellemek için CSS font-display: swap; kuralını uygulayın ve fontları preload edin.

Modern Web Trendleri ve Performans Stratejileri

Modern web mimarisinde performans sonradan eklenen bir özellik değil, mimari bir karardır. CDN seviyesinde önbellekleme (Edge caching) ve gereksiz JS yükünden kaçınmak temel prensiptir.

• SSR / SSG Tercihi: Tamamen istemci taraflı (CSR) uygulamalar yerine statik veya sunucu taraflı çıktı üretin.
• HTTP/3 ve Brotli: Sunucuda Brotli sıkıştırma ve HTTP/3 protokolünü aktif edin.
• CSS content-visibility: Ekran dışı DOM öğelerini tarayıcıya sadece görünür olduğunda hesaplatın: content-visibility: auto;.

Performans Kontrol Listesi

1. Google PageSpeed Insights ve Lighthouse üzerinden test yapın.
2. LCP elemanını tespit edin, fetchpriority='high' ekleyin.
3. CSS ve JS dosyalarını minify edin.
4. Harici reklam ve izleme kodlarını GTM üzerinden gecikmeli tetikleyin.
5. Tüm görsellerde loading='lazy' (LCP hariç) ve aspect-ratio kontrolü yapın.