Core Web Vitals nedir? LCP, INP ve CLS'yi iyileştirme rehberi

Bir sayfanın hızlı olduğunu söylemek kolaydır, ama "hızlı" kelimesi farklı şeyler anlatabilir. Ana içerik ne zaman göründü? Bir butona basıldığında sayfa ne kadar sürede tepki verdi? Okurken içerik aşağı yukarı kaydı mı?

Core Web Vitals bu soruların her birini ölçülebilir hale getirir. Bu yazıda üç ölçütün ne anlama geldiğini, nasıl ölçüleceğini ve her birini iyileştirmek için hangi adımların işe yaradığını anlatıyoruz.

Core Web Vitals nedir?

Core Web Vitals, Google'ın Web Vitals girişimi kapsamında belirlediği ve kullanıcı deneyiminin temel boyutlarını ölçen üç metrik demektir. Bu metrikler laboratuvar koşullarından çok, sitenizi gerçekten ziyaret eden kullanıcıların tarayıcılarından toplanan verilerle değerlendirilir.

Üç ölçüt şunlardır:

• LCP (Largest Contentful Paint): Sayfadaki en büyük görünür içerik öğesinin, genellikle ana görselin ya da başlık bloğunun, ekrana çizilme süresi.
• INP (Interaction to Next Paint): Kullanıcının tıklama, dokunma ya da klavye etkileşimlerinden sonra sayfanın bir sonraki görsel güncellemeyi yapması için geçen süre. Mart 2024'te FID'in yerini aldı.
• CLS (Cumulative Layout Shift): Sayfa açıkken beklenmedik biçimde kayan içeriklerin toplam etkisi.

Eşik değerleri nelerdir?

Google her metrik için üç aralık tanımlar. Değerlendirme, sayfa ziyaretlerinin 75. yüzdelik dilimine göre yapılır ve mobil ile masaüstü ayrı ayrı ölçülür.

75. yüzdelik dilim şu anlama gelir: ziyaretlerin dörtte üçünde değer eşiğin altında kalıyorsa sayfa o metrikte "iyi" kabul edilir. Bu yaklaşım, yalnızca hızlı cihazlarda ya da güçlü bağlantılarda değil, kullanıcıların büyük çoğunluğunda iyi bir deneyim sunmayı hedefler.

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

Ölçüm araçları iki gruba ayrılır: gerçek kullanıcılardan toplanan saha verisi ve kontrollü ortamda yapılan laboratuvar testleri.

Saha verisi, Chrome Kullanıcı Deneyimi Raporu (CrUX) üzerinden gelir ve son 28 günün kullanımını yansıtır. Bu nedenle yaptığınız bir iyileştirmenin raporlara yansıması zaman alır. Lighthouse gibi laboratuvar araçları ise gerçek etkileşim olmadığı için INP'yi doğrudan ölçemez; yerine Total Blocking Time gibi yardımcı metrikler kullanır.

Az trafik alan sayfalarda CrUX verisi bulunmayabilir. Bu durumda web-vitals kütüphanesiyle kendi ölçümünüzü toplamak en sağlıklı yoldur.

LCP nasıl iyileştirilir?

LCP genellikle sayfanın en büyük görseli ya da ilk ekrandaki büyük metin bloğudur. Süreyi dört parçaya ayırarak düşünmek, sorunun nerede olduğunu bulmayı kolaylaştırır: sunucunun ilk yanıt süresi (TTFB), kaynağın yüklenmeye başlamadan önce beklediği süre, kaynağın indirilme süresi ve öğenin ekrana çizilme gecikmesi.

İşe yarayan başlıca adımlar:

• Sunucu yanıtını hızlandırın: Önbellek, CDN ve sunucu tarafında oluşturulan ya da statik sayfalar TTFB'yi düşürür.
• LCP görselini erken keşfettirin: Görseli HTML içinde doğrudan verin, fetchpriority="high" ile önceliklendirin ve gerekirse önceden yükleyin.
• LCP görselini tembel yüklemeyin: loading="lazy" ilk ekrandaki ana görselde kullanılmamalıdır.
• Görsel boyutunu küçültün: WebP ya da AVIF biçimi ve ekran boyutuna uygun srcset kullanın.
• Oluşturmayı engelleyen kaynakları azaltın: Kritik olmayan CSS ve JavaScript dosyalarını erteleyin.

Next.js kullanıyorsanız next/image bileşeninin öncelik ayarı ve next/font ile yazı tiplerinin yerel sunulması bu adımların bir kısmını kolaylaştırır.

INP nasıl iyileştirilir?

INP, sayfanın kullanıcıya ne kadar çabuk tepki verdiğini ölçer. Yüksek INP'nin en yaygın sebebi, tarayıcının ana iş parçacığını uzun süre meşgul eden JavaScript görevleridir. Tarayıcı bu sırada tıklamaya yanıt veremez.

• Uzun görevleri bölün: 50 milisaniyeyi aşan görevleri parçalara ayırın ve aralarda ana iş parçacığını serbest bırakın.
• JavaScript miktarını azaltın: Kullanılmayan kodları ve gereksiz üçüncü taraf betikleri kaldırın, kodu sayfalara göre bölün.
• Etkileşim anında yapılan işi küçültün: Kullanıcıya hemen görsel geri bildirim verin, ağır hesaplamaları sonraya bırakın.
• Gereksiz yeniden çizimlerden kaçının: Büyük DOM ağaçları ve art arda yapılan düzen hesaplamaları güncellemeyi yavaşlatır.
• Üçüncü taraf betikleri denetleyin: Sohbet araçları, reklam ve analiz betikleri çoğu zaman INP'yi en çok etkileyen kaynaklardır.

CLS nasıl düşürülür?

CLS, okumaya başladığınız metnin bir anda aşağı kayması ya da tıklamak üzere olduğunuz butonun yer değiştirmesi gibi can sıkıcı durumları ölçer. Sebebi çoğunlukla, yüklendikten sonra yer kaplayan ama önceden yeri ayrılmamış öğelerdir.

• Görsellere ve videolara width ve height değerleri ya da CSS aspect-ratio verin.
• Reklam, gömülü içerik ve bildirim alanları için önceden sabit bir alan ayırın.
• Mevcut içeriğin üstüne sonradan içerik eklemeyin; kullanıcı etkileşimiyle gelen değişiklikler bunun dışındadır.
• Web yazı tiplerinin yüklenirken düzeni kaydırmaması için yedek yazı tipiyle boyut uyumu sağlayın.
• Animasyonlarda konum ve boyut özellikleri yerine transform kullanın.

Core Web Vitals sıralamayı etkiler mi?

Core Web Vitals, Google'ın sayfa deneyimi sinyallerinin bir parçasıdır. Google'ın açıklamalarına göre arama sonuçlarında belirleyici olan esas unsur içeriğin alaka düzeyi ve kalitesidir; iyi bir sayfa deneyimi ise benzer kalitedeki sayfalar arasında fark yaratabilir.

Bu yüzden Core Web Vitals'ı yalnızca bir sıralama hilesi olarak görmemek gerekir. Hızlı açılan ve kaymayan sayfalar, ziyaretçinin sitede kalmasını ve form doldurmasını kolaylaştırır. Bu iyileştirmelerin etkisi arama trafiğinin ötesine geçer.

Teknik SEO'nun diğer başlıklarını teknik SEO kontrol listesi yazımızda topladık. Yeni bir kurumsal site planlıyorsanız kurumsal web sitesi yaptırırken dikkat edilmesi gerekenler yazımız da işinize yarayabilir.

Sitenizin performansını ölçüp iyileştirmek istiyorsanız web uygulama ve site geliştirme hizmetimizde bu çalışmaları yapıyoruz. Yayındaki sitelerin düzenli izlenmesi için bakım ve destek hizmetimize de göz atabilirsiniz.