Core Web Vitals

Core Web Vitals Nedir

Core Web Vitals, Google'ın her web sayfası için ölçülmesini önerdiği üç kullanıcı deneyimi metriğidir. Her biri deneyimin ayrı bir yönünü ölçer ve gerçek kullanıcılardan toplanabilir:¹

Kısacası üç soruya cevap ararlar: sayfa hızlı açıldı mı, dokununca hemen tepki verdi mi, okurken yerinden oynadı mı?

Eşikler ve 75. Persentil

Her metrik için üç bant vardır: iyi, iyileştirilmeli (needs improvement) ve kötü (poor).²

Değerlendirme tek bir ziyarete göre yapılmaz. Bir sayfa, ziyaretlerin 75. persentilinde eşiği tutturuyorsa o metrikte "iyi" sayılır; yani her dört ziyaretten en az üçü hedefin altında kalmalıdır. 75. persentil, ziyaretlerin çoğunu temsil ederken birkaç aşırı ölçümün sonucu bozmasını da engeller.² Mobil ve masaüstü ayrı değerlendirilir ama eşikler aynıdır; mobil cihazlar daha kısıtlı olduğu için eşikler büyük ölçüde mobilin başarabileceğine göre belirlenmiştir.² Bir sayfa üç metriğin üçünde de "iyi" ise Core Web Vitals'ı geçmiş olur.¹

LCP: Ana İçerik Ne Zaman Göründü

LCP, kullanıcı sayfaya gitmeye başladığı andan, ekranda görünen en büyük içerik parçası çizilene kadar geçen süredir.³ Aday olabilen öğeler şunlardır:³

• <img> ve SVG içindeki <image>

• <video> (poster görseli ya da ilk kare)

• CSS'te url() ile verilmiş arka plan görseli (gradient sayılmaz)

• Metin içeren blok öğeler (başlık, paragraf)

Tarayıcı, kullanıcı tıklar, kaydırır ya da bir tuşa basarsa yeni LCP adayı bildirmeyi bırakır.³

Tipik nedenler: Yavaş sunucu yanıtı (TTFB), render'ı bloklayan CSS ve JavaScript, geç keşfedilen ya da lazy-load edilen LCP görseli ve geç yüklenen fontlar.³⁴ Görsel ve font tarafını Görsel ve font dersinde ele alıyoruz.

INP: Sayfa Ne Kadar Hızlı Yanıt Verdi

INP, ziyaret boyunca yapılan tıklama, dokunma ve tuş basma etkileşimlerinin gecikmesini izler ve neredeyse hepsinin altında kaldığı tek bir değer raporlar. Hover, kaydırma ve yakınlaştırma sayılmaz.⁵ Çoğu sayfada en yavaş etkileşim raporlanır; çok etkileşimli sayfalarda her 50 etkileşimde en kötü bir tanesi göz ardı edilir.⁵

Bir etkileşimin süresi üç parçadan oluşur:⁵

1. Input delay: Olay işleyicileri çalışmaya başlayana kadar geçen bekleme.

2. Processing duration: onClick gibi işleyicilerin çalışma süresi.

3. Presentation delay: İşleyiciler bittikten sonra bir sonraki karenin ekrana çizilmesi.

INP, 12 Mart 2024'te First Input Delay (FID)'in yerini aldı.⁶ FID yalnızca ilk etkileşimin bekleme süresine bakıyordu; INP her etkileşimi, ekrana çizim bitene kadar ölçer.⁵ Bu yüzden eski yazılarda FID görürseniz artık geçerli bir Core Web Vital olmadığını bilin.

Tipik nedenler: Ana thread'i uzun süre meşgul eden görevler (50 ms üstü), gereğinden fazla JavaScript, büyük DOM ve React'te gereksiz yeniden render'lar.⁴⁷ Bunları React'te render performansı ve Bundle boyutu derslerinde görüyoruz.

CLS: Sayfa Yerinden Oynadı mı

CLS, görünen içeriğin beklenmedik şekilde kaymasını ölçer. Okurken metnin aşağı kayması ya da tam tıklarken butonun yer değiştirmesi bunun örneğidir.⁸

Her kaymaya, ekranın ne kadarının etkilendiğine ve öğenin ne kadar uzağa gittiğine göre bir puan verilir. Birbirine yakın kaymalar (aralarında 1 saniyeden az, toplamda en fazla 5 saniye) bir grup oluşturur; CLS en kötü grubun puanıdır, sayfa boyunca biriken toplam değil.⁸ Kullanıcının tıklamasından sonraki 500 ms içindeki kaymalar beklenen kabul edilir ve sayılmaz; bir menüyü açınca içeriğin aşağı itilmesi sorun değildir.⁸

Tipik nedenler: width/height verilmemiş görsel ve videolar, sonradan boyut değiştiren reklam ve embed'ler, mevcut içeriğin üstüne eklenen banner'lar ve yedek fonttan farklı boyutta çizilen web fontları.⁸⁴ Çözümlerin çoğu Görsel ve font dersinde.

// Boyutu belli olmayan görsel yüklenince altındaki her şeyi iter
<img src="/kapak.jpg" alt="Kapak" />

// Tarayıcı yeri önceden ayırır, kayma olmaz
<img src="/kapak.jpg" alt="Kapak" width={1200} height={630} />

Yardımcı Metrikler

Time to First Byte (TTFB) ve First Contentful Paint (FCP) Core Web Vitals değildir; yavaş sunucu ya da render'ı bloklayan kaynaklar gibi LCP sorunlarının teşhisinde kullanılır. Total Blocking Time (TBT) ise kullanıcı etkileşimi olmayan test ortamında INP'nin yerine bakılan bir laboratuvar metriğidir.¹

Field ve Lab Verisi

Field verisi gerçek kullanıcıların kendi cihaz, ağ ve konumlarından toplanır; Google'ın kamuya açık veri seti Chrome User Experience Report (CrUX) buna örnektir. Lab verisi ise sayfayı sabit cihaz ve ağ ayarlarıyla, kontrollü bir ortamda yükleyerek elde edilir ve hata ayıklamak için tekrarlanabilir sonuç verir. İkisi sık sık farklı çıkar: testte önbellek boştur, kullanıcı tıklamaz ve kaydırmaz, ekran boyutuna göre LCP öğesi değişebilir. Bu yüzden ikisi de varsa öncelik field verisindedir; lab verisi geliştirme sırasında sorunu bulmaya yarar.⁹ Bu ölçümleri nereden okuyacağınızı Ölçüm dersinde anlatıyoruz.

Aralık 2025 itibarıyla LCP ve INP tüm büyük tarayıcılarda destekleniyor; CLS ise hâlâ yalnızca Chromium tabanlı tarayıcılarda ölçülebiliyor. CrUX da yalnızca Chrome kullanıcılarından veri topluyor.¹⁰

Neden Önemli

Asıl neden kullanıcıdır: yavaş ya da kararsız bir sayfadan sıkılan kullanıcı başka bir siteye geçebilir.¹¹ Örneğin Farfetch, LCP'nin 2,5 saniyeyi aştığı her 100 ms için dönüşüm oranının yaklaşık %1,3 düştüğünü raporladı.¹²

Arama tarafında Google, Core Web Vitals'ın sıralama sistemlerinde kullanıldığını söylüyor. Ama aynı sayfada iyi skorun en üst sırayı garanti etmediği ve Google'ın sayfa deneyimi zayıf olsa bile en alakalı içeriği göstermeye çalıştığı da yazıyor.¹³ Yani Core Web Vitals bir SEO kısayolu değil; içerik alakası her zaman önce gelir.

Detaylı Öğrenmek İçin

• Resmi giriş: web.dev'in Web Vitals sayfası; metriklerin yaşam döngüsü, yardımcı metrikler ve araç listesiyle.¹

• Neden 75. persentil: Eşiklerin nasıl ve neden belirlendiğini anlatan yazı.²

• Konuşma: Barry Pollard'ın her metrik için en etkili üç öneriyi anlattığı 29 dakikalık konuşma (JSNation 2023).¹⁵

• Konuşma: Andrea Verlicchi'nin gerçek sitelerdeki INP hatalarını ve çözümlerini anlattığı konuşma (We Love Speed 2024).¹⁶

• Veri: Web Almanac 2025 Performance bölümü; metriklerin web genelinde ne durumda olduğu.¹⁴