CLS (Cumulative Layout Shift), bir sayfa yüklenirken görünür alandaki içerik öğelerinin beklenmedik şekilde kayıp yer değiştirme toplamını ölçen Core Web Vitals metriğidir. Yüksek CLS, kullanıcının okumakta olduğu metnin aniden kayması veya yanlış butona tıklaması gibi rahatsız edici deneyimlere yol açar.
Hedef değerler:
- İyi: 0.1 altı
- İyileştirme gerekli: 0.1 – 0.25
- Kötü: 0.25 üstü
CLS’in başlıca sebepleri:
- Boyutu belirtilmemiş görsel ve videolar
- Reklam veya iframe alanlarının dinamik yüklenmesi
- Web font yüklenirken metnin yeniden boyutlanması (FOIT/FOUT)
- İçeriğin üstüne sonradan eklenen banner veya cookie bildirimleri
İpucu: Tüm görsellere width ve height attribute’u ekleyin, web fontlar için font-display: swap kullanın ve kullanıcı etkileşimi olmadan içerik üzerine bir şey eklemeyin.