CLS (Cumulative Layout Shift) Nedir?

CLS (Cumulative Layout Shift), Türkçe’de Kümülatif Düzen Kayması olarak bilinen, bir web sayfasının görsel kararlılığını ölçen bir Core Web Vitals (Önemli Web Verileri) metriğidir. CLS, sayfa yüklenirken veya kullanıcı sayfayla etkileşime girerken gerçekleşen beklenmedik düzen kaymalarını (layout shifts) ölçer.

Basitçe söylemek gerekirse, bir sayfa yüklenirken aniden yer değiştiren metinler, resimler veya düğmeler, kullanıcı deneyimini olumsuz etkileyerek bir CLS sorununa neden olur. Bu durum, kullanıcının yanlış bir şeye tıklamasına veya okuduğu metnin kaybolmasına yol açabilir.

Düzen Kayması Nasıl Oluşur?

Düzen kayması, genellikle sayfa yüklenirken bir öğenin, daha önceden yerini kaplamayan bir alana aniden girmesiyle oluşur. En yaygın nedenleri şunlardır:

• Boyutları Belirtilmemiş Görseller: HTML kodunda genişliği ve yüksekliği belirtilmemiş görseller, yüklenene kadar tarayıcıya ayrılacak alanı bilmez. Görsel yüklendiğinde, etrafındaki metinleri aşağı iter ve düzeni kaydırır.
• Dinamik Olarak Eklenen Reklamlar veya Gömülü İçerikler: Sayfa yüklendikten sonra aniden yüklenen reklamlar, pop-up’lar veya sosyal medya widget’ları, düzenin bozulmasına neden olur.
• Web Fontları: Sayfa metni ilk olarak sistem fontuyla yüklenir, ardından web fontu yüklendiğinde metnin boyutu değişir ve sayfa düzeni kayar.
• İstemci Tarafı Oluşturma (Client-Side Rendering): JavaScript ile dinamik olarak yüklenen içerikler, görünür hale geldiğinde sayfanın düzenini kaydırabilir.

CLS Nasıl Hesaplanır?

Google, CLS puanını iki faktörü çarparak hesaplar:

• Etki Kesri (Impact Fraction): Değişen içeriğin, görüntü alanının (viewport) ne kadarını kapladığını gösterir.
• Mesafe Kesri (Distance Fraction): Kaydırılan içeriğin, orijinal konumundan ne kadar uzağa hareket ettiğini gösterir.

CLS Puanı = Etki Kesri x Mesafe Kesri

İdeal Değer: Google’a göre CLS puanı 0.1 veya daha az olmalıdır. Bu, kullanıcı için iyi bir deneyim sunulduğu anlamına gelir.

CLS Nasıl İyileştirilir?

CLS, genellikle teknik bir sorundur ve iyileştirmek için HTML ve CSS kodunda bazı değişiklikler yapmak gerekir.

1. Görsel ve Video Boyutlarını Belirtin:
   • Sayfaya eklediğiniz her görsel ve video için HTML’de width ve height özelliklerini mutlaka belirtin. Bu, tarayıcının medya için gerekli alanı önceden ayırmasını sağlar.
   • Örnek: <img src="resim.jpg" width="600" height="400" alt="Örnek Resim">
2. Dinamik İçerik için Alan Ayırın:
   • Sayfanızda yüklendikten sonra yer alacak reklamlar, iframe’ler veya diğer dinamik öğeler için önceden bir yer tutucu (placeholder) kullanın. Bu, yüklenene kadar o alanın boş kalmasını sağlar.
   • Örnek: Bir reklam alanı için CSS ile sabit bir min-height değeri belirleyin.
3. Font Yüklemesini Optimize Edin:
   • Web fontlarının ani yüklemesini engellemek için CSS’te font-display özelliğini kullanın. font-display: swap, fontun yüklendiğinde yerel fontla anında değiştirilmesini sağlar.
   • Fontları önceden yüklemek (<link rel="preload">) de bir çözüm olabilir.
4. Kullanıcı Etkileşimlerine Duyarlı İçerik:
   • Dinamik olarak yüklenen içerikleri (örneğin bir pop-up), sadece kullanıcı bir düğmeye tıkladığında veya bir etkileşimde bulunduğunda yükleyin.
   • Kullanıcının beklemediği bir anda ekranı kaplayan öğelerden kaçının.

CLS’yi Ölçme Araçları

• Google Search Console: “Önemli Web Verileri” (Core Web Vitals) raporunda, sitenizdeki CLS sorunlarını ve bu sorunların hangi URL’lerde olduğunu görebilirsiniz.
• Google PageSpeed Insights: Bir URL’yi analiz ettiğinizde, CLS puanınızı gösterir ve soruna neden olan öğeleri listeler.
• Chrome Geliştirici Araçları: “Lighthouse” sekmesi ve “Performance” paneli, sayfa yüklemesi sırasında oluşan düzen kaymalarını canlı olarak görselleştirmenizi sağlar.

CLS, özellikle e-ticaret siteleri ve bloglar için büyük bir sorundur. Kullanıcılarınızın beklemediği düzen kaymalarını düzelterek, sitenizin profesyonel ve güvenilir bir imaj sergilemesini sağlarsınız.