Cumulative Layout Shift (CLS) Nedir?

İnternet kullanıcıları, bir web sitesinde gezinirken “görsel kararlılık” bekler. Örneğin, tıklamak üzere olduğunuz bir düğmenin aniden kayması veya okuduğunuz bir metnin yer değiştirmesi, kullanıcı deneyimini olumsuz etkiler. Cumulative Layout Shift (CLS), tam olarak bu tür beklenmedik layout değişimlerini ölçen ve kullanıcı deneyimini nicelendiren bir metriktir. Google’ın Core Web Vitals raporlamasının temel bileşenlerinden biri olan CLS, web sitenizin performansını ve kullanılabilirliğini değerlendirmede kritik bir rol oynar.

1. Cumulative Layout Shift (CLS) Nedir?

CLS, bir web sayfasının ömrü boyunca gerçekleşen beklenmeyen layout kaymalarının toplamını ölçer. Bu kaymalar, kullanıcı etkileşimi olmadan gerçekleştiğinde (örneğin, bir resim yüklendikten sonra metnin aşağı itilmesi) skoru artırır. CLS, 0 ile 1 arasında bir değer alır:

• 0-0.1: İyi
• 0.1-0.25: Geliştirme Gerekli
• 0.25+: Zayıf

Google, iyi bir kullanıcı deneyimi için CLS’nin 0.1 veya altında olmasını önerir.

2. CLS Nasıl Hesaplanır?

CLS skoru, iki faktörün çarpımıyla belirlenir:

• Impact Fraction (Etki Oranı): Kaymanın görünür alan (viewport) içinde ne kadarını etkilediği.
• Distance Fraction (Mesafe Oranı): Elementin viewport boyutuna göre ne kadar hareket ettiği.

Örneğin, bir resim yüklendiğinde metin %50’lik bir alanda (%50 impact) 400px aşağı kayarsa ve viewport yüksekliği 1000px ise, distance fraction 400 / 1000 = 0.4 olur. CLS skoru: 0.5 × 0.4 = 0.2 olur.

CLS, sayfa ömrü boyunca tüm layout kaymalarının toplamıdır. Ancak, en kötü 5 saniyelik “oturum penceresinde” (birbiri ardına gelen ve aralarında 1 saniyeden az boşluk olan kaymalar) ölçülen maksimum skor dikkate alınır.

3. CLS Neden Önemli?

• Kullanıcı Deneyimi: Beklenmedik kaymalar, yanlış tıklamalara veya okuma sürecinin kesilmesine yol açar.
• SEO Etkisi: Google, CLS’yi Core Web Vitals kapsamında sıralama faktörü olarak kullanır.
• İş Metrikleri: Yüksek CLS, düşük dönüşüm oranları ve artan hemen çıkma oranlarıyla ilişkilendirilir.

4. CLS Sorunlarının Yaygın Nedenleri

• Boyut Belirtilmeyen Görseller: Genişlik ve yükseklik tanımsız görseller yüklendiğinde layout kaymasına neden olur.
• Reklamlar ve Embedler: Önceden yer ayrılmayan reklam alanları ani kaymalar yaratır.
• Dinamik İçerik: Kullanıcı etkileşimi olmadan üste eklenen bildirimler veya banner’lar.
• Web Yazı Tipleri: FOIT/FOUT (Flash of Invisible/Unstyled Text) nedeniyle metin boyutlarının değişmesi.
• CSS Animasyonları: width veya height gibi layout değiştiren animasyonlar.

5. CLS Nasıl Ölçülür?

• Lab Verisi:
• Lighthouse: Chrome eklentisi veya DevTools üzerinden detaylı rapor.
• Chrome DevTools Performance Panel: Layout kaymalarını anlık izleme.
• Gerçek Kullanıcı Verisi (RUM):
• PageSpeed Insights: Sahada toplanan verilerle analiz.
• Web Vitals JavaScript Kütüphanesi: Gerçek kullanıcıların CLS skorunu takip etme.

6. CLS Optimizasyonu İçin En İyi Uygulamalar

• Görsellere Boyut Belirleyin:

  <img src="örnek.jpg" width="600" height="400" loading="lazy">

CSS’de aspect-ratio: 600/400; kullanarak oran korunabilir.

• Reklam/Embed Alanlarını Rezerve Edin: Önceden sabit yükseklik veya placeholder kullanın.
• Dinamik İçeriği Stratejik Ekleyin: Kullanıcı etkileşimi olmadan üste içerik eklemeyin.
• Fontları Ön Yükleme:

  <link rel="preload" href="font.woff2" as="font">

• CSS Transform Kullanın: Animasyonlar için transform özelliği, layout’u etkilemez.
• Yavaş Yükleme (Lazy Loading): Görselleri ve bileşenleri viewport görünür hale geldikçe yükleyin.

7. CLS Analizi İçin Araçlar

• Google Araçları: Lighthouse, PageSpeed Insights, Chrome DevTools.
• Gerçek Zamanlı İzleme: Web Vitals Chrome Eklentisi.
• RUM Çözümleri: New Relic, Datadog.

Değerlendirme

CLS, kullanıcıların web sitenizdeki deneyimini doğrudan etkileyen kritik bir metrik. Optimizasyon için görsellerin boyutlarını belirlemek, dinamik içerikleri stratejik yönetmek ve modern CSS tekniklerini kullanmak temel adımlardır. Düzenli olarak lab ve saha testleri yaparak, kullanıcılarınızın karşılaşabileceği layout sorunlarını önceden tespit edebilirsiniz. Unutmayın: Düşük CLS, hem mutlu kullanıcılar hem de Google sıralamalarında avantaj demek!

Bu rehber, CLS’yi teknik ve pratik açıdan ele alarak hem yeni başlayanlar hem de deneyimli geliştiriciler için kapsamlı bir kaynak sunmayı hedefler. Optimizasyon adımlarını uygulayarak, web sitenizin görsel kararlılığını artırabilir ve kullanıcı dostu bir deneyim sağlayabilirsiniz.