Core Web Vitals'ı Gerçekten İyileştirmek: LCP, INP ve CLS İçin Pratik Rehber

Bir sayfanın hızlı “hissettirmesi” ile gerçekten hızlı olması aynı şey değil. Google'ın Core Web Vitals metrikleri bu farkı ölçülebilir hâle getiriyor: içerik ne zaman göründü, sayfa etkileşime ne kadar çabuk yanıt verdi ve yüklenirken ne kadar kaydı? Müşteri projelerinde SEO ve erişilebilirlik üzerine çalışırken en sık karşılaştığım sorunları ve çözümlerini bu yazıda topladım.

Üç metrik, üç soru

• LCP (Largest Contentful Paint): Sayfanın en büyük içeriği — çoğunlukla ana görsel ya da başlık — ne zaman göründü? Hedef: 2,5 saniye veya altı.

• INP (Interaction to Next Paint): Kullanıcı tıkladığında ya da yazdığında ekran ne kadar sürede güncellendi? Mart 2024'te FID'in yerini aldı. Hedef: 200 milisaniye veya altı.

• CLS (Cumulative Layout Shift): İçerik yüklenirken sayfa ne kadar kaydı? Hedef: 0,1 veya altı.

Bu eşiklerin ziyaretlerin %75'inde karşılanması gerekiyor. Yani sitenin sizin hızlı bilgisayarınızda iyi görünmesi yetmez; orta seviye bir telefonda ve yavaş bir bağlantıda da iyi olmalı.

Önce ölçün: laboratuvar ve saha verisi

Lighthouse gibi araçlar laboratuvar verisi üretir: kontrollü bir ortamda tek bir yükleme. Sorunu bulmak için harikadır ama gerçek kullanıcıları temsil etmez. Asıl karar verdiren saha verisidir: PageSpeed Insights'taki Chrome kullanıcı deneyimi raporu (CrUX) ya da Search Console'daki Core Web Vitals raporu. INP'yi özellikle saha verisinden takip etmek gerekir; gerçek etkileşim olmadan doğru ölçülemez.

LCP: En önemli görseli bekletmeyin

LCP sorunlarının büyük kısmı tek bir hatadan kaynaklanır: tarayıcı, sayfanın en önemli görselini çok geç keşfeder.

• LCP görseline lazy loading uygulamayın. loading="lazy" ekranın altında kalan görseller içindir.

• Görselin önceliğini artırın: fetchpriority="high" ya da kullandığınız framework'ün preload seçeneği.

• Görseli CSS arka planı veya JavaScript ile değil, HTML'de doğrudan <img> olarak verin ki tarayıcı erkenden bulsun.

• Doğru boyut ve modern format kullanın: AVIF/WebP ve srcset ile ekrana uygun genişlik.

• Sunucu yanıt süresini (TTFB) unutmayın: statik ön üretim ve CDN önbelleği çoğu zaman en büyük kazancı sağlar.

<img
  src="/hero.avif"
  alt="Ürünün ana ekranı"
  width="1200"
  height="800"
  fetchpriority="high"
/>

INP: Ana iş parçacığını meşgul etmeyin

Tarayıcı JavaScript çalıştırırken kullanıcıya yanıt veremez. 50 milisaniyeyi aşan her görev, bir tıklamanın sırada bekleyebileceği bir “uzun görev”dir.

• Uzun görevleri bölün. Büyük bir işi parçalara ayırıp aralarda tarayıcıya nefes aldırmak, kullanıcı etkileşimlerinin araya girebilmesini sağlar.

• Önce görsel geri bildirim verin. Butona basıldığını hemen gösterin; ağır hesaplamayı bir sonraki kareye bırakın.

• Daha az JavaScript gönderin. Kullanılmayan kütüphaneler, gereksiz hydration ve büyük üçüncü parti betikler INP'nin en büyük düşmanlarıdır. Sunucu bileşenleri ve kod bölme burada doğrudan fayda sağlar.

• Analitik, canlı destek ve reklam gibi üçüncü parti betikleri erteleyin ya da yalnızca gerektiğinde yükleyin.

CLS: Önce yer ayırın, sonra yükleyin

Bir makaleyi okurken metnin aniden aşağı kayması en sinir bozucu deneyimlerden biridir. Çözüm neredeyse her zaman basittir: içerik gelmeden önce ona yer ayırmak.

• Görsellere ve videolara width ve height verin ya da CSS'te aspect-ratio kullanın.

• Reklam, gömülü içerik ve çerez bandı gibi sonradan gelen alanlar için sabit yer ayırın; mümkünse bunları sayfa içeriğinin üzerine bindirin.

• Web fontlarının yol açtığı kaymayı azaltın: font-display: swap ile birlikte ölçüleri uyumlu bir yedek font kullanın. Modern framework'lerin font araçları bunu otomatik yapabiliyor.

• Animasyonlarda top veya height yerine transform ve opacity kullanın.

Kısa kontrol listesi

1. Saha verisine bakın: hangi metrik, hangi sayfa grubunda kötü?

2. LCP öğesini bulun ve tarayıcının onu daha erken keşfetmesini sağlayın.

3. Uzun görevleri tarayıcının Performance panelinde tespit edip bölün.

4. Tüm medyaya boyut verin, sonradan gelen alanlara yer ayırın.

5. Değişikliği yayınlayın ve saha verisinin güncellenmesini bekleyin — CrUX son 28 günü yansıtır.

Performans bir kerelik bir proje değil, bir alışkanlık; her yeni özellik ve her yeni betik bu dengeyi değiştirebilir. İyi haber şu ki temel kurallar az ve kalıcı: önemli olanı erken yükle, ana iş parçacığını boş tut, içeriğe yer ayır.