Cumulative Layout Shift (CLS) Nedir?

[DursunKaptan]

Cumulative Layout Shift (CLS), bir web sayfasının yükleme sırasında veya kullanıcı etkileşimleri esnasında beklenmedik şekilde yer değiştiren görsel öğelerin neden olduğu düzensizlikleri ölçen bir performans metriğidir. Google'ın Core Web Vitals grubunda yer alır ve kullanıcı deneyiminin stabilitesini değerlendirir.

Basit Tanım:​

Sayfa yüklenirken aniden oynayan butonlar, kaydırılan metinler veya yer değiştiren reklamlar gibi sorunlar CLS'nin kötü olduğunu gösterir.

---

CLS Neden Önemli?​

• Kullanıcı Deneyimi: Beklenmedik layout kaymaları, yanlış tıklamalara veya okuma zorluğuna yol açar.
• SEO Etkisi: Google, CLS'yi sıralama faktörü olarak kullanır (2021'den beri Core Web Vitals kapsamında).
• İş Metrikleri: Yüksek CLS, daha düşük dönüşüm oranlarıyla ilişkilendirilir.

---

CLS Nasıl Hesaplanır?​

CLS, her bir layout kaymasının iki faktörle çarpımının toplamıdır:

1. Impact Fraction (Etki Alanı): Kaymanın ekranın ne kadarını etkilediği (0-1 arası).
2. Distance Fraction (Mesafe Oranı): Öğenin ne kadar yer değiştirdiği (0-1 arası).

Formül:
CLS = Impact Fraction × Distance Fraction

• Örnek: Bir resim yüklenirken 500px aşağı kayarsa ve ekranın %50'sini kaplıyorsa:
  CLS = 0.5 (impact) × 0.5 (distance) = 0.25

---

İyi ve Kötü CLS Değerleri​

• İyi (Good): 0.1 veya altı
• Geliştirilmeli (Needs Improvement): 0.1-0.25
• Kötü (Poor): 0.25 üzeri

---

CLS'ye Neden Olan Yaygın Sorunlar​

1. Boyutsuz Resimler/Videolar
   
   • <img> veya <video> etiketlerinde width/height belirtilmemesi.
   • Çözüm:
     <img src="image.jpg" width="600" height="400" loading="lazy">
     Veya CSS'de aspect ratio kullanın:
     css
     Copy
     Download
     img { aspect-ratio: 16/9; }
   • Sayfa yüklendikten sonra eklenen reklamlar, banner'lar veya pop-up'lar.
     • Yer ayırın (reserve space) veya transform kullanarak animasyon ekleyin.

---

CLS Optimizasyonu İçin Pratik Adımlar​

1. Tüm Medya Öğelerine Boyut Belirtin
   
   • Resim, video, iframe'ler için width/height veya CSS'de aspect-ratio tanımlayın.
   • Örneğin, reklam alanına başlangıçta sabit bir yükseklik verin:
     css
     .ad-container { min-height: 250px; }

---

CLS Nasıl Ölçülür?​

• Gerçek Kullanıcı Verisi (RUM):
  
  • Google Search Console (Core Web Vitals raporu)
  • web-vitals.js kütüphanesi:
    

    javascript
    [FONT=Segoe UI][COLOR=rgb(20, 20, 20)]import { getCLS } from 'web-vitals';
    getCLS(console.log);

  [/COLOR][/FONT]
  • Lighthouse (Chrome DevTools veya PageSpeed Insights)
  • Chrome DevTools > Performance > Experience sekmesinde layout shift'leri görün.

---

Örnek CLS Senaryoları​

Örnek CLS Senaryoları

Senaryo	CLS Değeri
Kullanıcı bir butona tıklarken reklam yüklenir ve buton kayar.	0.15
Boyutsuz bir resim yüklenirken metinler aşağı itilir.	0.3
Sabit yükseklikte bir banner eklenir.	0.0

​

​

---

Sonuç​

CLS, kullanıcıların sayfanızda rahatsız edici sürprizler yaşamaması için kritiktir. Optimizasyon için:

• Boyutları önceden tanımlayın,
• Dinamik içerikleri stabilize edin,
• Font ve medya yüklemesini optimize edin.