Core Web Vitals Nedir? LCP, INP ve CLS Değerleri Nasıl İyileştirilir?
Core Web Vitals, web sayfalarındaki kullanıcı deneyiminin belirli teknik yönlerini ölçmek için kullanılan metriklerdir. Güncel temel Core Web Vitals metrikleri LCP, INP ve CLS'dir. Bunlar sırasıyla yüklenme performansını, kullanıcı etkileşimlerine verilen görsel yanıtı ve sayfanın görsel stabilitesini değerlendirmeye yardımcı olur.
Temel hedefler genel olarak şöyledir:
- LCP: 2,5 saniye veya daha düşük
- INP: 200 ms veya daha düşük
- CLS: 0,1 veya daha düşük
Bu değerler tek bir test sonucundan ziyade gerçek kullanıcı deneyimi kapsamında değerlendirilirken belirli bir kullanıcı dağılımı dikkate alınır.
LCP nedir?
LCP, Largest Contentful Paint ifadesinin kısaltmasıdır.
Sayfanın görünür alanındaki en büyük içerik öğesinin ne kadar sürede görüntülendiğini ölçer.
LCP öğesi örneğin:
- Hero görseli
- Büyük içerik görseli
- Büyük başlık
- Metin bloğu
olabilir.
Kullanıcı sayfayı açtığında ana içeriğin uzun süre görünmemesi yüksek LCP değerine yol açabilir.
LCP kaç olmalı?
Genel değerlendirmede:
2,5 saniye veya altı: İyi
2,5–4 saniye: İyileştirme gerekli
4 saniye üzeri: Zayıf
LCP yüksekse öncelikle hangi elementin LCP olduğunu tespit etmek gerekir.
LCP nasıl iyileştirilir?
Yaygın optimizasyonlar:
- Büyük hero görsellerini sıkıştırmak
- Görselleri uygun çözünürlükte sunmak
- WebP veya uygun modern formatları değerlendirmek
- LCP görselini gereksiz yere lazy load etmemek
- Sunucu yanıt süresini azaltmak
- Render engelleyen kaynakları incelemek
- Gereksiz JavaScript yükünü azaltmak
- Kritik kaynağın tarayıcı tarafından erken keşfedilmesini sağlamak
LCP sorunu her zaman görselden kaynaklanmadığı için önce ölçüm yapılmalıdır.
INP nedir?
INP, Interaction to Next Paint ifadesinin kısaltmasıdır.
Kullanıcının sayfayla gerçekleştirdiği etkileşimlerin ardından tarayıcının görsel olarak yanıt verebilme süresini değerlendirmeye yardımcı olur.
Örneğin kullanıcı:
- Menü butonuna basar.
- Bir sekmeyi değiştirir.
- Bir form kontrolüyle etkileşime girer.
- Bir butona tıklar.
ancak sayfa uzun süre tepki vermezse kullanıcı arayüzü yavaş hisseder.
INP kaç olmalı?
Genel değerlendirmede:
200 ms veya altı: İyi
200–500 ms: İyileştirme gerekli
500 ms üzeri: Zayıf
INP, yalnızca sayfanın ilk açılışını değil, ziyaret sırasında gerçekleşen kullanıcı etkileşimlerini değerlendirmesi açısından önemlidir.
INP nasıl iyileştirilir?
INP problemlerinde özellikle ana iş parçacığını uzun süre meşgul eden işlemler incelenmelidir.
Yaygın iyileştirmeler:
- Gereksiz JavaScript'i azaltmak
- Uzun görevleri daha küçük işlemlere bölmek
- Ağır event handler'ları optimize etmek
- Gereksiz DOM işlemlerini azaltmak
- Üçüncü taraf script'leri incelemek
- Kullanıcı etkileşiminden sonra yapılan gereksiz ağır işlemleri azaltmak
Örneğin basit bir menü butonuna tıklandığında yüzlerce milisaniye süren JavaScript işlemi çalışıyorsa menünün açılması gecikebilir.
FID ile INP arasındaki fark nedir?
Eski kaynaklarda Core Web Vitals içerisinde FID (First Input Delay) görebilirsiniz.
Google, 2024 yılında FID yerine INP'yi Core Web Vitals metriği olarak kullanmaya başladı.
Bu nedenle güncel temel üçlü:
LCP + INP + CLS
şeklindedir.
CLS nedir?
CLS, Cumulative Layout Shift ifadesinin kısaltmasıdır.
Sayfadaki içeriklerin kullanıcı beklemediği halde yer değiştirmesini ölçer.
Örneğin:
1. Kullanıcı bir butona basmak üzeredir.
2. Üst tarafta reklam yüklenir.
3. İçerik aşağı kayar.
4. Kullanıcı yanlış butona tıklar.
Bu durum kötü kullanıcı deneyimine örnektir.
CLS kaç olmalı?
Genel değerlendirmede:
0,1 veya altı: İyi
0,1–0,25: İyileştirme gerekli
0,25 üzeri: Zayıf
CLS diğer iki temel metrikten farklı olarak saniye veya milisaniye şeklinde ifade edilmez.
CLS nasıl iyileştirilir?
Yaygın yöntemler:
- Görsellere boyut veya en-boy oranı tanımlamak
- Reklam alanları için önceden yer ayırmak
- iframe ve embed alanlarının boyutlarını belirlemek
- Sonradan gelen banner'ların içeriği itmesini engellemek
- Font değişimlerinden kaynaklanan hareketleri azaltmak
- Dinamik içerikler için uygun placeholder kullanmak
Amaç sayfa yüklenirken mevcut içeriğin beklenmedik şekilde hareket etmesini azaltmaktır.
Core Web Vitals nasıl ölçülür?
Performans ölçümü için:
- PageSpeed Insights
- Search Console
- Chrome DevTools
- Lighthouse
gibi araçlardan yararlanılabilir.
Ancak araçların gösterdiği bütün sonuçlar aynı veri türünü temsil etmeyebilir.
Laboratuvar verisi nedir?
Laboratuvar verisi belirli test koşullarında yapılan kontrollü ölçümdür.
Bu ölçümler geliştirme sırasında sorunları tespit etmek için oldukça faydalıdır.
Örneğin bir değişiklik yaptıktan sonra LCP'nin neden yükseldiğini araştırmak için Lighthouse ve DevTools kullanılabilir.
Ancak tek bir laboratuvar testi bütün gerçek kullanıcıların deneyimini temsil etmez.
Gerçek kullanıcı verisi nedir?
Gerçek kullanıcı verileri, uygun veri bulunduğunda gerçek ziyaretçilerin yaşadığı performans deneyimlerinin toplu halini gösterir.
Kullanıcılar:
- Farklı telefonlar
- Farklı bilgisayarlar
- Farklı internet bağlantıları
- Farklı ekran boyutları
- Farklı coğrafi bölgeler
kullandığı için gerçek dünya sonuçları laboratuvar testlerinden farklı olabilir.
PageSpeed puanı ile Core Web Vitals aynı şey mi?
Hayır.
PageSpeed Insights içerisinde görülen Lighthouse performans puanı ile Core Web Vitals değerlendirmesini aynı şey olarak düşünmemek gerekir.
Örneğin Lighthouse performans puanının
100 olması tek başına bütün gerçek kullanıcıların Core Web Vitals değerlerinin iyi olduğu anlamına gelmez.Aynı şekilde laboratuvar testindeki düşük bir puan da gerçek kullanıcı verilerinin mutlaka aynı olacağını göstermez.
Search Console Core Web Vitals raporu ne işe yarar?
Search Console, yeterli gerçek kullanıcı verisi bulunan durumlarda benzer sorunları yaşayan URL gruplarını gösterebilir.
Böylece özellikle büyük sitelerde:
- Mobil performans
- Masaüstü performansı
- Sorunlu URL grupları
incelenebilir.
Bir şablonda yapılan düzeltme aynı yapıyı kullanan çok sayıda sayfayı etkileyebilir.
Core Web Vitals SEO'yu etkiler mi?
Core Web Vitals, Google'ın sayfa deneyimi kapsamında kullandığı sinyaller arasındadır. Ancak arama sıralamalarını yalnızca bu üç değere indirgemek doğru değildir.
Bir sayfanın:
- Arama sorgusuyla alakası
- İçerik kalitesi
- Kullanıcıya sağladığı fayda
- Teknik erişilebilirliği
gibi birçok unsur da önemlidir.
Bu nedenle sırf Core Web Vitals değerlerini iyileştirmek kaliteli içerik ihtiyacını ortadan kaldırmaz.
Mobil ve masaüstü sonuçları neden farklıdır?
Mobil cihazlarda:
- İşlemci daha yavaş olabilir.
- İnternet bağlantısı daha düşük hızda olabilir.
- JavaScript işlemleri daha uzun sürebilir.
- Görseller farklı şekilde yüklenebilir.
Bu nedenle masaüstünde çok iyi performans gösteren bir sayfa mobilde aynı sonucu vermeyebilir.
Mobil ve masaüstü deneyimini ayrı ayrı kontrol etmek önemlidir.
Core Web Vitals sorunları için nereden başlanmalı?
Öncelikle hangi metriğin sorunlu olduğunu belirleyin.
LCP kötüyse:
Ana içerik veya büyük görsellerin neden geç görüntülendiğini araştırın.
INP kötüyse:
JavaScript, event handler ve ana iş parçacığını meşgul eden uzun görevleri inceleyin.
CLS kötüyse:
Sayfa yüklenirken hareket eden görsel, reklam, banner veya dinamik içerikleri bulun.
Üç metriğe aynı çözümü uygulamak yerine her birinin nedenini ayrı incelemek gerekir.
Core Web Vitals için hızlı kontrol listesi
1. Önemli sayfaları PageSpeed Insights ile kontrol edin.
2. LCP öğesini tespit edin.
3. Büyük görselleri optimize edin.
4. Gereksiz JavaScript'i azaltın.
5. Uzun ana iş parçacığı görevlerini inceleyin.
6. Görseller için alan ayırın.
7. Reklam ve banner alanlarını kontrol edin.
8. Mobil sonuçları ayrıca test edin.
9. Search Console'daki gerçek kullanıcı verilerini takip edin.
10. Tek bir performans puanı yerine gerçek kullanıcı deneyimine odaklanın.
Özetle, Core Web Vitals; LCP, INP ve CLS olmak üzere üç temel kullanıcı deneyimi metriğinden oluşur. LCP yüklenme performansını, INP kullanıcı etkileşimlerine verilen yanıtı, CLS ise sayfanın görsel stabilitesini değerlendirmeye yardımcı olur.
Core Web Vitals optimizasyonunda amaç yalnızca test araçlarında yüksek puan almak değil, gerçek kullanıcıların hızlı açılan, etkileşimlere hızlı yanıt veren ve yüklenirken beklenmedik şekilde hareket etmeyen bir web sitesi kullanmasını sağlamaktır.