Web siteniz hızlı açılıyor olabilir, ancak kullanıcı bir butona tıklamak üzereyken sayfa öğeleri kayıyor ve yanlış bir şeye mi tıklıyor? Bu kullanıcı deneyimi açısından büyük bir sorun yaratır. İşte tam bu noktada devreye Cumulative Layout Shift (CLS) girer. CLS, sitenizin görsel kararlılığını (visual stability) ölçen bir performans metriğidir.
Cumulative Layout Shift (CLS), bir web sayfasında yükleme sırasında beklenmedik şekilde hareket eden (kayma yapan) içeriklerin neden olduğu toplam görsel kaymayı ölçen bir metriktir.
Kısaca:
Sayfa yüklenirken öğeler yer değiştiriyorsa, bu “layout shift” olarak adlandırılır.
CLS ise bu kaymaların kümülatif etkisini sayısal olarak ifade eder.
Örneğin:
- Bir görselin yüklenmesi sırasında altındaki yazı aşağı kayarsa,
- Reklam bloğu geç yüklenirse ve içeriği iterse,
- Yazı ya da butonlar aniden pozisyon değiştirirse
Tüm bu durumlar CLS puanını olumsuz etkiler.
CLS Neyi Ölçer?
CLS, sayfa içeriğinde kullanıcı etkileşimi olmaksızın gerçekleşen pozisyon değişimlerinin şiddetini ve sıklığını ölçer.
Yani kullanıcı bir şey yapmasa bile sayfa öğeleri hareket ediyorsa, bu CLS değerini artırır.
CLS şu iki faktöre göre hesaplanır:
- Etki oranı (impact fraction): Kaymanın ekranın ne kadarını etkilediği
- Mesafe oranı (distance fraction): Öğenin ne kadar hareket ettiği
Hesaplama formülü basitçe şöyle özetlenebilir:
CLS = Tüm layout kaymalarının toplam skoru
CLS İçin İdeal Değer Nedir?
Google’ın önerdiği CLS puan aralıkları:
- ✅ 0 – 0.1 → İyi
- ⚠️ 0.1 – 0.25 → İyileştirilmeli
- ❌ 0.25 ve üzeri → Kötü
CLS değeri 0’a ne kadar yakınsa, sayfanız o kadar stabil demektir.
CLS Nasıl Ölçülür?
CLS ölçümü için kullanabileceğiniz araçlar:
- Google PageSpeed Insights
- Lighthouse (Chrome DevTools)
- WebPageTest
- GTmetrix
- Chrome User Experience Report (CrUX)
Bu araçlar hangi öğelerin kaymalara neden olduğunu da detaylı olarak gösterir.
CLS’yi Artıran Yaygın Nedenler
- Genişlik ve yükseklik belirtilmeden yerleştirilen görseller
- Yazı fontlarının geç yüklenmesi (FOIT/FOUT sorunları)
- Geç yüklenen reklam blokları
- Lazy-load edilen içeriklerin yüklenme anında pozisyon değiştirmesi
- Dinamik içeriklerin (modal, banner, pop-up) sayfa düzenini bozacak şekilde yer değiştirmesi
CLS Nasıl İyileştirilir?
1. Görsellere Genişlik ve Yükseklik Tanımlayın
Her resme mutlaka width ve height ya da aspect ratio CSS tanımı yapın.
Tarayıcı, resmin ne kadar alan kaplayacağını önceden bilir ve layout değişmez.
2. Reklam Alanları İçin Sabit Yükseklik Kullanın
Reklamların geç gelmesi, sayfada aşağı doğru kaymaya neden olur.
Reklam için sabit bir boşluk bırakın ki sayfa düzeni bozulmasın.
3. Yazı Tiplerini Optimize Edin
Google Fonts gibi dış kaynaklı fontlarda font-display: swap; kullanarak yükleme gecikmesi durumunda sistem fontuyla geçici çözüm sunun.
4. Animasyonlar ve Geçişler
Kayma yerine transform veya opacity gibi CSS animasyonları kullanarak yumuşak geçişler sağlayın.
5. Lazy-load İçeriği Doğru Uygulayın
Görüntü ya da iframe’leri lazy-load ederken yer tutucu (placeholder) kullanın. Böylece yüklenene kadar boş alan bırakılmış olur.
CLS ve SEO İlişkisi
CLS, Google’ın Core Web Vitals metriklerinden biridir ve doğrudan arama motoru sıralamalarını etkileyen bir sinyaldir.
Yüksek CLS değeri:
- Kullanıcı deneyimini bozar
- Yanlış tıklamalara ve memnuniyetsizliğe neden olur
- Bounce rate’i artırabilir
- SEO performansınızı olumsuz etkileyebilir
Mobil kullanıcılar için özellikle önemlidir çünkü küçük ekranlarda küçük kaymalar bile büyük sorunlara yol açabilir.
Cumulative Layout Shift (CLS), sitenizin kullanıcıya ne kadar “kararlı ve düzenli” göründüğünü gösteren kritik bir metriktir. Sayfa öğelerinin beklenmedik şekilde hareket etmesi hem kullanıcı memnuniyetini hem de SEO başarısını olumsuz etkiler.
Bu yüzden düzenli olarak CLS ölçümü yapmalı ve gerekli önlemleri almalısınız.
