Core Web Vitals Nedir? LCP, INP ve CLS’i Anlamak

Core Web Vitals nedir? Kısaca, Google'ın bir web sayfasındaki kullanıcı deneyimini ölçmek için kullandığı üç temel metriktir: sayfanın ana içeriğinin ne kadar hızlı yüklendiği (LCP), sayfanın tıklama ve dokunuşlara ne kadar çabuk tepki verdiği (INP) ve sayfa yüklenirken içeriğin ne kadar kaydığı (CLS). 12 Mart 2024'ten bu yana etkileşim metriği olarak FID'nin yerini INP almıştır.

Core Web Vitals nedir ve neden önemlidir?

Bir ziyaretçi sitenize girdiğinde üç şeyi hemen fark eder: Sayfa ne kadar çabuk açıldı, bir yere dokunduğunda tepki ne kadar hızlı geldi ve okumaya çalışırken içerik yerinden oynadı mı? Kısacası Core Web Vitals, bu üç deneyimi sayıya çevirir.

Google, bu metriklerin arama sıralama sistemlerinde kullanıldığını açıkça belirtir ve site sahiplerine iyi değerler hedeflemelerini önerir. Bununla birlikte Google, sayfa deneyimi zayıf olsa bile en alakalı içeriği göstermeye çalıştığını da vurgular. Yani Core Web Vitals tek başına bir sıralama garantisi değildir. Ancak benzer kalitede içerikler arasında fark yaratabilen bir etkendir. SEO'nun genel çerçevesini SEO nedir yazımızda anlattık.

Sıralamadan bağımsız olarak hız ve kararlılık doğrudan iş sonucunu etkiler: Yavaş açılan, dokunuşa geç tepki veren ya da yanlış butona bastıran bir sayfa, ziyaretçiyi formu doldurmadan kaçırır.

Üç metrik ne ölçer? LCP, INP ve CLS

Bir sayfanın "iyi" sayılması için bu üç değerin, gerçek ziyaretlerin 75. yüzdelik diliminde eşiği geçmesi gerekir. Bu şu anlama gelir: Ziyaretlerin en az dörtte üçü iyi bir deneyim yaşamalıdır. Ayrıca mobil ve masaüstü ayrı değerlendirilir. Çoğu sitede asıl zorluk mobildedir.

LCP: Ana içerik ne zaman göründü?

LCP (Largest Contentful Paint, en büyük içerikli boyama), görünür alandaki en büyük görselin ya da metin bloğunun ekrana çizildiği anı ölçer. Kurumsal sitelerde bu genellikle açılıştaki büyük görsel (hero görseli), bir slayt ya da ana başlıktır.

LCP'yi en çok bozan etkenler:

• Sıkıştırılmamış, gereğinden büyük görseller. Doğru format seçimi için kayıplı ve kayıpsız sıkıştırma yazımıza bakabilirsiniz.
• Ana görselin "tembel yükleme" (lazy load) ile geciktirilmesi. Özellikle ekranın üstündeki görseli geciktirmemelisiniz.
• Sunucunun ilk yanıtı geç vermesi. Paylaşımlı bir sunucunun sınırlarını hosting yazımızda anlatmıştık.
• Sayfanın çizilmesini engelleyen büyük CSS ve JavaScript dosyaları.

INP: Sayfa tıklamaya ne kadar çabuk tepki verdi?

INP (Interaction to Next Paint, bir sonraki boyamaya kadar etkileşim), ziyaretçinin sayfadaki tıklama, dokunma ve klavye etkileşimlerinden sonra ekranda bir değişiklik görmesinin ne kadar sürdüğünü ölçer. Tek bir etkileşime değil, ziyaret boyunca yapılan etkileşimlere bakar ve neredeyse tamamının altında kaldığı gecikmeyi raporlar. Buna karşılık fareyle üzerine gelme (hover) ve kaydırma (scroll) tek başına sayılmaz.

Pratikte INP sorunları şöyle görünür: Menü butonuna basılır ama menü bir an sonra açılır, sekmeler geç değişir, "Sepete ekle" butonu donuk kalır. Bunun nedeni çoğunlukla tarayıcının ana iş parçacığını meşgul eden ağır JavaScript kodudur: çok sayıda eklenti betiği, sohbet balonları, takip kodları ya da büyük animasyon kütüphaneleri.

CLS: İçerik yerinden kaydı mı?

CLS (Cumulative Layout Shift, toplam düzen kayması), sayfa açılırken ya da kullanılırken içeriğin beklenmedik biçimde ne kadar yer değiştirdiğini ölçer. Örneğin bir habere tıklamak üzereyken üstte bir reklam belirip metni aşağı ittiğinde yaşadığınız şey budur.

En yaygın nedenler:

• Genişlik ve yükseklik değeri verilmemiş görseller ve videolar.
• Yedek fonttan farklı boyutta görünen web fontları.
• Sonradan yüklenip kendini büyüten reklam, harita ya da sosyal medya gömmeleri.
• Var olan içeriğin üstüne sonradan eklenen bantlar (ör. çerez bildirimi, duyuru şeridi).

INP neden FID'nin yerini aldı?

İlk Core Web Vitals setinde etkileşim metriği FID (First Input Delay, ilk girdi gecikmesi) idi. FID yalnızca ziyaretçinin ilk etkileşimine bakıyor ve bu etkileşimin de yalnızca işlenmeye başlamadan önceki bekleme süresini ölçüyordu. Yani sayfa ilk tıklamada hızlı, sonrakilerde yavaş olsa bile FID iyi görünebiliyordu.

Buna karşılık INP, ziyaret boyunca tüm etkileşimleri ve tepkinin ekrana yansımasına kadar geçen süreyi hesaba katar. Chrome ekibi INP'yi Mayıs 2022'de deneysel bir metrik olarak tanıttı. 12 Mart 2024'te INP resmî olarak Core Web Vital oldu ve FID programdan çıkarılarak kullanımdan kaldırıldı.

Bu değişikliğin site sahipleri için pratik sonucu şudur: FID'de sorunsuz görünen bazı siteler, INP'de "geliştirilmeli" ya da "zayıf" çıkabilir. Özellikle çok sayıda eklenti ve üçüncü taraf betik kullanan sitelerde INP'ye ayrıca bakmak gerekir.

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

İki tür veri vardır ve ikisini karıştırmamak önemlidir:

• Saha verisi (field data): Gerçek kullanıcıların gerçek cihazlarda yaşadığı deneyim. Google'ın değerlendirmesi bu veriye dayanır.
• Laboratuvar verisi (lab data): Kontrollü bir ortamda tek seferlik yapılan test. Sorunu bulmak ve düzeltmeyi denemek için kullanılır.

Sık karşılaşılan bir durum: Search Console'da "veri yok" mesajı. Bu genellikle sitenizin ya da sayfanızın, CrUX'te anlamlı bir rapor oluşturacak kadar ziyaret almadığı anlamına gelir. Search Console raporu ayrıca yalnızca dizine eklenmiş adresleri ve yeterli verisi olan sayfa gruplarını gösterir. Bu durumda PageSpeed Insights'taki laboratuvar sonuçları ve Chrome araçları yol gösterici olur.

Bir uyarı: PageSpeed Insights'taki 0–100 arası performans puanı bir laboratuvar puanıdır. Core Web Vitals değerlendirmesi ise sayfanın üstündeki saha verisine dayanır. Yani puanın 100 olmaması sitenizin "kötü" olduğu anlamına gelmez. Önemli olan, gerçek kullanıcıların üç metrikte eşiği geçmesidir.

Core Web Vitals nasıl iyileştirilir?

Her site farklıdır, ama kurumsal sitelerde en sık işe yarayan adımlar şunlardır:

LCP için

• Ana görseli doğru boyutta ve modern bir formatta (WebP ya da AVIF) sunun.
• Ekranın üstündeki görseli tembel yüklemeye bırakmayın.
• Sunucu yanıtını hızlandırın: sayfa önbelleği, güncel PHP sürümü, yeterli sunucu kaynağı.
• Kritik olmayan CSS ve JavaScript'i geciktirin ya da birleştirin.

INP için

• Kullanılmayan eklentileri ve üçüncü taraf betikleri kaldırın.
• Ağır animasyonları ve kaydırma efektlerini sınırlayın.
• Sohbet, harita ya da video gibi ağır gömmeleri ancak gerektiğinde yükleyin.

CLS için

• Tüm görsel ve videolara genişlik ve yükseklik verin.
• Web fontlarını sitenin kendi sunucusundan, gereken karakterlerle sınırlı biçimde sunun.
• Sonradan yüklenen bantlar ve gömmeler için önceden yer ayırın.

Optimizasyonun bir sınırı olduğunu da unutmayın. Örneğin bazı önbellek ve hızlandırma ayarları puanı yükseltirken sitenin çalışmasını bozabilir. Bu yüzden her değişiklikten sonra menüleri, formları ve mobil görünümü elle test etmek gerekir.

Bizim deneyimimiz

Kendi sitemiz artsution.com.tr WordPress, Hello Elementor ve Elementor Pro üzerinde, LiteSpeed sunucuda ve LiteSpeed Cache eklentisiyle çalışıyor. Mobil PageSpeed sonuçlarını iyileştirmek için CSS dosyalarını birleştirdik, fontları dış servisten çekmek yerine kendi sunucumuzdan sunduk ve Türkçe karakterleri de kapsayan küçük font alt kümeleri (subset) hazırladık. Ayrıca ekran dışında kalan animasyonları, ziyaretçi o bölüme gelene kadar çalıştırmıyoruz.

Bu süreçte bir ayarı bilinçli olarak kapalı tutuyoruz: LiteSpeed Cache'teki "Konuk İyileştirme" (guest optimization) özelliği. Bu özellik JavaScript'i ziyaretçinin ilk etkileşimine kadar geciktirebiliyor ve bunun sonucunda menü ve formların ilk dokunuşta çalışmadığını gördük. Laboratuvar puanı için yapılan bir iyileştirme, gerçek kullanıcının deneyimini bozuyorsa doğru bir iyileştirme değildir. INP'nin ölçmeye çalıştığı şey de tam olarak budur.

Sık sorulan sorular

Sonuç

Core Web Vitals, "site hızlı mı?" sorusunu üç somut soruya böler: Ana içerik hızlı yüklendi mi, sayfa dokunuşa hemen tepki verdi mi, içerik yerinde durdu mu? Bu metrikler arama görünürlüğünün tek belirleyicisi değildir, ama ziyaretçinin sitenizde kalıp kalmayacağını doğrudan etkiler.

Sitenizin Core Web Vitals değerlerini iyileştirmek ya da yeni bir siteyi baştan bu ölçütlere göre kurmak istiyorsanız web tasarım ve WordPress geliştirme hizmetlerimize göz atabilir ya da bizimle iletişime geçebilirsiniz.