Core Web Vitals: Hangi Metrik Neyi Ölçer ve Nasıl İyileştirilir?

Core Web Vitals, Google’ın sayfa deneyimini ölçmek için kullandığı üç metrikten oluşuyor. Her biri farklı bir kullanıcı şikâyetini sayısallaştırıyor: "geç açıldı", "tıkladım tepki vermedi", "okurken sayfa kaydı".

LCP — En Büyük İçerik Boyaması

LCP, görünür alandaki en büyük öğenin ne zaman çizildiğini ölçer. Genellikle bu öğe hero görseli veya ana başlıktır. İyi kabul edilen eşik 2,5 saniyedir.

LCP’yi bozan en yaygın üç sebep şunlardır:

• Yavaş sunucu yanıtı. İlk baytın gelme süresi (TTFB) yüksekse, tarayıcı henüz çizmeye başlayamaz bile. Önbellekleme ve sunucu tarafı render bu noktada belirleyicidir.
• Render engelleyen kaynaklar. Head içinde bekleyen senkron CSS ve JavaScript, boyamayı geciktirir. Kritik CSS'i satır içi vermek ve geri kalanını ertelemek işe yarar.
• Optimize edilmemiş görsel. 2 MB'lık bir JPEG, hızlı bağlantıda bile LCP'yi ikiye katlar.

Pratikte en hızlı kazanç görsel tarafındadır: modern format (WebP/AVIF), ekran genişliğine uygun boyut ve hero görseli için priority yüklemesi.

INP — Bir Sonraki Boyamayla Etkileşim

INP, 2024'te FID'in yerini aldı ve çok daha zorlu bir metrik. FID yalnızca ilk etkileşimin gecikmesini ölçüyordu; INP ise oturum boyunca tüm etkileşimlerin en kötüsüne yakın bir değeri raporlar. İyi eşik 200 milisaniyedir.

INP'yi bozan asıl sebep, ana iş parçacığını uzun süre meşgul eden JavaScript'tir. Tipik suçlular:

• Tek seferde çalışan büyük hidrasyon işlemleri
• Her tuş vuruşunda çalışan ağır filtreleme mantığı
• Üçüncü taraf etiket yöneticilerinin senkron çalışan betikleri

Çözüm genellikle kod bölme, sunucu bileşenlerine taşıma ve uzun işleri parçalara ayırmadan geçiyor. Kullanıcıdan gelen her etkileşimin 50 ms içinde bir görsel geri bildirim üretmesi hedeflenmeli.

CLS — Kümülatif Düzen Kayması

CLS, sayfa yüklenirken içeriğin ne kadar yer değiştirdiğini ölçer. İyi eşik 0,1'dir. En sinir bozucu kullanıcı deneyimlerinden biridir: tam okumaya başladığınızda metin aşağı kayar.

Neredeyse tüm CLS sorunları dört sebepten çıkar:

1. Boyutu belirtilmemiş görseller — width ve height mutlaka verilmeli.
2. Sonradan yüklenen reklam veya gömülü içerik için yer ayrılmaması.
3. Web fontu yüklendiğinde metnin yeniden akması — font-display: swap ve benzer ölçülü yedek font ile azaltılır.
4. Mevcut içeriğin üstüne DOM eklenmesi (bildirim çubuğu gibi).

Laboratuvar verisi ile saha verisini karıştırmayın

Lighthouse skoru laboratuvar verisidir: sabit bir cihaz ve ağ profilinde tek bir ölçüm. Core Web Vitals değerlendirmesi ise saha verisine (gerçek kullanıcı ölçümleri) dayanır.

Bu ayrım kritiktir. Lighthouse'da 98 alan bir site, gerçek kullanıcıların çoğu eski Android cihazdan giriyorsa sahada başarısız olabilir. Bu yüzden optimizasyona her zaman saha verisiyle başlıyor, laboratuvar ölçümünü yalnızca değişikliğin etkisini hızlı görmek için kullanıyoruz.

Öncelik sırası

Sınırlı zamanınız varsa şu sırayla ilerleyin: önce LCP (en büyük etki, en kolay kazanç), sonra CLS (genellikle birkaç saatlik iş), en son INP (en zor, mimari değişiklik gerektirebilir).