Core Web Vitals nasıl iyileştirilir? LCP, INP ve CLS için uygulamalı rehber

1. Laboratuvar ve saha verisini birlikte okuyun

PageSpeed Insights içinde CrUX saha verisi varsa gerçek kullanıcıların son dönemde yaşadığı deneyimi gösterir. Lighthouse ise o anda, belirli cihaz ve ağ koşullarında yapılan laboratuvar testidir. Lighthouse teşhis için hızlıdır; CrUX sonucun kullanıcıya yansıyıp yansımadığını anlamak için gereklidir.

İyi durum, ziyaretlerin en az yüzde 75’inde hedef eşiğin karşılanmasıyla değerlendirilir. Bu yüzden ortalama değer tek başına yeterli değildir. Ana sayfa, liste, ürün ve blog gibi farklı şablonları ayrı gruplar hâlinde inceleyin.

2. LCP değerini iyileştirin

LCP çoğu sitede büyük hero görseli, başlık alanı veya içerik görselidir. Tarayıcı bu kaynağı geç keşfediyorsa, dosya gereğinden büyükse ya da sunucu yanıtı yavaşsa LCP uzar.

• Görseli doğru boyutta WebP veya AVIF olarak sunun.
• İlk ekrandaki LCP görseline lazy loading uygulamayın.
• Görsel HTML’de erken bulunsun; CSS arka planı veya JavaScript içinde geç oluşturulmasın.
• Gerekliyse fetchpriority="high" kullanın; her görseli yüksek öncelikli yapmayın.
• Sunucu yanıt süresini cache, sorgu ve uygulama katmanında ölçün.

<img src="/images/hero-1280.webp"
     width="1280" height="720"
     fetchpriority="high"
     alt="Hizmeti kullanan ekip">

3. INP için uzun JavaScript görevlerini bölün

INP, tıklama, dokunma ve klavye etkileşiminden sonraki görsel yanıt gecikmesini değerlendirir. Ana thread uzun süre JavaScript çalıştırıyorsa kullanıcı düğmeye bastığında arayüz cevap veremez.

Chrome DevTools Performance kaydında uzun görevleri ve etkileşim anını inceleyin. Büyük paketleri route bazında bölün, kullanılmayan üçüncü taraf script’lerini kaldırın, ağır hesapları küçük parçalara ayırın. Event handler içinde zorunlu olmayan işi sonraya bırakın ve kullanıcıya hemen görsel geri bildirim verin.

button.addEventListener('click', async () => {
  button.disabled = true;
  status.textContent = 'Kaydediliyor…';
  await saveForm();
  button.disabled = false;
});

Debounce her INP sorununu çözmez. Sorun handler’ın kendi çalışma süresiyse ölçüp o işi azaltmak gerekir.

4. CLS için alanı baştan ayırın

Görsel, reklam, embed veya font sonradan yüklenip içeriği hareket ettiriyorsa CLS artar. Görsellerde width ve height değerlerini belirtin veya CSS aspect-ratio kullanın. Sonradan açılan banner için önceden alan ayırın; var olan içeriğin üstüne yeni öğe eklemeyin.

.video-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Web fontlarında uygun fallback font, font-display tercihi ve gerekirse font metrik ayarı kullanın. Animasyon için yerleşimi değiştiren top veya height yerine transform tercih edilmesi çoğu durumda daha kararlıdır.

5. Düzeltmeyi gerçek kullanıcı ölçümüyle izleyin

Yayın öncesi Lighthouse ve DevTools ile regresyonu yakalayın. Yayın sonrası Search Console Core Web Vitals raporunu ve mümkünse kendi RUM verinizi izleyin. Saha verisinin yenilenmesi zaman alır; dağıtım tarihini not etmek hangi sürümün etkisini gördüğünüzü anlamayı kolaylaştırır.

Önceliği en çok trafik alan ve “zayıf” URL grubunu oluşturan ortak şablona verin. Tek bir sayfada puan kovalamak yerine aynı bileşeni kullanan yüzlerce URL’yi düzeltebilirsiniz.

Kaynaklar

• web.dev: Web Vitals
• web.dev: Core Web Vitals optimizasyon önerileri
• Google Search Central: Core Web Vitals