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

Core Web Vitals, Google'ın bir sayfanın gerçek kullanıcılar için ne kadar hızlı yüklendiğini, etkileşime ne kadar çabuk tepki verdiğini ve yüklenirken ne kadar kaydığını ölçmek için tanımladığı üç metriğin ortak adıdır. Google bu metrikleri sayfa deneyimi sinyalleri arasında sayar. Tek başlarına içerik kalitesinin önüne geçmezler; ancak benzer içerikler arasında fark yaratabilirler ve kötü değerler ziyaretçinin daha siz bir şey anlatamadan sayfadan ayrılmasına yol açar.

Üç metrik ne ölçer?

LCP: Largest Contentful Paint

Ekranda görünen en büyük içerik öğesinin (genellikle bir kapak görseli, büyük bir başlık ya da video karesi) ne kadar sürede göründüğünü ölçer. Kullanıcının 'sayfa açıldı' dediği an kabaca budur. Google'ın yayınladığı eşiklere göre yaklaşık 2,5 saniye ve altı iyi sayılır; 4 saniyeyi aşan değerler kötü kabul edilir.

INP: Interaction to Next Paint

Kullanıcı bir butona tıkladığında, bir menüyü açtığında veya bir alana yazdığında ekranın ne kadar sürede tepki verdiğini ölçer. Sayfadaki tüm etkileşimler değerlendirilir ve en kötülerinden biri raporlanır. Google'a göre yaklaşık 200 milisaniye ve altı iyi, 500 milisaniyenin üzeri kötüdür. INP, yalnızca ilk etkileşimi ölçen önceki metrik FID'in yerini aldı.

CLS: Cumulative Layout Shift

Yükleme sırasında öğelerin beklenmedik biçimde kayma miktarını ölçer. Tam okumaya başladığınız paragrafın üstüne bir reklam yüklenip metni aşağı ittiğinde yaşadığınız şey budur. Birimsiz bir puandır; yaklaşık 0,1 ve altı iyi, 0,25 üzeri kötü sayılır.

Sıralamayı ne kadar etkiler?

Bu soruya dürüst cevap: içerik ve linklerden daha az, ama sıfır değil. Google sayfa deneyimini bir dizi sinyalden biri olarak kullandığını söylüyor; sorusuna en iyi cevabı veren sayfa, yavaş olsa da genellikle üstte kalır. İki sayfa içerik olarak benzer düzeydeyse hızlı olan avantajlı hale gelir. Bir de dolaylı etki var: Yavaş açılan ya da tıklamaya geç tepki veren bir sayfadan kullanıcı geri döner, bir sonrakine tıklar ve siz hem bir ziyaretçi hem de olası bir dönüşüm kaybedersiniz.

Pratikte şu sırayı izleyin: Sayfanız kötü bölgedeyse düzeltmek öncelik taşır; iyi bölgedeyse daha fazla iyileştirmeye harcayacağınız zamanı içeriğe ya da iç linklemeye ayırmak çoğu zaman daha çok kazandırır. Değerleri iyileştirme gerekli bölgesinden iyi bölgesine taşımak ise, özellikle para kazandıran sayfalarda, çabasına değer.

Laboratuvar verisi ile saha verisi arasındaki fark

Core Web Vitals'ı doğru okumak için iki tür veriyi ayırmanız gerekir. Laboratuvar verisi, bir aracın sabit koşullarda (belirli bir cihaz profili, belirli bir bağlantı hızı) sayfanızı yükleyip ölçmesidir; Lighthouse bunu yapar. Tekrarlanabilir olduğu için sorunları ayıklamada idealdir. Saha verisi ise sitenizi gerçekten ziyaret eden Chrome kullanıcılarından toplanan ölçümlerdir ve Google sıralama sinyali olarak bu veriyi kullanır.

İkisi sık sık çelişir. Lighthouse'da yeşil puan alan bir sayfa, kullanıcılarınızın çoğu eski telefonlardan ve zayıf mobil bağlantılardan geliyorsa sahada kırmızı görünebilir. Tersine, laboratuvarda yavaş görünen bir sayfa, kullanıcılarınız ofis bilgisayarlarından geliyorsa sahada sorunsuz olabilir. Karar verirken saha verisine, sorunu bulurken laboratuvar verisine bakın.

Core Web Vitals nasıl ölçülür?

Search Console raporu

Search Console'daki Core Web Vitals raporu saha verisine dayanır ve URL'leri mobil ve masaüstü için ayrı ayrı iyi, iyileştirme gerekli ve kötü gruplarına ayırır. Benzer sayfaları gruplar; yani ürün sayfaları ya da blog yazıları şablonundaki ortak bir sorunu tek satırda görürsünüz. Raporun bir sınırı var: Yeterli ziyaretçisi olmayan sayfalar veya siteler için veri gösterilmez. Küçük sitelerde raporun boş olması bir sorun olmadığı anlamına gelmez.

PageSpeed Insights

Tek bir URL girersiniz; üstte o sayfa için saha verisini (varsa), altta Lighthouse laboratuvar sonucunu görürsünüz. Belirli bir sayfadaki sorunu ayrıntılı incelemek için en pratik yoldur. Hangi öğenin LCP öğesi olduğunu ve hangi scriptlerin ana iş parçacığını meşgul ettiğini de gösterir.

Lighthouse ve tarayıcı araçları

Chrome'un geliştirici araçlarındaki Lighthouse sekmesi aynı denetimi yerelde çalıştırır. Performance sekmesi ise etkileşim sorunlarını, yani INP'yi, kare kare incelemenizi sağlar. Site genelini düzenli taramak isterseniz bir site denetim aracı Lighthouse'u tüm sayfalarınızda çalıştırıp sonuçları tek tabloda toplar; weranklab'in site denetimi bunu teknik hatalarla aynı raporda yapar ve sayfa başına kredi düştüğü için aylık bir plana bağlı kalmazsınız.

Ölçümü her zaman mobil profilde yapın. Trafiğinizin çoğu masaüstünden gelse bile Google siteleri öncelikle mobil sürüm üzerinden değerlendirir ve mobil değerler neredeyse her zaman daha kötüdür.

Yaygın LCP sorunları ve çözümleri

• Yavaş sunucu yanıtı: Tarayıcı ilk baytı geç alıyorsa geri kalan her şey gecikir. Sunucu tarafı önbellekleme, daha iyi bir barındırma veya CDN ilk bakılacak yerlerdir.
• Büyük kapak görseli: LCP öğesi çoğunlukla bir görseldir. WebP veya AVIF formatında, ekranda görüneceği boyutta sunun; farklı ekranlar için srcset tanımlayın.
• Lazy load edilen ana görsel: Ekranın üst kısmındaki görseli ertelemek LCP'yi doğrudan kötüleştirir. Yalnızca ekran dışındaki görselleri erteleyin ve LCP görseline yüksek yükleme önceliği (fetchpriority) verin.
• Render'ı engelleyen CSS ve JavaScript: Head içindeki büyük stil dosyaları ve senkron scriptler ilk çizimi geciktirir. Kritik CSS'i satır içine alın, gerisini erteleyin.
• Web fontları: Font yüklenene kadar başlık görünmüyorsa LCP öğesi beklemede kalır. font-display: swap ve ön yükleme (preload) bu süreyi kısaltır.

Yaygın INP sorunları ve çözümleri

• Uzun JavaScript görevleri: Tıklamadan sonra ana iş parçacığında 50 milisaniyeden uzun süren görevler tepkiyi geciktirir. Büyük işleri küçük parçalara bölün ve araya tarayıcının çizim yapmasına izin verin.
• Üçüncü taraf scriptler: Sohbet balonları, analitik etiketler, A/B test araçları ve reklam kodları ana iş parçacığını paylaşır. Hangisinin ne kadar süre tükettiğini ölçün ve gereksizleri kaldırın.
• Etkileşimde ağır DOM güncellemeleri: Bir filtreye tıklandığında binlerce öğenin yeniden çizilmesi gözle görülür takılma yaratır. Görünür olmayan içeriği sonraya bırakın.
• Görsel geri bildirim eksikliği: Sunucu yanıtı beklenirken butonun hemen durum değiştirmesi ölçülen INP'yi doğrudan iyileştirir; çünkü metrik bir sonraki çizime kadar geçen süreyi ölçer.

Yaygın CLS sorunları ve çözümleri

• Boyutu belirtilmemiş görseller ve videolar: width ve height özniteliklerini ya da CSS aspect-ratio tanımını verin; tarayıcı yeri önceden ayırsın.
• Geç yüklenen reklam ve embed alanları: Reklamın geleceği kutuya sabit bir yükseklik verin; reklam gelmezse alan boş kalsın.
• İçeriğin üstüne eklenen bannerlar: Çerez bildirimi, kampanya çubuğu veya uygulama daveti içeriği aşağı itiyorsa overlay olarak gösterin ya da yerini baştan ayırın.
• Font değişimi: Yedek font ile asıl font arasındaki boyut farkı satırları kaydırır. size-adjust ile yedek fontu asıl fonta yaklaştırabilirsiniz.
• Etkileşimden sonra içerik ekleme: Kullanıcı tıklamasına hemen bağlı kaymalar sayılmaz; ancak tıklamadan yarım saniye sonra gelen kaymalar sayılır.

Hangi sırayla çalışmalısınız?

1. Search Console raporunda en çok URL içeren kötü gruptan başlayın. Şablon bazlı tek bir düzeltme yüzlerce sayfayı aynı anda iyileştirir.
2. Her grup için temsili bir URL'yi PageSpeed Insights'ta açın; LCP öğesini, en uzun görevi ve kayan öğeleri belirleyin.
3. Düzeltmeyi yapın, Lighthouse ile yerelde doğrulayın, sonra sahada görmek için bekleyin. Saha verisi son 28 günü yansıttığından etkiyi raporlarda görmeniz haftalar alabilir.
4. Trafik getiren sayfalara öncelik verin. Kimsenin ziyaret etmediği bir sayfanın LCP'si ne sıralamanızı ne gelirinizi etkiler.

Core Web Vitals, teknik SEO kontrol listesinin bir parçasıdır; taranabilirlik ve indeksleme sorunları dururken hıza odaklanmak sırayı karıştırmak olur. Önce Google'ın sayfaya ulaştığından emin olun, sonra deneyimi iyileştirin. İyileştirmelerin sıralamaya etkisini görmek için ilgili kelimeleri takibe alın; sıralama takibi rehberi düzeltme tarihlerini grafik notlarıyla eşleştirmeyi anlatır. Sayfanın mobil ve masaüstü konumlarını ayrı ayrı doğrulamak isterseniz ücretsiz sıra kontrol aracı kayıt gerektirmez.

Puan avcılığına kapılmayın. Lighthouse'da 100 almak için yapılan son birkaç puanlık iyileştirme çoğu zaman kullanıcı için hissedilir bir fark yaratmaz; aynı çabayı INP'si kötü olan gerçek bir ödeme sayfasına harcamak daha çok kazandırır.