Core Web Vitals Nedir? LCP, INP ve CLS

01Core Web Vitals Nedir?

Bir sayfanın “hızlı” olması tek bir sayıyla anlatılamaz. Kullanıcı için önemli olan; içeriğin ne kadar çabuk göründüğü, bir butona dokunduğunda sayfanın ne kadar hızlı tepki verdiği ve okurken içeriğin yerinden kayıp kaymadığıdır. Core Web Vitals bu üç deneyimi ayrı ayrı ölçen metriklerden oluşur.

Google bu metrikleri sayfa deneyimi sinyallerinin bir parçası olarak kullanır. Tek başına sıralamayı belirlemezler; içeriği güçlü iki sayfadan deneyimi daha iyi olanın öne çıkmasına katkı sağlayabilirler. Asıl etkileri ise kullanıcı davranışı üzerindedir: hızlı ve kararlı sayfalarda ziyaretçi daha uzun kalır ve daha çok dönüşüm yapar.

Metrikler zaman içinde gelişebilir. Örneğin etkileşimi ölçmek için önceden kullanılan FID metriğinin yerini, etkileşimlerin tamamını daha iyi yansıtan INP almıştır. Bu yüzden güncel tanımları resmî web.dev dokümantasyonundan takip etmek iyi bir alışkanlıktır.

02Eşik Değerleri Tablosu

Her metrik için Google üç aralık tanımlar: iyi, iyileştirme gerekli ve zayıf. Bir sayfanın “iyi” sayılması için ziyaretlerin en az yüzde 75’inde değerin iyi aralıkta olması gerekir. Mobil ve masaüstü ayrı ayrı değerlendirilir.

03LCP Nedir?

LCP (Largest Contentful Paint), sayfa açılırken ekranda görünen en büyük içerik öğesinin (genellikle ana görsel, video kapağı ya da büyük başlık bloğu) yüklenip çizildiği ana kadar geçen süredir. Kullanıcının “sayfa açıldı” hissine en yakın metriktir.

LCP’yi kötüleştiren nedenler

• Yavaş sunucu yanıtı (uzun TTFB)
• Büyük boyutlu, sıkıştırılmamış ya da eski formattaki ana görsel
• Ana görselin geç yüklenmeye (lazy) ayarlanmış olması
• Sayfanın görünmesini engelleyen CSS ve JavaScript dosyaları
• Ana içeriğin JavaScript ile sonradan oluşturulması

LCP nasıl iyileştirilir?

Ana görseli WebP ya da AVIF formatında ve doğru boyutta sunun, geç yüklemeden çıkarın ve gerekirse yüksek öncelikle yükletin. Sunucu yanıt süresini önbellek ve CDN ile kısaltın, kritik olmayan betikleri erteleyin.

<img src="/img/hero.webp" alt="Ana görsel" width="1200" height="630" fetchpriority="high">

04INP Nedir?

INP (Interaction to Next Paint), kullanıcının sayfa boyunca yaptığı tıklama, dokunma ve klavye etkileşimlerine sayfanın ne kadar sürede görsel olarak yanıt verdiğini ölçer. Ziyaret boyunca gözlenen en yavaş etkileşimlerden biri raporlanır; yani tek bir hızlı tıklama değil, genel tepki kalitesi değerlendirilir.

Menü butonuna dokunduğunuzda bir an hiçbir şey olmuyor, sonra menü birden açılıyorsa, bu gecikme INP’ye yansır. Sorun genellikle tarayıcının ana iş parçacığını uzun süre meşgul eden JavaScript kodlarıdır.

INP nasıl iyileştirilir?

• Uzun süren JavaScript görevlerini küçük parçalara bölün.
• Kullanılmayan ve gereksiz betikleri kaldırın, üçüncü taraf kodları azaltın.
• Etkileşimden sonra yapılan ağır işleri (analiz gönderimi gibi) erteleyin.
• Çok büyük ve karmaşık sayfa yapısından (DOM) kaçının.
• Kullanıcıya hemen görsel geri bildirim verin, ağır işi sonra yapın.

05CLS Nedir?

CLS (Cumulative Layout Shift), sayfa içeriğinin beklenmedik biçimde yer değiştirme miktarını ölçer. Bir yazıyı okurken üstte geç yüklenen bir reklam yüzünden metnin aşağı kayması ya da tam tıklayacakken butonun yerinden oynaması, yüksek CLS’nin tipik örnekleridir.

CLS bir süre değil, birimsiz bir puandır. Kayan öğenin büyüklüğü ve kayma mesafesi hesaba katılır. Kullanıcının kendi eylemiyle (örneğin bir akordeonu açması) oluşan değişiklikler bu puana dahil edilmez.

CLS nasıl iyileştirilir?

• Tüm görsel ve videolara genişlik-yükseklik ya da en-boy oranı verin.
• Reklam, harita ve gömülü içerikler için önceden yer ayırın.
• Mevcut içeriğin üstüne sonradan bant ya da bildirim eklemeyin.
• Web fontlarını font-display: swap ile yükleyin ve yedek fontun ölçülerini yakın tutun.
• Animasyonlarda konum yerine transform özelliğini kullanın.

06Saha Verisi ve Laboratuvar Verisi

Core Web Vitals değerlendirmesi, gerçek Chrome kullanıcılarından toplanan saha verisine dayanır. Bu veriler Chrome Kullanıcı Deneyimi Raporu (CrUX) aracılığıyla son 28 günün ortalaması olarak sunulur. Yeterli trafiği olmayan sayfalar için saha verisi görünmeyebilir.

Laboratuvar verisi ise Lighthouse gibi araçların kontrollü bir ortamda tek bir test yaparak ürettiği sonuçtur. Sorunları bulmak ve düzeltmeyi hemen denemek için çok değerlidir; ancak gerçek kullanıcıların cihaz ve bağlantı çeşitliliğini tam yansıtmaz. INP gibi gerçek etkileşime dayanan metrikler laboratuvarda doğrudan ölçülemez; bunun yerine Toplam Engelleme Süresi (TBT) yaklaşık bir gösterge olarak kullanılır.

import { onLCP, onINP, onCLS } from 'web-vitals';

function gonder(metrik) {
  console.log(metrik.name, metrik.value);
  // Burada değeri kendi analiz aracınıza gönderebilirsiniz
}

onLCP(gonder);
onINP(gonder);
onCLS(gonder);

07İyileştirme İçin Yol Haritası

Core Web Vitals sorunlarını çözerken rastgele değişiklikler yerine sistemli bir sıra izlemek, emeğin boşa gitmesini önler.

1. Search Console’da Core Web Vitals raporunu açın, sorunlu sayfa gruplarını belirleyin.
2. Her gruptan örnek bir sayfayı PageSpeed Insights’ta test edin, hangi metriğin zayıf olduğunu not edin.
3. Lighthouse önerilerini en büyük kazanç sağlayacak olandan başlayarak uygulayın.
4. Değişikliği yayına alın ve Search Console’da düzeltmeyi doğrulama sürecini başlatın.
5. Saha verisinin güncellenmesi için birkaç hafta bekleyin, sonuçları karşılaştırın.

08Core Web Vitals ve SEO Stratejisi

Core Web Vitals, SEO’nun yerini almaz; onu destekler. Arama niyetini karşılayan, özgün ve güvenilir içerik hâlâ en belirleyici unsurdur. Ancak içerik kalitesi birbirine yakın sayfalarda deneyim farkı öne çıkabilir ve iyi deneyim, kazanılan ziyaretçinin dönüşüme ulaşma olasılığını artırır.

En verimli yaklaşım, performansı tasarım aşamasında hesaba katmaktır. Hafif bileşenler, doğru görsel düzeni ve sade kod yapısı baştan kurulduğunda sonradan yapılacak düzeltmeler azalır. Bu yaklaşımı SEO uyumlu web tasarımı ve mobil uyumlu tasarım süreçlerimizde uyguluyoruz; tasarım aşamasındaki kontrol listesini SEO uyumlu web tasarım yazımızda bulabilirsiniz.

Uygulanabilir hızlandırma adımlarını site hızı nasıl artırılır rehberimizde, düzenli izleme rutinini ise web sitesi bakımı yazımızda anlattık. Ölçümleri arama performansıyla birlikte düzenli raporlamak için SEO ve analiz hizmetimizden destek alabilirsiniz.