CLS Nedir?
İngilizce: CLS (Cumulative Layout Shift)
CLS, sayfa yüklenirken beklenmedik yer değiştirmelerin görsel kararlılığı ne kadar bozduğunu ölçen Core Web Vitals metriğidir.
CLS Nedir?
CLS (Cumulative Layout Shift), sayfa yüklenirken kullanıcının beklemediği görsel kaymaların toplam etkisini ölçen Core Web Vitals metriğidir. Kullanıcı bir butona tıklamak üzereyken üstten geç gelen reklam veya görsel sayfayı aşağı iterse CLS oluşur.
CLS yalnızca hareketi değil, hareketin ekrandaki etkisini de hesaba katar. Büyük bir alanın ani yer değiştirmesi küçük bir metin kaymasından daha yüksek skor üretir. İyi kullanıcı deneyimi için hedef genellikle 0.1 veya altıdır.
Neden Oluşur?
Boyutu belirtilmemiş görseller, geç yüklenen reklam alanları, dinamik banner’lar, font değişimi, üst tarafa eklenen bildirimler ve rezerv alan bırakılmayan embed’ler yaygın nedenlerdir. Sorun çoğu zaman JavaScript’ten değil, layout için önceden yer ayrılmamasından kaynaklanır.
Önlem olarak görsel width-height veya aspect-ratio değerleri tanımlanmalı, reklam ve iframe alanları rezerve edilmeli, font yükleme stratejisi ayarlanmalı ve kullanıcı etkileşimi olmadan içeriği üste iten bileşenlerden kaçınılmalıdır.
Core Web Vitals içinde CLS görsel kararlılığı temsil eder. LCP ise en büyük içerik öğesinin ne kadar hızlı göründüğünü ölçer; iki metrik birlikte sayfa deneyiminin farklı yönlerini açıklar.