CLS nedir?

CLS (Cumulative Layout Shift, kümülatif düzen kayması), sayfadaki içeriğin beklenmedik anda yer değiştirmesini ölçer. Okumaya başladığın metin, üstte geç yüklenen bir reklam yüzünden aşağı kayıyorsa ya da tam basacakken düğme yer değiştiriyorsa CLS yüksektir. Birimsiz bir puandır: kayan alanın büyüklüğü ve kayma mesafesiyle hesaplanır.

#Neden önemli

• Kayan sayfa yanlış tıklamalara, kaybolan okuma yerine ve güvensizlik hissine yol açar.
• CLS, Core Web Vitals'ın üç metriğinden biridir.
• Düzeltmesi çoğunlukla kolaydır: alan ayırmak yeterlidir.
• Kullanıcının bir etkileşiminden hemen sonra (yaklaşık 500 ms içinde) olan kaymalar, örneğin bir menüyü açınca içeriğin aşağı inmesi, sayılmaz. Puanı yalnızca beklenmeyen kaymalar artırır.

#SEOAsist'te nerede görürsün

• Genel Bakış sayfasındaki Core Web Vitals kartında CLS mobil ve masaüstü için ayrı gösterilir.
• SEO analizinde mobil CLS 0,1'i aşarsa Düzen kayması bulgusu çıkar; öneri, görsel boyutlarını ve geç yüklenen blokları sabitlemektir.

Ayrıntılar: Genel bakış paneli.

#Örnek

<!-- Boyutsuz görsel: yüklenince altındaki her şeyi iter -->
<img src="/img/urun.webp" alt="Meşe masa">

<!-- Boyutlu görsel: tarayıcı yerini önceden ayırır -->
<img src="/img/urun.webp" alt="Meşe masa" width="800" height="600">

<!-- Geç gelen banner için sabit yükseklikte yer tut -->
<div style="min-height:90px"><!-- kampanya banner'ı --></div>

#Sık yapılan hatalar

• Görsel ve videolara width/height (veya aspect-ratio) vermemek.
• Çerez bildirimi veya kampanya şeridini içeriğin üstüne sonradan eklemek; alttan açılan katman kullan.
• Web fontu yüklenince metnin boyutunun çok değişmesi; benzer metrikli yedek font seç.
• Kaymayı yalnızca ilk yüklemede aramak; kaydırma sırasında yüklenen içerik de CLS üretir.