Google Sitenizi Neden Sevmiyor? Core Web Vitals Cehenneminden Çıkıp Skorlarınızı Yeşile Döndürmenin Pratik Yolu

Giriş: Kırmızı Rengin Utancı

O anı her geliştirici yaşamıştır. Gururla inşa ettiğiniz web sitesini Google PageSpeed Insights'a yapıştırırsınız ve saniyeler sonra o acımasız kırmızı renkle yüzleşirsiniz: Performans: 35. Kullanıcılar sitenizin yavaş açıldığından şikayetçidir, Google'da sıralamanız gizemli bir şekilde düşmektedir ve ne yaparsanız yapın, o skor bir türlü yeşile dönmez. Hoş geldiniz, 'Core Web Vitals Cehennemi'ne.

Ancak bu durum kader değil. Google'ın sitenizi 'sevmesi' ya da 'sevmemesi' keyfi bir durum değildir. Bu, kullanıcı deneyimini ölçen somut, anlaşılabilir ve en önemlisi, optimize edilebilir üç temel metriğe dayanır: Core Web Vitals. Bu rehber, sizi bu cehennemden çıkarıp skorlarınızı güvenli yeşil bölgeye taşıyacak pratik yol haritanız olacak.

Bölüm 1: Düşmanı Tanımak - Core Web Vitals'ın Üç Atlısı

Google, kullanıcı deneyimini üç ana eksende ölçer: Yükleme hızı, etkileşim hızı ve görsel kararlılık.

1. LCP (Largest Contentful Paint - En Büyük İçerikli Boyama)

Nedir? Ekranın görünür alanındaki en büyük metin bloğunun veya görselin yüklenme süresidir. Kullanıcının "Bu site gerçekten yükleniyor mu?" sorusuna cevap verir.
Hedef: 2.5 saniyenin altında.

2. INP (Interaction to Next Paint - Sonraki Boyamaya Etkileşim)

Nedir? Kullanıcının bir butona tıklaması, bir forma yazması gibi bir etkileşimde bulunduğu andan, ekranın bu etkileşime gözle görülür bir yanıt verdiği ana kadar geçen süredir. Sitenizin ne kadar 'tepkisel' olduğunu ölçer. (Not: INP, eski metrik olan FID'in yerini almıştır).
Hedef: 200 milisaniyenin altında.

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

Nedir? Sayfa yüklenirken yaşanan beklenmedik düzen kaymalarının toplamını ölçer. Tam bir butona tıklayacakken, üstte yüklenen bir reklam yüzünden butonun aşağı kayması ve yanlışlıkla başka bir şeye tıklamanız CLS'nin en sinir bozucu örneğidir.
Hedef: 0.1'in altında.

Bölüm 2: Savaş Planı - Metrikleri Optimize Etme Sanatı

Şimdi her bir metriği nasıl yeşile döndüreceğimizi adım adım, kod örnekleriyle inceleyelim.

LCP'yi Fethetmek: Yükleme Performansı

• Görsel Optimizasyonu: LCP'nin en büyük düşmanı, optimize edilmemiş büyük görsellerdir.

  <!-- YANLIŞ -->
  <img src="kahraman.jpg" alt="...">
  
  <!-- DOĞRU -->
  <img src="kahraman.webp" 
       srcset="kahraman-480w.webp 480w, kahraman-800w.webp 800w"
       sizes="(max-width: 600px) 480px, 800px"
       alt="..." loading="lazy" width="800" height="450">

  Ne yaptık? Modern format (WebP/AVIF) kullandık, farklı ekran boyutları için farklı resimler sunduk (srcset), tarayıcıya hangi resmi seçeceğini söyledik (sizes) ve ekranın altındaki görseller için 'lazy loading' kullandık.
• Render-Blocking Kaynakları Eleme: CSS ve JavaScript dosyaları, tarayıcının sayfayı çizmesini engelleyebilir.

  <!-- CSS -->
  <!-- Kritik olmayan CSS'i asenkron yükle -->
  <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
  
  <!-- JavaScript -->
  <!-- Script'leri body'nin sonuna taşı veya defer/async kullan -->
  <script src="main.js" defer></script>

• Sunucu Yanıt Süresini (TTFB) Azaltma: İyi bir hosting, CDN kullanımı ve sunucu taraflı önbellekleme (caching) ile sunucunuzun ilk yanıtını hızlandırın.

INP'yi Dizginlemek: Etkileşim Hızı

• Uzun JavaScript Görevlerini Bölmek: Tarayıcının ana iş parçacığını (main thread) saatlerce meşgul eden tek bir büyük JavaScript fonksiyonu, sitenizi tamamen dondurur.

  // YANLIŞ: 50ms'den uzun süren her şey tehlikelidir.
  function myLongTask() {
    for (let i = 0; i < 1000000000; i++) { /* ... ağır işlem ... */ }
  }
  
  // DOĞRU: Görevi küçük parçalara bölüp tarayıcıya nefes aldır.
  function myChunkedTask(i = 0) {
    if (i > 1000000000) return;
    
    for (let j = 0; j < 100000; j++) { /* ... küçük bir parça işlem ... */ }
  
    // Bir sonraki parçayı tarayıcı boşta olduğunda çalıştır.
    setTimeout(() => myChunkedTask(i + 100000), 0);
  }

• Gereksiz Yeniden Çizimleri (Re-renders) Önleme: React gibi kütüphanelerde React.memo, useMemo, ve useCallback kullanarak bileşenlerin gereksiz yere render olmasını engelleyin.
• Web Workers Kullanma: Çok ağır, UI ile ilgisi olmayan hesaplamaları (veri işleme, analiz vb.) arka planda çalışan bir Web Worker'a taşıyarak ana iş parçacığını tamamen serbest bırakın.

CLS'yi Yok Etmek: Görsel Kararlılık

• Görsellere ve Iframe'lere Boyut Verme: Bu, CLS'nin 1 numaralı nedenidir. Tarayıcı, medya yüklenmeden önce onun için ne kadar yer ayıracağını bilmelidir.

  <!-- YANLIŞ -->
  <img src="logo.png">
  
  <!-- DOĞRU -->
  <img src="logo.png" width="200" height="50" style="aspect-ratio: 200/50;">

  CSS'te aspect-ratio kullanmak, resim responsive olsa bile boyut oranının korunmasını sağlar.
• Dinamik İçerik İçin Yer Ayırma: Bir API'dan yüklenecek bir banner, bir reklam veya bir bildirim kutusu için önceden bir iskelet (skeleton) veya minimum yükseklik (min-height) ile yer ayırın.

  .ad-banner-placeholder {
    min-height: 90px;
    background-color: #f0f0f0;
  }

• Font Yüklemelerini Optimize Etme: Web fontları yüklenirken, önce sistem fontu gösterilir, sonra web fontu gelir ve bu bir kaymaya neden olur. CSS'te font-display: swap; kullanmak ve fontları önceden yüklemek (preload) bu etkiyi azaltır.

Sonuç: Performans Bir Varış Noktası Değil, Bir Kültürdür

Tebrikler! Artık Core Web Vitals'ın üç atlısını nasıl evcilleştireceğinizi biliyorsunuz. Unutmayın, performans optimizasyonu tek seferlik bir proje değildir. Bu, projenizin yaşam döngüsünün her aşamasında düşünmeniz gereken bir kültürdür. Yeni bir özellik eklerken kendinize sorun: "Bu LCP'yi etkiler mi? Bu, ana iş parçacığını ne kadar meşgul edecek? Bu, bir düzen kaymasına neden olabilir mi?". Bu soruları sormaya başladığınızda, sadece Google'ın sevdiği değil, aynı zamanda kullanıcılarınızın da bayıldığı hızlı, akıcı ve keyifli bir web deneyimi yaratma yolunda en önemli adımı atmış olursunuz.