CLS Nedir? WordPress’te Cumulative Layout Shift Nasıl Düzeltilir?
- Yayınlandı:
- Son teknik kontrol:
Hız ve Performans
Kısa cevap
CLS (Cumulative Layout Shift), sayfa içeriğinin beklenmedik biçimde ne kadar kaydığını ölçer: okurken metnin aşağı itilmesi veya tıklamak üzereyken düğmenin yer değiştirmesi. İyi değer 0,1 veya altıdır. En yaygın nedenler; genişlik ve yüksekliği belirtilmemiş görseller, yeri önceden ayrılmamış reklam, video ve iframe’ler, sayfanın üstüne sonradan eklenen çerez bildirimleri veya duyuru çubukları ve yüklenince boyutu değişen web yazı tipleridir. Çözümün ortak mantığı, içeriğe yüklenmeden önce yer ayırmaktır.
Önemli noktalar
- CLS bir süre değil, kaymaların büyüklüğünden hesaplanan birimsiz bir puandır.
- Görsellerde genişlik ve yükseklik öznitelikleri tarayıcının yer ayırmasını sağlar; WordPress içerikteki görsellere bunları 5.5’ten beri otomatik ekler.
- Reklam, video ve iframe için önceden sabit bir alan (min-height veya en-boy oranı) ayrılmalıdır.
- Çerez bildirimi ve duyurular içeriği itmek yerine sayfanın üstünde (yerleşik değil, katman olarak) açılmalıdır.
- transform ile yapılan animasyonlar CLS’ye sayılmaz; top, margin, height gibi özellikleri canlandırmak sayılır.
Kaymayı yapan öğeyi bulmak
PageSpeed Insights tanılamalarını açın
“Büyük düzen kaymalarından kaçının” bölümü kayan öğeleri ve her birinin puana katkısını listeler; boyutsuz görseller ayrıca belirtilir.
Yavaş bağlantıda izleyin
Chrome geliştirici araçlarında ağı yavaşlatıp sayfayı yeniden yükleyin; hızlı bağlantıda göremediğiniz kayma yavaşta açıkça görünür.
Kaydırarak test edin
CLS yalnızca ilk yüklemede değil, sayfa boyunca ölçülür. Aşağı kaydırınca beliren reklam veya geç yüklenen bölümler de kayma üretir.
Nedenler ve çözümler
| Neden | WordPress’teki tipik görünümü | Çözüm |
|---|---|---|
| Boyutsuz görseller | Tema veya sayfa oluşturucu görseli width/height olmadan basıyor; CSS’te yalnızca genişlik var | Görsellerde width ve height öznitelikleri kalsın; CSS’te height: auto ile orantı korunur |
| Reklam, video, iframe | Reklam alanı yüklenince yüzlerce piksel açılıyor; YouTube gömmesi sonradan büyüyor | Alanı önceden ayırın: sabit min-height veya aspect-ratio (ör. 16/9) |
| Sonradan eklenen içerik | Çerez bildirimi, duyuru çubuğu veya “ilgili ürünler” bloğu sayfanın üstüne itiliyor | Bildirimleri içeriği itmeyen katman olarak gösterin; blokların yerini önceden ayırın |
| Web yazı tipleri | Metin önce sistem yazı tipiyle çiziliyor, web yazı tipi gelince satırlar kayıyor | Yazı tiplerini erken yükleyin; yedek yazı tipinin ölçüsünü size-adjust ile yaklaştırın veya font-display: optional kullanın |
| Düzen etkileyen animasyonlar | Kaydırıcı veya menü top/margin/height değiştirerek hareket ediyor | Hareketi transform ile yapın |
/* Video gömmeleri: yüklenmeden önce 16:9 alan ayrılır */
.video-kutusu iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
/* Reklam alanı: en sık görülen reklam yüksekliği kadar yer ayırın */
.reklam-alani {
min-height: 250px;
}Kullanıcının tetiklediği kaymalar
Ziyaretçinin bir etkileşiminden hemen sonra (web.dev’e göre yarım saniye içinde) oluşan kaymalar beklenen değişiklik sayılır ve CLS’ye eklenmez; örneğin “devamını oku” düğmesiyle açılan metin. Sorun, ziyaretçi hiçbir şey yapmadan içeriğin yer değiştirmesidir.
CLS’nin Core Web Vitals içindeki yeri ve ölçüm farkları Core Web Vitals rehberinde anlatıldı.
Sık sorulan sorular
Masaüstünde kayma yok, mobilde var. Neden?
Lazy-load CLS’ye neden olur mu?
Düzelttim ama Search Console hâlâ kötü gösteriyor.
Kaynaklar ve teknik referanslar
Bu içeriği hazırlayan
WPHizmet EkibiWordPress teknik ekibi
WPHizmet içeriklerini hazırlayan teknik ekip. Rehberler, WordPress ve WooCommerce sitelerinde günlük olarak karşılaşılan sorunlara dayanır; sürüm, yapılandırma ve gereksinim bilgileri yayın öncesinde resmi dokümantasyondan doğrulanır.
- WordPress teknik destek
- Performans ve Core Web Vitals
- Güvenlik ve zararlı kod temizliği
- WooCommerce
- Teknik SEO