CLS (Düzen Kayması) Sorunu Nasıl Çözülür?

Okuma süresi: 2 dk

Kısa yanıt: CLS’nin en yaygın nedeni genişlik ve yükseklik bilgisi olmayan görseller, sonradan yüklenen reklam/gömülü alanlar ve font değişimidir. Tüm img ve iframe etiketlerine width/height ekleyin, reklam ve banner alanları için önceden sabit yükseklik ayırın ve içeriği mevcut içeriğin üstüne değil altına ekleyin.

Bu rehber kimin için: Core Web Vitals’ı iyileştirmek isteyenler · Gereken süre: 30 dakika · Seviye: Orta

Cumulative Layout Shift, sayfa yüklenirken görünür öğelerin beklenmedik şekilde yer değiştirme miktarını ölçer. Bir düğmeye tıklamak üzereyken içeriğin aşağı kayması kullanıcıyı yanlış yere tıklatır. İyi değer 0,1 veya altıdır. Kullanıcının tıklamasından sonraki 500 ms içindeki kaymalar hesaba katılmaz.

CLS düzeltme adımları

Kayan öğeyi bulun: PageSpeed Insights’ta “Layout shift culprits” (düzen kayması nedenleri) öngörüsünü açın; Chrome Geliştirici Araçları › Performance kaydında “Layout shifts” satırına bakın.
Görsel boyutları: Tüm görsellerde width ve height olsun; CSS’te max-width: 100%; height: auto; kullanın.
Gömülü içerik: YouTube ve harita iframe’leri için aspect-ratio: 16 / 9 gibi bir oran tanımlayın.
Reklam alanları: Reklam bloklarına min-height verin; reklam gelmese de alan korunur.
Çerez bannerı: Bannerı sayfa içeriğini iten bir blok yerine sabit konumlu (position: fixed) bir katman olarak gösterin.
Fontlar: Yedek fontla web fontunun ölçüleri arasındaki farkı azaltın; web font optimizasyonu rehberine bakın.
Dinamik içerik: Duyuru şeritlerini sayfa yüklendikten sonra en üste eklemeyin.

Tema ve eklenti kaynaklı kaymalar

Bazı temalar mobil menüyü veya kaydırıcıyı JavaScript yüklendikten sonra oluşturur ve sayfa bu anda kayar. CSS/JS gecikmeli yükleme ayarları da bu etkiyi artırabilir. Kaymayı bir eklenti ayarı başlattıysa ayarı kapatıp tekrar ölçün.

Hâlâ çözülmediyse

Kaymanın kaynağını bulmak için PageSpeed Insights raporu okuma rehberinden yararlanın; görsel boyutları için görsel optimizasyonu adımlarını uygulayın. Hız odaklı altyapı için WordPress hosting paketlerimizi inceleyebilirsiniz.

Sık sorulan sorular

CLS sunucu hızıyla ilgili mi?

Doğrudan değil; CLS büyük ölçüde sayfa yapısı ve CSS ile ilgilidir.

Laboratuvar CLS’si 0, saha verisi kötü.

Saha verisi kaydırma ve etkileşim sırasında oluşan kaymaları da içerir; sayfayı kaydırarak test edin.

İlgili rehberler

Bu rehber işinize yaradı mı?