Pazarlama ve satış ·

Core Web Vitals nedir? LCP, INP ve CLS nasıl iyileştirilir?

Core Web Vitals; yükleme, etkileşim ve görsel kararlılığı ölçer. LCP, INP ve CLS’in eşik değerleri ile her biri için pratik iyileştirme adımları.

Core Web Vitals, Google’ın bir sayfanın gerçek kullanıcı deneyimini ölçmek için seçtiği üç metriktir: sayfa ne kadar çabuk yükleniyor, tıklamalara ne kadar çabuk cevap veriyor ve yüklenirken içerik ne kadar yerinde duruyor? Bunlar sayfa deneyimi sinyallerinin bir parçasıdır; ama önemi sıralamadan öte, ziyaretçinin sayfada kalıp kalmamasıdır.

Üç metrik ve “iyi” eşikleri

  • LCP (Largest Contentful Paint): Sayfanın en büyük içeriğinin (genellikle ana görsel veya başlık bloğu) görünme süresi. İyi: 2,5 saniye veya altı.
  • INP (Interaction to Next Paint): Kullanıcı tıkladığında, dokunduğunda ya da tuşa bastığında arayüzün ne kadar çabuk tepki verdiği. İyi: 200 milisaniye veya altı.
  • CLS (Cumulative Layout Shift): Yüklenme sırasında içeriğin istemeden kayma miktarı. İyi: 0,1 veya altı.

Değerlendirme, ziyaretçilerin %75’inin deneyimine (75. yüzdelik) göre yapılır ve mobil ile masaüstü ayrı ölçülür.

Ölçüm: laboratuvar mı, saha mı?

İki tür veri vardır. Laboratuvar verisi (Lighthouse, PageSpeed Insights) kontrollü bir testtir; hata ayıklamak için idealdir. Saha verisi (Chrome Kullanıcı Deneyimi Raporu, Search Console “Temel Web Verileri”) gerçek ziyaretçilerin yaşadığı değerdir ve karar verirken esas alınan odur. Az trafiği olan sitelerde saha verisi hiç görünmeyebilir; bu durumda laboratuvar sonuçlarına ve kullanıcı geri bildirimine dayanın.

LCP’yi iyileştirmek

  1. En büyük öğe genellikle bir görseldir: boyutunu küçültün, WebP/AVIF kullanın, doğru boyutta sunun.
  2. Ana görseli tembel yüklemeyin; fetchpriority="high" ile önceliklendirin, ekran altındakileri tembel yükleyin.
  3. Sunucu yanıt süresini (TTFB) düşürün: önbellek, CDN ve hızlı barındırma.
  4. Render’ı engelleyen CSS/JS’i azaltın; kritik CSS’i öne alın.

INP’yi iyileştirmek

  1. Uzun JavaScript görevlerini bölün; ana iş parçacığını meşgul eden betikleri küçültün.
  2. Üçüncü taraf betikleri (sohbet, takip, reklam) gözden geçirin; gerekmeyenleri kaldırın, kalanları geciktirerek yükleyin.
  3. Tıklamaya cevap veren kodu hafif tutun; ağır hesaplamayı sonraya erteleyin.

CLS’i iyileştirmek

  1. Tüm görsel ve videolara width ve height verin (ya da aspect-ratio) ki yer önceden ayrılsın.
  2. Reklam, çerez bandı ve yerleşik içerikler için yer ayırın; sayfanın üstüne sonradan içerik eklemeyin.
  3. Web yazı tipi yüklenirken oluşan kaymayı font-display ve yazı tipi ön yüklemesiyle azaltın.

Önceliği nasıl belirlersiniz?

Önce Search Console’da “kötü” ve “iyileştirme gerekli” olan sayfa gruplarını bulun. Aynı şablonu paylaşan sayfalar aynı sorunu taşır; şablonu düzeltmek yüzlerce sayfayı birden iyileştirir. Her değişiklikten sonra laboratuvar testini tekrarlayın, saha verisinin yenilenmesi için birkaç hafta bekleyin.

Core Web Vitals tek başına sıralamayı kurtarmaz; içerik uygunluğu daha önce gelir. Ama yavaş ve kararsız bir sayfa, iyi içeriğin değerini düşürür. Teknik kontrolün tamamı için kontrol listemize bakın; sitenizi birlikte ölçmek için keşif görüşmesi planlayabilirsiniz.