Core Web Vitals nedir? LCP, INP ve CLS’yi işletme diliyle anlatım

“Sitemiz yavaş mı?” sorusunun cevabı, siteyi kendi bilgisayarınızdan açarak bulunmaz. Ofisinizin hızlı internetinde bir saniyede açılan sayfa, müşterinizin telefonunda, mobil veride beş saniye sürebilir. Google bu farkı ölçmek için Core Web Vitals adını verdiği üç metriği kullanır. Bu rehberde her birini işletme diliyle anlatıyoruz.

Core Web Vitals nedir?

Core Web Vitals, Google’ın bir web sayfasının gerçek kullanıcı deneyimini ölçmek için belirlediği üç metriktir. Her biri deneyimin farklı bir yanını ölçer:

Metrik	Ne ölçer?	İyi	İyileştirilmeli	Kötü
LCP (Largest Contentful Paint)	Ana içeriğin yüklenme hızı	≤ 2,5 sn	2,5–4 sn	> 4 sn
INP (Interaction to Next Paint)	Tıklamalara tepki hızı	≤ 200 ms	200–500 ms	> 500 ms
CLS (Cumulative Layout Shift)	Görsel kararlılık (içerik kayması)	≤ 0,1	0,1–0,25	> 0,25

Google, bu değerlerin ziyaretlerin %75’inde sağlanmasını hedef olarak önerir; mobil ve masaüstü ayrı değerlendirilir. Yani ziyaretçilerinizin dörtte üçü iyi bir deneyim yaşıyorsa sayfanız “iyi” kabul edilir.

LCP: Ana içerik ne kadar hızlı görünüyor?

LCP, sayfadaki en büyük görsel veya metin bloğunun ekranda görünme süresidir. Çoğu sitede bu, ana sayfadaki büyük görsel veya başlıktır. Kullanıcının “sayfa açıldı” hissini en iyi yansıtan metriktir.

En sık nedenler ve çözümler:

• Büyük, sıkıştırılmamış görseller: Ana görseli WebP veya AVIF biçimine çevirin ve ekrana uygun boyutta sunun. Telefonda 400 piksel genişlikte gösterilen bir görselin 3.000 piksel olmasına gerek yoktur.
• Yavaş sunucu yanıtı: Ucuz paylaşımlı barındırma veya önbelleksiz dinamik sayfalar ilk baytın geç gelmesine yol açar. Sayfa önbelleği ve bir CDN genellikle belirgin fark yaratır.
• Engelleyen CSS ve JavaScript: Sayfa görünmeden önce yüklenmesi gereken büyük dosyalar LCP’yi geciktirir. Kullanılmayan eklentileri kaldırın, kritik olmayan scriptleri erteleyin.
• Ana görselin geç keşfedilmesi: Ana görsel “lazy load” ile yükleniyorsa tarayıcı onu geç ister. Sayfanın üst kısmındaki görseller lazy load edilmemelidir.

INP: Site tıklamalara ne kadar hızlı tepki veriyor?

INP, kullanıcı bir butona bastığında, menüyü açtığında veya forma yazdığında sayfanın görsel tepki vermesine kadar geçen süreyi ölçer. Ziyaret boyunca yapılan etkileşimlerin en yavaşlarından birini temel alır. INP, 2024’te yerini aldığı FID’den (First Input Delay) daha kapsamlıdır; çünkü yalnızca ilk tıklamayı değil, ziyaret boyunca yapılan etkileşimleri dikkate alır.

En sık nedenler ve çözümler:

• Ağır JavaScript: Tema ve eklentilerin çalıştırdığı uzun işlemler tarayıcıyı meşgul eder. Kullanılmayan scriptleri kaldırın, büyük işlemleri parçalara bölün.
• Üçüncü taraf kodlar: Canlı sohbet araçları, izleme kodları ve reklam scriptleri INP’yi ciddi şekilde kötüleştirebilir. Hangisinin gerçekten kullanıldığını gözden geçirin.
• Karmaşık sayfa yapısı: Binlerce öğeden oluşan sayfalar her güncellemede daha fazla iş gerektirir.

CLS: Sayfa yüklenirken içerik kayıyor mu?

CLS, sayfa yüklenirken içeriğin beklenmedik şekilde yer değiştirmesini ölçer. Tanıdık bir senaryo: Bir bağlantıya tıklamak üzereyken üstte bir banner yüklenir, sayfa aşağı kayar ve yanlış yere tıklarsınız.

En sık nedenler ve çözümler:

• Boyutu belirtilmemiş görseller: Görsellere genişlik ve yükseklik verin; tarayıcı yerini baştan ayırsın.
• Sonradan eklenen banner ve çerez bildirimleri: Bunları mevcut içeriğin üstüne itmek yerine sabit bir alanda veya üst katmanda gösterin.
• Web fontları: Font yüklenince metin boyutu değişiyorsa satırlar kayar. Ölçüleri eşleştirilmiş yedek font kullanmak bu kaymayı büyük ölçüde önler.

Siteniz nasıl ölçülür?

1. PageSpeed Insights

pagespeed.web.dev adresine sayfa adresinizi yazın. Rapor iki bölümden oluşur:

• Gerçek kullanıcı deneyimi (saha verisi): Sayfanızın yeterli ziyaretçisi varsa, Chrome kullanıcılarından toplanan son 28 günlük gerçek veriyi gösterir. Core Web Vitals değerlendirmesi bu veriye dayanır.
• Performans teşhisi (laboratuvar verisi): Simüle edilmiş tek bir yüklemedir. Sorunun nedenini bulmak için kullanışlıdır, ama her ölçümde biraz değişir.

Saha verisi yoksa, siteniz yeterli ziyaret almıyor demektir; bu durumda laboratuvar ölçümünü birkaç kez tekrarlayıp ortancasına bakın.

2. Google Search Console

Search Console’daki Core Web Vitals raporu, sitenizin tüm sayfalarını mobil ve masaüstü için “iyi”, “iyileştirilmeli” ve “kötü” olarak gruplar. Tek tek sayfa ölçmek yerine hangi sayfa grubunda sorun olduğunu gösterir.

3. Rakiplerle karşılaştırma

Kendi değerleriniz tek başına az şey söyler. Aynı ölçümü 3–5 rakibinizin ana sayfası için de yapın. Rakipleriniz 2 saniyede açılırken sizin sayfanız 4 saniyede açılıyorsa, bu öncelikli bir sorundur. Yöntem için rakip analizi rehberimize bakabilirsiniz.

Core Web Vitals sıralamayı ne kadar etkiler?

Google, Core Web Vitals’ın diğer sayfa deneyimi unsurlarıyla birlikte temel sıralama sistemlerinin ödüllendirmeyi amaçladığı şeyle uyumlu olduğunu belirtir. Ancak şunu doğru okumak gerekir: Hız, alakalı ve yararlı içeriğin yerini tutmaz. Soruya cevap vermeyen hızlı bir sayfa üst sıraya çıkmaz. Hızın asıl etkisi iki yerde görülür: benzer kalitedeki sayfalar arasındaki farkta ve kullanıcının sayfada kalıp kalmamasında. Yavaş açılan bir sayfada ziyaretçi, içeriği görmeden geri dönebilir.

Hızlı kontrol listesi

1. PageSpeed Insights’ta ana sayfanızı ve en önemli hizmet sayfanızı mobilde ölçün.
2. Kötü olan metriği belirleyin: LCP mi, INP mi, CLS mi?
3. LCP için ana görseli sıkıştırın ve lazy load’dan çıkarın.
4. INP için kullanılmayan eklenti ve üçüncü taraf scriptleri kaldırın.
5. CLS için görsellere boyut verin, banner’ları sabit alana alın.
6. Değişiklikten sonra aynı sayfayı aynı araçla tekrar ölçün; saha verisinin güncellenmesi 28 günlük pencere nedeniyle zaman alır.

Vesors bu işi nasıl yapıyor?

Vesors’un web sitesi hız ve teknik iyileştirme çalışması, sitenizin Core Web Vitals değerlerini mobilde ölçüp 3–5 rakibinizle karşılaştırarak başlar. Sorunları etki ve efora göre sıralar, düzeltmeleri uygular ve sonucu aynı ölçütlerle tekrar ölçeriz. Bu yazının yayınlandığı sitenin kendisi de aynı ölçütlere göre geliştirilmiştir: statik HTML, sıkıştırılmış görseller ve ölçüleri eşleştirilmiş yedek font.