CLS Nedir ve Nasıl Düzeltilir? Cumulative Layout Shift Rehberi
CLS (Cumulative Layout Shift), bir web sayfası görüntülenirken içeriklerin beklenmedik şekilde ne kadar yer değiştirdiğini ölçen Core Web Vitals metriklerinden biridir. Sayfa açıldıktan sonra yazının aşağı kayması, butonun aniden yer değiştirmesi veya sonradan yüklenen reklamın bütün içeriği aşağı itmesi CLS sorununa örnektir.
İyi bir kullanıcı deneyimi için Google'ın kullandığı yaygın eşiklere göre CLS değerinin 0,1 veya altında olması hedeflenir. 0,1 ile 0,25 arasındaki değerler iyileştirme gerektirebilir; 0,25'in üzerindeki değerler ise zayıf kabul edilir.
CLS neden önemlidir?
Kullanıcı bir bağlantıya tıklamak üzereyken sayfa düzeni aniden değişirse yanlış butona basabilir.
Örneğin kullanıcı:
Giriş Yapbutonuna basmak isterken üst tarafta sonradan bir reklam yüklenir ve buton aşağı kayarsa farklı bir bağlantıya tıklayabilir.
Bu tür beklenmedik hareketler kullanıcı deneyimini doğrudan olumsuz etkiler.
CLS sorununun en yaygın nedenleri nelerdir?
Yüksek CLS değerinin arkasında genellikle şunlardan biri bulunur:
- Boyutları belirtilmemiş görseller
- Sonradan yüklenen reklamlar
- Dinamik içerikler
- Embed ve iframe alanları
- Font değişimleri
- Sonradan eklenen banner'lar
- Cookie veya bildirim alanları
- İçeriğin üzerine değil arasına sonradan eklenen bileşenler
Sorunu düzeltmek için önce hangi elementin sayfa düzenini değiştirdiğini bulmak gerekir.
1. Görseller için alan ayırın
HTML içerisinde görselin genişlik ve yükseklik bilgilerini belirtmek tarayıcının görsel yüklenmeden önce ne kadar alan ayıracağını hesaplamasına yardımcı olur.
Örneğin:
<img src="/gorsel.webp" width="800" height="450" alt="Örnek görsel">Görsel henüz indirilmemiş olsa bile tarayıcı en-boy oranını hesaplayabilir.
Responsive tasarım için CSS tarafında:
max-width: 100%;height: auto;gibi kurallar kullanılabilir.
Amaç görsel yüklenmeden önce sayfadaki alanının mümkün olduğunca belli olmasıdır.
2. Reklam alanlarının boyutunu önceden belirleyin
Reklamlar CLS sorunlarının önemli kaynaklarından biri olabilir.
Örneğin sayfa ilk açıldığında reklam alanı yoksa ancak birkaç saniye sonra 728×90 reklam yüklenerek içeriği aşağı itiyorsa layout shift oluşabilir.
Bunun yerine reklam yüklenmeden önce ilgili alan için uygun yer ayrılabilir.
Örneğin masaüstünde 728×90 reklam gösterilecekse tasarımda bu alanın kaplayacağı bölüm önceden rezerve edilebilir.
Reklam gelmese bile yerleşimin nasıl davranacağı önceden planlanmalıdır.
3. Sonradan açılan duyuru bantlarına dikkat edin
Sayfa açıldıktan sonra header'ın üzerinde bir duyuru bandı oluşturulması bütün sayfanın aşağı kaymasına neden olabilir.
Örneğin:
- Sayfa açılır.
- Header üstte görünür.
- JavaScript çalışır.
- Duyuru bandı eklenir.
- Header ve içerik aşağı kayar.
Bu durumda CLS oluşabilir.
Duyuru bandının yüksekliğini önceden ayırmak veya sayfanın ilk render aşamasında doğru yerleşimi oluşturmak daha iyi sonuç verir.
4. Header yüksekliğini sabit ve öngörülebilir tutun
Logo veya menü sonradan yüklenerek header yüksekliğini değiştiriyorsa sayfanın geri kalanı hareket edebilir.
Özellikle:
- Logo
- Kullanıcı avatarı
- Menü
- Bildirim alanı
- Reklam
- Üst banner
gibi header içerisinde bulunan öğelerin kaplayacağı alan mümkün olduğunca önceden belli olmalıdır.
5. Font yüklenmesi CLS oluşturabilir
Web fontu yüklenmeden önce tarayıcı geçici bir font gösterebilir.
Daha sonra gerçek font geldiğinde karakterlerin genişliği veya yüksekliği değişirse satırlar yeniden düzenlenebilir.
Bu durum layout shift oluşturabilir.
Font optimizasyonunda:
- Gereksiz font ağırlıklarını azaltmak
- Kritik fontları doğru yüklemek
- Uygun fallback font seçmek
- Font dosyalarının yüklenmesini optimize etmek
yardımcı olabilir.
Ancak yalnızca CLS puanını düşürmek için fontları kontrolsüz biçimde preload etmek performansın başka bölümlerini olumsuz etkileyebilir.
6. iframe ve embed alanlarına boyut verin
YouTube videosu, harita veya başka bir embed sonradan yükleniyorsa ilgili alan için önceden yer ayrılmalıdır.
Responsive video alanlarında
aspect-ratio oldukça kullanışlı olabilir.Örneğin:
aspect-ratio: 16 / 9;kullanılarak video yüklenmeden önce alanın oranı korunabilir.
7. Dinamik içerikleri mevcut içeriğin üstüne eklerken dikkat edin
JavaScript ile sonradan:
- Uyarı
- Kampanya
- Reklam
- Bildirim
- Öneri kutusu
ekleniyorsa mevcut içeriğin aşağı itilmesine neden olabilir.
Mümkün olduğunda alanı başlangıçtan itibaren ayırın veya kullanıcı etkileşimiyle açılan öğeleri mevcut sayfa düzenini beklenmedik şekilde değiştirmeyecek biçimde tasarlayın.
8. Skeleton ve placeholder kullanımı yardımcı olabilir
API üzerinden içerik yükleyen sayfalarda veri gelene kadar hiçbir şey göstermeyip ardından büyük bir içerik bloğu oluşturmak sayfa düzenini değiştirebilir.
İçeriğin yaklaşık boyutu biliniyorsa uygun:
- Placeholder
- Skeleton
- Minimum yükseklik
kullanılması yerleşimin daha stabil kalmasına yardımcı olabilir.
Ancak placeholder boyutunun gerçek içerikten çok farklı olması da hareket oluşturabilir.
9. Lazy loading kullanırken alanı koruyun
Lazy loading, görselleri ihtiyaç duyulana kadar yüklemeyerek performansa yardımcı olabilir.
Ancak lazy yüklenen görsel için önceden alan ayrılmamışsa görsel geldiğinde aşağıdaki içerikleri itebilir.
Bu nedenle:
loading="lazy"kullanmak tek başına yeterli değildir.
Görselin boyutu veya en-boy oranı da doğru şekilde tanımlanmalıdır.
10. Cookie bildirimi CLS oluşturabilir mi?
Evet.
Sayfanın üst bölümüne sonradan eklenen büyük bir cookie bildirimi bütün içeriği aşağı kaydırabilir.
Tasarım tercihine göre bildirim mevcut içeriği itmek yerine sabit bir katman olarak gösterilebilir veya kaplayacağı alan başlangıçtan itibaren hesaba katılabilir.
Burada erişilebilirlik ve kullanıcı etkileşimini engellememe de dikkate alınmalıdır.
11. CLS nasıl ölçülür?
CLS değerini incelemek için farklı araçlardan yararlanılabilir.
Yaygın seçenekler arasında:
- PageSpeed Insights
- Chrome DevTools
- Lighthouse
- Chrome User Experience Report tabanlı veriler
- Search Console Core Web Vitals raporları
bulunur.
Araçların sunduğu verilerin aynı şeyi temsil etmeyebileceğini unutmayın.
12. Laboratuvar verisi ile gerçek kullanıcı verisi farklı olabilir
Kendi bilgisayarınızda yaptığınız testte CLS:
0çıkabilir ancak gerçek kullanıcı verilerinde daha yüksek değer görülebilir.
Bunun nedeni gerçek ziyaretçilerin:
- Farklı cihazlar
- Farklı internet hızları
- Farklı ekran boyutları
- Farklı cache durumları
- Farklı sayfalar
kullanmasıdır.
Bu nedenle yalnızca tek bir Lighthouse testine bakarak bütün sitenin CLS sorununun çözüldüğünü düşünmeyin.
13. CLS değeri kaç olmalı?
Yaygın Core Web Vitals değerlendirmesinde:
0 – 0,1: İyi
0,1 – 0,25: İyileştirme gerekli
0,25 üzeri: Zayıf
Bu değerlendirmeler gerçek kullanıcı verilerinde belirli bir dağılım yaklaşımıyla ele alınır; tek bir test sonucu bütün sitenin durumunu temsil etmeyebilir.
14. CLS sorununu çözmek için nereden başlanmalı?
En doğru yöntem puanı rastgele düşürmeye çalışmak yerine hareket eden elementi bulmaktır.
Şu sırayla ilerleyebilirsiniz:
1. Sorunlu sayfayı test edin.
2. Hangi elementlerin hareket ettiğini belirleyin.
3. Görsellerin boyutlarını kontrol edin.
4. Reklam alanlarını inceleyin.
5. Header ve duyuru bantlarını kontrol edin.
6. iframe ve embed alanlarına bakın.
7. Font yüklenmesini inceleyin.
8. Dinamik JavaScript içeriklerini kontrol edin.
9. Düzeltmeden sonra tekrar test yapın.
10. Gerçek kullanıcı verilerinin zaman içerisinde güncellenmesini takip edin.
CLS düzeltirken yapılmaması gerekenler
Sorunu gizlemek amacıyla sayfanın tamamına rastgele sabit yükseklikler vermek responsive tasarımı bozabilir.
Aynı şekilde:
overflow: hiddenkullanarak hareketin veya taşmanın görünmesini engellemek gerçek CLS nedenini çözmez.
Amaç sayfanın hareketini saklamak değil, tarayıcının içerik yüklenmeden önce doğru alanı ayırmasını sağlamaktır.
CLS ve SEO ilişkisi
CLS, Google'ın Core Web Vitals kapsamında değerlendirdiği kullanıcı deneyimi metriklerinden biridir. Ancak Google sıralamasını yalnızca tek bir CLS değerine indirgemek doğru değildir.
İçeriğin kalitesi, arama niyetine uygunluk ve diğer birçok sinyal de arama performansında rol oynar.
Bu nedenle CLS optimizasyonunun temel amacı yalnızca SEO puanı yükseltmek değil, daha stabil ve kullanışlı bir web sayfası oluşturmak olmalıdır.
Özetle CLS sorununu düzeltmenin en etkili yolu görsel, reklam, banner, iframe ve dinamik içeriklerin kaplayacağı alanı mümkün olduğunca önceden belirlemek ve sayfa açıldıktan sonra beklenmedik yerleşim değişikliklerini azaltmaktır.
Özellikle reklam ve dinamik içerik kullanan sitelerde alanların önceden rezerve edilmesi CLS değerinde önemli iyileşme sağlayabilir.