CLS, Core Web Vitals içinde sayfadaki öğelerin yükleme sırasında beklenmedik şekilde yer değiştirmesini/kaymasını ölçen görsel stabilite metriğidir.
Web site hızı kadar “sayfanın sabit kalması” da kritiktir: butona basarken öğe kayarsa yanlış tıklama olur, kullanıcı güveni düşer ve özellikle mobilde etkileşim zayıflar. Bu yüzden CLS optimizasyonu, Google ve AI aramalarında öne çıkmak isteyen rekabetçi sayfalar için “küçük ama etkisi büyük” bir düzeltmedir.
CLS Nedir?
CLS (Cumulative Layout Shift), kullanıcı sayfayı görüntülerken viewport içindeki öğelerin ne kadar ve ne ölçüde yer değiştirdiğini hesaplayan, saniye değil puan (unitless) olarak ölçülen bir metriktir. CLS sadece “yükleme anı” değil, sayfa görüntülenirken oluşan beklenmedik kaymaları da dikkate alır.
CLS Metriğinde Hangi Unsurlar Dikkate Alınır?
CLS’nin “kayma” olarak saydığı şey, kullanıcının beklemediği anda, görünür alandaki öğelerin yer değiştirmesidir. En sık CLS üreten unsurlar şunlardır:
- Boyutsuz görseller: <img> veya görsel container’ı width/height (ya da aspect-ratio) tanımlı değilse tarayıcı alan ayıramaz, görsel gelince içerik iter.
- Boyutsuz reklam alanları: Reklam slotu yüklenmeden önce yer ayrılmadığında içerik aşağı/yan kayar.
- Boyutsuz embed/iframe’ler: YouTube, harita, sosyal embed gibi öğeler yüklenince layout yeniden akar.
- Dinamik olarak sonradan eklenen içerikler: Üstte çıkan banner’lar, pop-up/çerez barı, “kampanya” şeritleri veya sonradan inject edilen bloklar içerik zıplatır.
- Web font yükleme davranışı: Font geç gelince fallback → asıl font geçişi satır ölçülerini değiştirip metni kaydırabilir (FOUT/FOIT etkileri).
- Geç yüklenen kritik CSS / layout hesapları: Stil dosyası geç uygulanırsa sayfanın ilk yerleşimi değişebilir ve kayma oluşur.
Not: Kullanıcının tıklamasıyla açılan accordion/sekme gibi kullanıcı aksiyonuyla olan değişimler “beklenen” kabul edilebildiği için CLS mantığı farklı çalışır; problem genelde “kendiliğinden zıplayan” öğelerdir.
Ideal CLS Puanı Kaç Olmalı?
Google’ın eşiklerine göre CLS şu şekilde değerlendirilir (hedef metrik: 75. persentil):
- İyi (Good): ≤ 0.1
Sayfa stabil görünür; kullanıcı yanlış tıklama/okuma kaybı yaşamaz. - Geliştirilmeli (Needs improvement): 0.1 – 0.25
Zaman zaman hissedilen kaymalar vardır; özellikle mobilde güven ve etkileşim düşebilir. - Kötü (Poor): > 0.25
Belirgin ve sık kaymalar yaşanır; kullanıcı deneyimi net biçimde zayıflar ve teknik SEO tarafında öncelikli problemdir.
CLS Nasıl Ölçülür?
CLS metriğini ölçerke kullanabileceğin pratik araçlar:
- Google PageSpeed Insights: Lab ölçüm + uygun sayfalarda CrUX (field) özetini birlikte sunar; CLS yüksekse hangi fırsatların çıktığını görürsün.
- Lighthouse (Chrome DevTools): Lab testtir; layout shift’leri yakalayıp hangi öğelerin kaymaya sebep olduğunu bulmada kullanışlıdır.
- Google Search Console: Core Web Vitals raporu: Field data ile URL grupları halinde CLS sorunlarını listeler; “mobil/desktop” ayrı izlenir.
- WebPageTest: Farklı cihaz/lokasyon profilleriyle lab ortamında detaylı analiz yapar; “hangi an kayıyor?” sorusunda çok iş görür.
CLS Nasıl Optimize Edilir?
Aşağıdaki maddeler, Google’ın CLS optimizasyon rehberinde en sık vurgulanan kök nedenlere göre düzenlendi. Her başlığın altında “neden kayıyor + ne yapmalısın” mantığı var.
- Görsellere ve medyaya mutlaka boyut tanımla
Görseller (ve videolar) width/height veya en azından aspect-ratio ile alanı önceden rezerve etmezse yüklenince içerik iter. Özellikle hero görsel ve içerik içi görsellerde bu, CLS’in en yaygın sebebidir.
- Reklam/iframe/embed alanlarına “boşluk” ayır
Reklam slotu ya da embed alanı sonradan geliyorsa, önce sabit bir container yüksekliği belirle (veya responsive ama rezervli bir oran kullan). “Dinamik yüklenen ama yer ayrılmayan” bloklar sayfayı zıplatır.
- Dinamik içerikleri üst tarafa “inject” etme
Çerez bildirimi, kampanya barı, uygulama banner’ı gibi öğeleri mümkünse üstten içeriği itmek yerine overlay olarak konumlandır veya baştan alanını ayır. Kullanıcı sayfayı okurken araya giren bloklar CLS’i büyütür.
- Web font stratejisini stabil hale getir
Font geçişi metin ölçülerini değiştirip kaymaya neden olabilir. Uygun font-display davranışı, mümkünse self-host ve fallback metrik uyumu CLS’i düşürür.
- Kritik CSS’i geciktirme, layout’u ilk yüklemede netleştir
CSS geç uygulanırsa ilk yerleşim “yanlış” çizilir, sonra düzelirken kayma olur. Kritik stilleri erken yüklemek ve gereksiz CSS/JS yükünü azaltmak stabiliteyi artırır.
- Animasyonlarda layout yerine transform kullan
Bir öğeyi top/left/height gibi layout’u etkileyen değerlerle oynatmak yerine transform ile hareket ettirmek daha stabil sonuç verir; sayfa yeniden akmaz. (Özellikle header, sticky bar, açılır bileşenlerde.)
CLS Metriği Neden Önemlidir?
CLS, sayfa yüklenirken yaşanan “zıplama” etkisini azaltarak kullanıcının okuma akışını ve tıklama doğruluğunu korur. Yüksek CLS; yanlış tıklama, form/CTA alanlarında etkileşim kaybı ve özellikle mobilde daha hızlı terk etme davranışı doğurabilir, bu da dönüşüm performansını zayıflatır. SEO tarafında ise CLS, Core Web Vitals / Page Experience sinyallerinin bir parçası olduğu için rekabetçi sorgularda benzer içerikler arasında sayfa deneyimi daha iyi olan sitelerin avantaj yakalamasına yardımcı olur.
Sonuç
CLS, sayfanın “zıplama” problemini ölçtüğü için kullanıcı güvenini ve etkileşimi doğrudan etkiler; bu yüzden Core Web Vitals ve teknik SEO tarafında net bir önceliktir. CLS skorun 0.1’in üzerindeyse, doğru boyutlandırma + rezerv alan + font ve dinamik içerik stratejisiyle hızlıca toparlayabiliriz. Web sitenin daha stabil açılması, kullanıcıyı sayfada tutması ve dönüşüme daha rahat ilerlemesi için SEO danışmanlığı kapsamında PageSpeed, Search Console ve WebPageTest verileriyle sitene özel bir CLS aksiyon planı çıkarıp birlikte uygulayabiliriz.
