Core Web Vitals Nedir? LCP, INP ve CLS Nasıl Ölçülür ve İyileştirilir?

Core Web Vitals, Google'ın bir sayfanın gerçek kullanıcı deneyimini ölçmek için tanımladığı üç ana metriktir: yükleme hızı, etkileşim hızı ve görsel kararlılık. Google bu metrikleri sayfa deneyimi değerlendirmesinin bir parçası olarak kullanır. Önemli bir nüans: harika bir sayfa deneyimi, ilgili ve yararlı içeriğin yerini tutmaz; ama yavaş ve kararsız bir sayfa kullanıcıyı kaybettirir.

Üç metrik ve "iyi" sayılan eşikler

Metrik	Ne ölçer?	İyi
LCP (Largest Contentful Paint)	Sayfanın en büyük görünür öğesinin (genelde büyük görsel veya başlık bloğu) yüklenme süresi	2,5 saniye veya daha kısa
INP (Interaction to Next Paint)	Kullanıcının etkileşimlerine (tıklama, dokunma, tuş) sayfanın yanıt verme süresi	200 milisaniye veya daha kısa
CLS (Cumulative Layout Shift)	Sayfa yüklenirken öğelerin beklenmedik kayması	0,1 veya daha az

INP, Mart 2024'te eski metrik FID'in (First Input Delay) yerini aldı. Değerlendirme, sayfa yüklemelerinin %75'inin (75. yüzdelik) eşiği karşılaması ve mobil ile masaüstünün ayrı ayrı ele alınması esasına göre yapılır.

Nasıl ölçülür?

Saha verisi (gerçek kullanıcılar): Chrome Kullanıcı Deneyimi Raporu (CrUX) verisi, PageSpeed Insights ve Search Console'daki "Core Web Vitals" raporunda görünür. Yeterli trafiği olmayan sayfalarda saha verisi bulunmaz.
Laboratuvar verisi (simülasyon): Lighthouse ve PageSpeed Insights'ın "Tanılama" kısmı, kontrollü ortamda ölçüm yapar. Hata ayıklamak için çok değerlidir ancak gerçek kullanıcı deneyimiyle birebir aynı değildir.
Chrome DevTools: Performans paneli ve Lighthouse sekmesi, geliştirme sırasında sorun tespitinde kullanılır.

Önce PageSpeed Insights'a sayfanızın adresini girip hem saha hem laboratuvar sonuçlarına bakın. Search Console raporu ise sorunlu URL gruplarını toplu gösterir; kullanımını Search Console rehberimizde anlattık.

LCP'yi iyileştirme

Sunucu yanıt süresi (TTFB): Hızlı hosting, sunucu tarafı önbellekleme ve veritabanı sorgularının iyileştirilmesi. Bir CDN mesafeyi azaltır.
En büyük öğeyi optimize edin: LCP genellikle bir görseldir. Görseli doğru boyutta, sıkıştırılmış ve modern biçimde (WebP, AVIF) sunun. LCP görselini lazy-load etmeyin; ayrıca öncelikli yüklenmesi için fetchpriority="high" veya preload kullanabilirsiniz.
Render'ı engelleyen kaynaklar: Gereksiz CSS ve JavaScript'i azaltın, kritik olmayanları ertelemek (defer) yükü hafifletir.
Web fontları: font-display: swap ile metnin font yüklenmeden görünmesini sağlayın.

INP'yi iyileştirme

Uzun JavaScript görevlerini bölün: Ana iş parçacığını (main thread) 50 ms'den uzun bloklayan görevler etkileşimi geciktirir.
Üçüncü taraf betikleri azaltın: Reklam, analitik, sohbet ve sosyal medya eklentileri sıklıkla INP'yi bozar. Gerçekten gerekli olmayanları kaldırın veya geciktirin.
Olay işleyicileri hafif tutun: Tıklamada ağır hesaplama veya DOM değişikliği yapmayın.
Büyük DOM'dan kaçının: Çok sayıda öğe içeren sayfalar etkileşim sonrası yeniden çizimi yavaşlatır.

CLS'yi iyileştirme

Görsel ve video boyutlarını belirtin: width ve height nitelikleri (veya CSS aspect-ratio) yüklenmeden önce yer ayırır.
Reklam ve gömülü içerik için yer ayırın: Reklam alanları yüklenince sayfayı aşağı itiyorsa, alana sabit bir minimum yükseklik verin.
Dinamik eklenen içeriği kullanıcı etkileşimi dışında sayfanın üstüne eklemeyin.
Fontlardan kaynaklanan kaymayı azaltın: Yedek font ile asıl fontun ölçülerini birbirine yaklaştırın.

Önceliklendirme

Hepsini aynı anda düzeltmek zorunda değilsiniz. PageSpeed Insights'ın "Fırsatlar" bölümü en çok kazanç sağlayacak işleri sıralar. Genelde en hızlı kazançlar görsel optimizasyonu, önbellekleme, kullanılmayan betiklerin kaldırılması ve hosting kalitesinden gelir. Hız konusunda uygulamalı bir kontrol listesi için web sitesi hızlandırma rehberimize bakın.

Kaynaklar ve ileri okuma

Sık Sorulan Sorular

PageSpeed puanım 100 olmalı mı?

Hayır. Puan, laboratuvar ölçümünden türeyen bir özettir; asıl önemli olan gerçek kullanıcı verilerinde (saha) üç metriğin "iyi" aralığında olmasıdır. Yüksek puan için aşırı optimizasyon yapıp işlevsellikten ödün vermeyin.

Core Web Vitals sıralamayı ne kadar etkiler?

Google, sayfa deneyimini sıralama sinyallerinden biri olarak kullandığını ancak içeriğin alaka ve kalitesinin çok daha belirleyici olduğunu belirtir. Kullanıcı memnuniyeti, hemen çıkış ve dönüşüm üzerinde ise etkisi doğrudan hissedilir.

Trafiği az sitede neden saha verisi yok?

CrUX verisi, yeterli sayıda gerçek ziyaretçi olduğunda oluşur. Veri yoksa laboratuvar ölçümleriyle iyileştirme yapabilirsiniz; trafik arttıkça saha verisi de görünür.