Core Web Vitals Nedir ve Neden Önemlidir?

Google sıralama algoritmasında doğrudan yer alan Core Web Vitals (Önemli Web Verileri), kullanıcı deneyimini ölçen üç temel metrikten oluşur. Başarılı bir dijital strateji için bu metriklerin optimize edilmesi zorunludur. Güncel SEO ve web geliştirme trendleri, hızın yalnızca bir teknik detay değil, doğrudan dönüşüm oranlarını belirleyen bir iş metriği olduğunu gösteriyor.

Temel Metrikler:

LCP (Largest Contentful Paint): Sayfanın ana içeriğinin yüklenme hızı (Hedef: < 2.5 sn).
INP (Interaction to Next Paint): Kullanıcı etkileşimlerine verilen sayfa tepki hızı (FID yerine geçen yeni standart, Hedef: < 200 ms).
CLS (Cumulative Layout Shift): Sayfa yüklenirken yaşanan görsel kaymalar (Hedef: < 0.1).

Adım 1: Largest Contentful Paint (LCP) İyileştirme Adımları

LCP, sayfanın ana görseli veya büyük metin bloğunun görünür hale gelme süresidir. Bu rehber adımlarını uygulayarak LCP değerini düşürün:

1. Görsel Kaynaklarını Optimize Edin

Görselleri WebP veya AVIF formatlarına dönüştürün.
Hero (ilk açılış) görseline fetchpriority="high" ve loading="eager" özellikleri ekleyin:

<img src="hero.avif" fetchpriority="high" loading="eager" alt="Ana Görsel" width="1200" height="600">

2. Kritik Kaynakları Önceden Yükleyin (Preload)

LCP görseli veya kritik font dosyaları için <link rel="preload"> etiketi kullanın:

<link rel="preload" fetchpriority="high" as="image" href="/assets/hero.avif" type="image/avif">

3. Sunucu Yanıt Süresini (TTFB) Azaltın

Cloudflare, Fastly veya CloudFront gibi CDN çözümleri kullanın.
Statik HTML sayfaları için Edge Cache yapılandırması kurun.
Gereksiz veritabanı sorgularını kaldırın ve Redis/Memcached ile önbellekleyin.

Adım 2: Interaction to Next Paint (INP) Optimizasyonu

Yeni standart INP, sayfa etkileşim gecikmelerini ölçer. JavaScript ana iş parçacığı (main thread) bloke edildiğinde INP puanı düşer.

1. Uzun Görevleri (Long Tasks) Parçalayın

50 ms üzerindeki JavaScript görevlerini bölün. Modern tarayıcılarda scheduler.yield() veya setTimeout kullanarak ana iş parçacığını serbest bırakın:

async function processTasks(tasks) {
  for (const task of tasks) {
    task.run();
    if ('scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    } else {
      await new Promise(r => setTimeout(r, 0));
    }
  }
}

2. Üçüncü Taraf Scriptleri (3rd Party JS) Geciktirin

Google Tag Manager, analitik araçları ve canlı destek scriptlerini defer, async ile çağırın veya kullanıcı ilk etkileşime girene kadar yüklemeyin.

Adım 3: Cumulative Layout Shift (CLS) Sıfırlama

Kullanıcı sayfada gezinirken öğelerin beklenmedik şekilde yer değiştirmesini engelleyin.

1. Medya ve Reklam Alanlarına Sabit Boyut Verin

Tüm görsel, video ve iframe etiketlerine width ve height veya CSS aspect-ratio değeri verin:

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

2. Web Fontları Optimize Edin

Font yüklenirken meydana gelen kaymaları (FOUT/FOIT) engellemek için CSS'te font-display: swap; ve font metriklerini eşitleyen size-adjust özelliklerini tanımlayın:

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

Modern Web Trendleri ve Hız Test Araçları

Hız optimizasyonunu sürekli bir süreç haline getirmek için doğru araçları kullanın:

Google PageSpeed Insights: Saha ve laboratuvar verilerini birlikte analiz edin.
Chrome DevTools: Performance sekmesinde Long Tasks ve Rendering süreçlerini inceleyin.
Search Console Core Web Vitals Raporu: URL bazlı toplu kullanıcı metriklerini takip edin.

Önemli Kural: En hızlı kod, hiç yazılmamış koddur. Harici kütüphane eklemeden önce native tarayıcı API'lerinin (IntersectionObserver, CSS aspect-ratio, native lazy-load) işinizi görüp görmediğini kontrol edin.