Core Web Vitals Nedir? LCP, INP ve CLS İyileştirme Rehberi

Core Web Vitals, kullanıcıların bir web sayfasını yükleme, kullanma ve görsel kararlılık açısından nasıl deneyimlediğini ölçen temel metriklerdir. Google’ın güncel temel metrikleri Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ve Cumulative Layout Shift (CLS) değerleridir.

Bu ölçümler yalnızca SEO puanı elde etmek için düzeltilmez. Yavaş açılan ana içerik, tıklamaya geç cevap veren arayüz ve yüklenirken yer değiştiren düğmeler doğrudan kullanıcı kaybına neden olabilir. İyi performans; organik görünürlük, reklam verimliliği ve dönüşüm deneyiminin ortak altyapısıdır.

Güncel Core Web Vitals eşikleri

Google, kullanıcı deneyimini sayfa ziyaretlerinin 75. yüzdelik diliminde ve mobil ile masaüstü ayrı olacak şekilde değerlendirir.

Bir sayfanın “iyi” sayılması için üç metriğin de uygun kullanıcı verisinde iyi aralıkta olması hedeflenir. Tek bir laboratuvar testi gerçek kullanıcı kitlesinin tamamını temsil etmez.

Kaynak: Google Search Central Core Web Vitals belgeleri.

LCP neyi ölçer?

Largest Contentful Paint, görünür alan içindeki en büyük anlamlı içerik öğesinin ekrana gelme süresini ölçer. Bu öğe çoğu zaman büyük bir görsel, başlık bölümü veya metin bloğudur. LCP sunucu yanıtı, kaynak yükleme sırası, görsel boyutu ve tarayıcı çizimi gibi birden fazla aşamadan etkilenir.

LCP neden yavaşlar?

• Sunucunun ilk yanıtı geç gelir.
• Ana görsel gereğinden büyük veya yanlış formatlıdır.
• LCP görseli CSS arka planı içinde geç keşfedilir.
• Kritik içerik JavaScript çalışana kadar oluşturulmaz.
• Çok sayıda engelleyici CSS ve yazı tipi dosyası vardır.
• Ana görsel yanlışlıkla tembel yüklenir.
• CDN ve önbellek yapısı doğru kullanılmaz.

LCP nasıl iyileştirilir?

Önce PageSpeed Insights veya tarayıcı performans araçlarında gerçek LCP öğesi bulunmalıdır. Genel “görselleri küçült” önerisi yerine o öğenin yükleme zinciri incelenir.

• Sunucu yanıtını sayfa ve nesne önbelleğiyle iyileştirin.
• Ana görseli doğru ekranda gereken boyuta yakın üretin.
• WebP veya AVIF gibi uygun modern formatları değerlendirin.
• srcset ve sizes ile cihaza uygun görsel gönderin.
• LCP görselini tembel yükleme dışında bırakın.
• Gerekliyse yüksek öncelik veya ön yükleme kullanın.
• Kritik CSS’yi küçültün, kullanılmayan CSS ve betikleri azaltın.
• Ana içeriğin yalnızca istemci tarafı JavaScript sonrasında oluşmasını önleyin.

Ön yükleme her dosyaya uygulanmamalıdır. Çok sayıda kaynağa yüksek öncelik vermek, gerçekten kritik öğelerin birbiriyle yarışmasına neden olur.

INP neyi ölçer?

Interaction to Next Paint, kullanıcının sayfadaki tıklama, dokunma veya klavye etkileşimlerine ne kadar hızlı görsel yanıt aldığını değerlendirir. Sayfa ilk açılışta hızlı görünebilir; fakat menü, form veya filtre tıklandığında donuyorsa INP zayıflar.

INP yalnızca olay işleyicisinin süresini değil, etkileşimin başlamasından tarayıcının bir sonraki görüntüyü çizmesine kadar olan gecikmeyi kapsar. Uzun JavaScript görevleri ana iş parçacığını meşgul ettiğinde kullanıcı etkileşimi bekler.

INP neden zayıflar?

• Büyük JavaScript paketleri ayrıştırılıp çalıştırılır.
• Üçüncü taraf sohbet, reklam veya analiz betikleri ana iş parçacığını kaplar.
• Tek etkileşim çok sayıda DOM güncellemesi yapar.
• Ağır hesaplama küçük parçalara bölünmez.
• Eklentiler gereksiz betikleri her sayfada yükler.
• Tıklamadan sonra görsel geri bildirim geç verilir.

INP nasıl iyileştirilir?

• Kullanılmayan JavaScript’i kaldırın ve paketleri küçültün.
• Kod bölme ve koşullu yüklemeyle yalnızca gereken betiği çalıştırın.
• Uzun görevleri daha küçük işlere ayırın.
• Üçüncü taraf betiklerini iş değerine göre denetleyin.
• DOM boyutunu ve toplu stil hesaplamalarını azaltın.
• Etkileşim sonrası hızlı görsel geri bildirim sağlayın.
• Form doğrulamasını anlaşılır ve verimli çalıştırın.
• Gerçek kullanıcı verisinde hangi sayfa gruplarının sorunlu olduğunu ayırın.

Her JavaScript dosyasını geciktirmek doğru değildir. Menü, erişilebilirlik veya dönüşüm formu gibi temel işlevler bozulmadan test yapılmalıdır.

CLS neyi ölçer?

Cumulative Layout Shift, kullanıcı etkileşimi olmadan gerçekleşen beklenmedik yerleşim kaymalarının toplamını ölçer. Kullanıcı bir bağlantıya dokunacakken üstten görsel yüklenip düğmenin yer değiştirmesi tipik bir CLS sorunudur.

CLS neden yükselir?

• Görsel ve video alanlarının genişlik-yükseklik oranı tanımlı değildir.
• Reklam veya gömülü içerik için önceden yer ayrılmaz.
• Web yazı tipi geç geldiğinde metin ölçüsü değişir.
• Sayfanın üstüne sonradan bildirim veya banner eklenir.
• JavaScript mevcut içeriğin önüne dinamik blok yerleştirir.
• Animasyonlar yerleşimi değiştiren özelliklerle yapılır.

CLS nasıl iyileştirilir?

• Görsel ve videolara boyut veya aspect-ratio tanımlayın.
• Dinamik bileşenler için tahmini alan ayırın.
• Yazı tipi yükleme stratejisini ve yedek font ölçülerini düzenleyin.
• Kullanıcı etkileşimi olmadan sayfanın üstüne içerik eklemeyin.
• Animasyonlarda mümkünse transform ve opacity kullanın.
• Çerez bildirimi ve kampanya bantlarını farklı ekranlarda test edin.

CLS toplam bir “sayfa hareketi” hissini sayıya dönüştürür; tek bir öğeyi optimize etmek yerine kayma kümeleri incelenmelidir.

Alan verisi ve laboratuvar verisi farkı

Alan verisi

Gerçek Chrome kullanıcılarının uygun ziyaretlerinden elde edilen geçmiş performansı temsil eder. PageSpeed Insights’ın gerçek kullanıcı bölümü, Chrome User Experience Report ve Search Console Core Web Vitals raporu bu veriden yararlanabilir. Yeterli trafik yoksa belirli URL için veri bulunmayabilir ve benzer URL grubu gösterilebilir.

Laboratuvar verisi

Kontrollü cihaz ve ağ koşulunda yapılan anlık testtir. Lighthouse ve PageSpeed Insights laboratuvar bölümü sorun bulmak için kullanışlıdır. Ancak test konumu, sunucu durumu ve cihaz profili sonucu etkiler.

Alan verisi “kullanıcılar ne yaşıyor?”, laboratuvar verisi “sorunu hangi teknik unsur oluşturuyor?” sorusuna yardımcı olur. İkisi rakip değil, tamamlayıcıdır.

PageSpeed Insights sonucu nasıl okunur?

1. Önce mobil ve masaüstü gerçek kullanıcı verisini ayrı inceleyin.
2. Verinin URL’ye mi, benzer sayfa grubuna mı ait olduğunu kontrol edin.
3. Hangi Core Web Vitals metriğinin başarısız olduğunu belirleyin.
4. Laboratuvar tanılamasında ilgili öğe ve kaynak zincirini bulun.
5. Tahmini tasarruf rakamlarını kesin sonuç değil, öncelik ipucu olarak kullanın.
6. Değişiklikten sonra aynı koşullarda tekrar test edin.
7. Gerçek kullanıcı verisinin güncellenmesi için yeterli süre tanıyın.

100 puan hedefi uğruna önemli işlevleri kaldırmak doğru değildir. Esas hedef kullanıcı deneyimi ve işlevsellik arasında sağlıklı dengedir.

WordPress sitelerde yaygın sorunlar

WordPress’in kendisi otomatik olarak yavaş değildir; tema, sayfa oluşturucu, eklenti, sunucu ve içerik uygulaması sonucu belirler. Sık görülen problemler:

• Her sayfada çalışan gereksiz eklenti dosyaları
• Çok büyük kahraman görselleri ve arka plan videoları
• Birden fazla yazı tipi ailesi ve ağırlığı
• Üst üste kullanılan önbellek/optimizasyon eklentileri
• Ağır kaydırıcılar ve animasyonlar
• Veritabanında aşırı otomatik yüklenen seçenekler
• Harita, sohbet ve izleme araçlarının erken yüklenmesi
• Mobilde farklı fakat yine ağır bileşenler

Önce yedek ve test ortamı oluşturulmalı; birden fazla küçültme, geciktirme ve birleştirme ayarı aynı anda değiştirilmemelidir. Aksi hâlde hangi ayarın iyileştirdiği veya işlevi bozduğu anlaşılamaz.

Önceliklendirme planı

Core Web Vitals çalışması şu sırayla yönetilebilir:

1. Organik trafik ve gelir açısından önemli şablonları seçin.
2. Gerçek kullanıcı verisinde başarısız metrik ve cihazı belirleyin.
3. Tekil URL yerine aynı şablonu kullanan sayfa grubunu inceleyin.
4. En büyük LCP, INP veya CLS nedenini doğrulayın.
5. Düşük riskli ve geniş etkili düzeltmeleri uygulayın.
6. İşlevsel test, görsel karşılaştırma ve performans testi yapın.
7. Değişiklikleri tarih ve sürümle kaydedin.
8. Search Console doğrulamasını başlatıp alan verisini izleyin.

Şablon düzeltmeleri çok sayıda URL’yi etkileyebilir. Buna karşılık tek sayfadaki dev görsel gibi içerik kaynaklı sorunlar ayrı ele alınmalıdır.

Core Web Vitals ve SEO ilişkisi

Sayfa deneyimi Google sıralama sistemlerinin değerlendirdiği unsurlardan biridir; ancak mükemmel hız puanı zayıf içeriği otomatik olarak ilk sıraya taşımaz. Arama niyeti, yararlı içerik, bağlantılar ve diğer kalite sinyalleri önemini korur.

Performans iyileştirmesi dolaylı olarak da katkı sağlar: kullanıcı içeriğe daha hızlı ulaşır, form ve gezinme daha rahat çalışır, reklam açılış sayfası deneyimi iyileşebilir. Bu nedenle çalışma yalnızca “SEO işi” olarak görülmemelidir.

Sık yapılan hatalar

• Yalnızca ana sayfayı test etmek
• Masaüstü puanını mobil performans sanmak
• Tek laboratuvar sonucuna kesin gerçek muamelesi yapmak
• LCP görselini tembel yüklemek
• Bütün betikleri geciktirip menü ve formu bozmak
• Görsel boyutu tanımlamadan yalnızca sıkıştırma yapmak
• Çok sayıda önbellek eklentisini aynı anda kullanmak
• Değişiklik sonrası dönüşüm etiketlerini test etmemek
• Alan verisinin anında değişmesini beklemek
• 100 puanı iş hedefinin önüne koymak

Sık sorulan sorular

Core Web Vitals değerleri kaç olmalı?

1. yüzdelik dilimde LCP 2,5 saniye veya daha kısa, INP 200 ms veya daha kısa, CLS 0,1 veya daha düşük hedeflenir.

FID yerine neden INP kullanılıyor?

INP, yalnızca ilk etkileşimi değil sayfa ömründeki etkileşimlerin genel yanıt kalitesini değerlendirerek daha kapsamlı bir kullanıcı deneyimi görünümü sunar.

PageSpeed puanı ile Core Web Vitals aynı mı?

Hayır. Lighthouse performans puanı laboratuvar koşullarındaki bir bileşik puandır. Core Web Vitals ise belirli üç metriğin, mümkün olduğunda gerçek kullanıcı verisindeki durumudur.

Önbellek eklentisi tüm sorunları çözer mi?

Hayır. Önbellek sunucu ve kaynak teslimini iyileştirebilir; fakat ağır JavaScript, yanlış görsel, yerleşim kayması veya üçüncü taraf betik gibi sorunlar ayrıca düzeltilmelidir.

Değişiklik neden Search Console’a hemen yansımadı?

Alan verisi geçmiş gerçek kullanıcı ziyaretlerini topladığı için güncellenmesi zaman alır. Laboratuvar testi teknik değişimi hemen gösterebilir, Search Console raporu daha sonra yenilenir.

Performans, tasarım ve içerikten ayrı bir teknik puan değildir. UI ve UX rehberi kullanılabilirlik bağını, İzmir web tasarım sayfası uygulama yaklaşımını ve web sitesi fiyatları rehberi performans kapsamının bütçedeki yerini tamamlar.

Sonuç

Core Web Vitals optimizasyonu tek bir eklenti ayarı veya skor yarışı değildir. LCP’de ana içeriğin gelişini, INP’de etkileşim yanıtını, CLS’de görsel kararlılığı ayrı ayrı incelemek gerekir. Gerçek kullanıcı verisiyle önceliklendirilen ve işlevsel testlerle doğrulanan düzenlemeler hem SEO hem kullanıcı hem de dönüşüm performansı için kalıcı değer üretir.