Kümülatif Düzen Kayması (CLS) Nedir?

Cumulative Layout Shift (CLS), Türkçe anlamıyla Kümülatif düzen kayması web sayfası oluşturulurken render esnasında sayfaya yüklenen elementlerin kayması ile ortaya çıkan bi sorundur.

Kümülatif Düzen Kayması Sebepleri

Düzen kayması sayfaya elementlerin asenkron bir şekilde yüklenmesinden kaynaklanır.

CLS hatasını oluşturabilecek birden fazla sebep var;

Görsellerin Boyutlarının Belirtilmemesi (Image Dimensions)

Görsellerin width ve height değerleri belirtilmediğinde düzen kaymasına sebep oluyor.

Web tarayıcıları boyutları belirtilmiş elementler için render esnasında sayfadaki elemanları ve boşlukları hesaplayıp ona göre alan belirliyor. Görsellerin boyutları belirlenmediğinde ise görsel alanını oluşturamıyor ve yokmuş gibi sayfayı yüklerken bir anda görsel oluştuğunda altında kalan alan kayıyor.

PageSpeed Insights görsellerin eksik “width” ve “height” değerleri uyarısı

Script ile Yüklenen DOM Elementi

Reklam Scriptleri

Page Speed Insights Üzerinde CLS Verisi

Search Console Üzerinde CLS Uyarısı

Search Console üzerinde kümülatif düzen kayması problemi bulunan sayfalar listeleniyor.