Sayılarla ne demek?
CLS, Core Web Vitals içinde bir sayfanın görsel olarak ne kadar kararlı olduğunu ölçen metriktir. Kullanıcı bir yazıyı okurken ya da bir düğmeye tıklamak üzereyken içerik aniden aşağı kayarsa, bu bir düzen kaymasıdır. En tanıdık örnek, geç yüklenen bir reklam ya da kampanya bandının sayfanın üstüne eklenip bütün içeriği itmesidir.
Her kayma iki oranla puanlanır. Etki oranı, kayan öğelerin ekranın ne kadarını etkilediğidir; mesafe oranı ise ne kadar uzağa kaydıklarıdır. Örneğin ekranın yüzde 50'sini kaplayan bir blok ekran yüksekliğinin yüzde 25'i kadar aşağı itilirse, etki alanı kayma öncesi ve sonrası birleşimiyle yaklaşık yüzde 75 olur ve puan 0,75 × 0,25 ≈ 0,19 çıkar. Tek bir kayma bile "iyi" eşiği olan 0,1'i aşabilir.
Kullanıcının beklediği kaymalar sayılmaz. Bir akordeon başlığına tıklandıktan sonra içeriğin açılması, etkileşimden sonraki 500 ms içinde gerçekleştiği için CLS'ye eklenmez. Sorun, kullanıcı hiçbir şey yapmadığı halde sayfanın kendi kendine yer değiştirmesidir.
CLS sebepleri ve çözümleri
| Sebep | Nasıl oluşur? | Çözüm |
|---|---|---|
| Boyutsuz görseller | Görsel yüklenince yer açar | width/height öznitelikleri ya da aspect-ratio |
| Reklam ve gömülü içerik | Alan sonradan genişler | Önceden ayrılmış sabit alan |
| Geç eklenen bant ve bildirimler | İçeriğin üstüne eklenir | Yerini baştan ayırmak ya da alt bölümde göstermek |
| Web fontları | Yedek font ile asıl font boyutu farklı | Font ölçü eşleştirme, font-display ayarı |
| Animasyonlar | Konum özellikleri değişir | transform ile animasyon |
Ortak ilke: sonradan gelecek her öğenin yeri baştan ayrılmalıdır.
CLS'yi iyileştirirken
- Kayan öğeleri bul. PageSpeed Insights ve geliştirici araçları.
- Görsellere boyut ver. Bütün <img> ve <video> etiketlerine.
- Dinamik alanlar için yer ayır. Reklam, bant, gömülü içerik.
- Fontları dengele. Yedek font ölçüleri ve ön yükleme.
- Saha verisiyle doğrula. Kaydırma ve gezinme sırasındaki kaymalar dahil.
Uygulamada ne oluyor?
En sık durum, görsellere genişlik ve yükseklik verilmemesi. Görsel optimizasyonunun en basit adımı atlanıyor: metin önce görünüyor, görsel yüklenince yer açıyor ve bütün içerik aşağı kayıyor.
İkinci gözlem, kampanya bandının JavaScript ile sayfanın en üstüne eklenmesi. Kullanıcı okumaya başladıktan sonra bant beliriyor; bütün sayfa 60 piksel aşağı itiliyor.
Üçüncüsü, reklam alanlarının sabit boyutsuz olması. Reklam boyutu isteğe göre değişiyor; alan bazen boş, bazen büyük ve içerik her seferinde oynuyor.
Dördüncüsü, web fontu değişiminin satırları kaydırması. Yedek font dar, asıl font geniş; yazı tipi yüklenince paragraflar yeniden kırılıyor ve düzen değişiyor.
Beşincisi, çerez izni penceresinin içeriği itmesi. Pencere sayfanın üstüne bindirilmek yerine içeriğin arasına yerleşiyor; kayma puanı yükseliyor.
Altıncısı, laboratuvar testinde CLS'nin düşük görünmesi. Test yalnızca yüklemeyi ölçüyor; kullanıcı kaydırırken tembel yüklenen boyutsuz görseller saha verisinde kayma üretiyor.
Yedincisi, ürün sayfasında fiyat ve stok bilgisinin geç gelmesi. Bu bilgiler ayrı bir istekle yükleniyor; "sepete ekle" düğmesi yer değiştiriyor.
Sekizincisi, yanlış yere tıklamaya yol açan kaymalar. Kullanıcı bir bağlantıya dokunmak üzereyken içerik kayıyor ve reklama tıklıyor; hem deneyim hem güven zarar görüyor.
Dokuzuncusu, animasyonların konum özellikleriyle yapılması. top ya da margin değiştiren animasyonlar kayma sayılıyor; transform kullanıldığında sorun ortadan kalkıyor.
Onuncusu, iskelet ekranların gerçek içerikten farklı boyutta olması. Yükleniyor alanı küçük, gelen içerik büyük; iskelet ekran kaymayı önlemek yerine yaratıyor.
On birincisi, geri-ileri önbelleğinin kullanılmaması. Sayfaya geri dönüldüğünde her şey yeniden yükleniyor ve kaymalar tekrar yaşanıyor; önbellekten dönüş bu kaymaları önleyebilir.
On ikincisi, CLS'nin dönüşüme etkisinin görülmemesi. Ödeme sayfasındaki küçük kaymalar yanlış tıklamalara ve form hatalarına yol açıyor; kayıp yalnızca skor değil satış.
Neyi göstermez?
CLS, sayfanın ne kadar hızlı olduğunu göstermez. Hiç kaymayan bir sayfa yine de yavaş olabilir; LCP ve INP birlikte izlenmelidir.
Sıkça sorulan sorular
İyi bir CLS değeri nedir?
Ziyaretlerin yüzde 75'inde 0,1 ya da altı.
Kullanıcının tetiklediği kaymalar sayılır mı?
Etkileşimden sonraki 500 ms içindeki kaymalar sayılmaz.
En hızlı CLS düzeltmesi nedir?
Görsellere ve reklam alanlarına baştan boyut vermek.
Bu kavramın bütün resim içindeki yerini SEO Danışmanlığı Rehberi içinde ayrıntılı anlattım.
Teknik SEO, içerik stratejisi, kategori mimarisi, otorite ve organik trafiği dönüşüme çeviren bütünsel SEO danışmanlığı.
