CLS (Cumulative Layout Shift) nedir, sayfa kaymaları nasıl düzeltilir?

Bir haberi okurken üstte bir reklam yükleniyor ve metin aşağı kayıyor. Ödeme sayfasında “Siparişi tamamla”ya tıklamak üzereyken bir bildirim çubuğu beliriyor ve başka bir yere tıklıyorsunuz. Bu deneyimleri CLS ölçer.

KTYAPTECH SEO Analyzer bu sorunu CWV-FIELD-CLS-POOR-001 koduyla, “Gerçek ziyaretçilerde CLS kötü” başlığı altında ve yüksek önem derecesiyle raporlar (Core Web Vitals). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

Kötü CLS nedir?

Cumulative Layout Shift, sayfa ömrü boyunca kullanıcı etkileşimi olmadan gerçekleşen beklenmedik düzen kaymalarının toplam puanıdır. İyi değer 0,1 veya altı, 0,25'in üzeri kötüdür.

Neden önemli? SEO ve kullanıcı deneyimine etkisi

Kaymalar yanlış tıklamalara, okuma zorluğuna ve güven kaybına yol açar. CLS, Core Web Vitals değerlendirmesinin parçasıdır.

Sorun nasıl tespit edilir?

• SEO Analyzer raporundaki “Gerçek ziyaretçilerde CLS kötü” bulgusunu inceleyin.
• PageSpeed Insights'ta “Büyük düzen kaymalarından kaçının” bölümünde kayan öğeleri görün.
• Chrome DevTools'un Performans panelinde Layout Shift kayıtlarını ve Rendering sekmesindeki “Layout Shift Regions” vurgusunu kullanın.

Adım adım çözüm

1. Kayan öğeleri belirleyin.
2. Görsellere ve videolara width/height nitelikleri verin veya CSS aspect-ratio kullanın.
3. Reklam, gömülü içerik ve geç yüklenen bileşenler için önceden yer ayırın (min-height).
4. Mevcut içeriğin üstüne sonradan içerik eklemeyin; bildirimleri üst katman (overlay) olarak gösterin.
5. Web fontlarını önceden yükleyin ve yedek fontun ölçülerini size-adjust gibi özelliklerle hedef fonta yaklaştırın.
6. Animasyonlarda düzen özellikleri (top, height) yerine transform kullanın.

Kullanıcı etkileşimiyle oluşan kaymalar

Kullanıcının tıklamasından sonraki 500 milisaniye içinde oluşan kaymalar (ör. bir akordeonun açılması) CLS'ye sayılmaz. Sorun, kullanıcı hiçbir şey yapmadan oluşan kaymalardır.

Sık yapılan hatalar

• Reklam ve gömülü içerik alanlarını boyutsuz bırakmak.
• Sayfanın üstüne sonradan banner eklemek.

Düzeltmeyi nasıl doğrularsınız?

• PageSpeed Insights'ta CLS değerini ve kayan öğeleri kontrol edin.
• Saha verisini birkaç hafta sonra izleyin.
• SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

Laboratuvar CLS'si iyi, saha verisi neden kötü?

Laboratuvar yalnızca yükleme sırasındaki kaymaları ölçer; gerçek kullanıcılar sayfayı kaydırırken ve uzun süre kalırken ek kaymalar yaşar.

Font kaymaları nasıl önlenir?

Fontu önceden yüklemek ve yedek fontun ölçülerini size-adjust ile hedef fonta yaklaştırmak en etkili yöntemlerdir.

Özet

CLS beklenmedik düzen kaymalarını ölçer. Görsellere boyut verin, geç yüklenen içerik için yer ayırın, içeriğin üstüne sonradan öğe eklemeyin ve animasyonlarda transform kullanın.

Sitenizde bu ve benzeri sorunların olup olmadığını görmek için KTYAPTECH Ücretsiz SEO Analizi aracını kullanabilirsiniz: rapordaki her bulgunun yanında, sorunu anlatan çözüm rehberine giden bir bağlantı bulunur.