Cumulative Layout Shift (CLS) Nedir?

Basit Tanım:​

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?​

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ı).

• Ö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:
    
    Kod:

    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ç​

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