Bir sayfayı okurken metnin aniden aşağı kayması ya da tam düğmeye basacakken yerin değişmesi, kümülatif düzen kaymasının (CLS) en bilinen sonucudur. Bu metrik, sayfa yüklenirken görünür öğelerin ne kadar beklenmedik biçimde yer değiştirdiğini ölçer. Google bunu Core Web Vitals kapsamında değerlendirir. Genel olarak 0,1 ve altı iyi, 0,25 üzeri zayıf kabul edilir.
Kaymanın en sık görülen nedenleri
En yaygın neden, boyutu tanımlanmamış görsellerdir. Tarayıcı görselin ne kadar yer kaplayacağını bilmediği için önce metni yerleştirir, görsel inince her şeyi aşağı iter. Aynı durum video, iframe ve harita gömmeleri için de geçerlidir. İkinci büyük neden, sonradan yüklenen reklam alanları ve çerez bildirimleridir; bunlar sayfa çizildikten sonra araya girer. Üçüncü neden ise web fontlarıdır. Yedek yazı tipi ile asıl yazı tipinin harf genişlikleri farklıysa satırlar yeniden dizilir ve metin oynar. Son olarak, JavaScript ile sonradan eklenen bantlar, öneri kutuları ve yorum alanları da düzeni bozar.
Görsel ve gömülü içerikte çözüm
Her img etiketine width ve height özelliklerini yazın. Modern tarayıcılar bu değerlerden en-boy oranını hesaplayıp yeri önceden ayırır. Duyarlı tasarımda CSS ile aspect-ratio tanımlamak da aynı işi görür. Video ve iframe gibi öğeleri sabit oranlı bir kapsayıcıya koyun. Sayfanın ilk ekranında görünen görseller için gecikmeli yüklemeyi kullanmayın; yalnızca ekran dışındaki görsellere uygulayın.
Font, reklam ve dinamik bileşenler
Fontlarda font-display: swap kullanıyorsanız yedek fontu asıl fonta yakın boyutlu seçin ve size-adjust gibi CSS ayarlarıyla farkı azaltın. Kritik fontları preload ile erken yükletmek de kaymayı azaltır. Reklam ve banner alanlarına min-height vererek yer ayırın; reklam dolmazsa bile boşluk sabit kalsın. Çerez bildirimini sayfa akışının içine değil, ekrana sabitlenmiş bir katman olarak gösterin. Kullanıcı etkileşimiyle açılan menüler kayma sayılmaz, ancak kendiliğinden beliren öğeleri mevcut içeriğin üstüne değil, ayrılmış alana yerleştirin.
Ölçme ve izleme
Sorunu bulmak için Chrome geliştirici araçlarındaki Performans panelinde Layout Shifts kaydına bakın; kaymaya neden olan öğe işaretlenir. Lighthouse laboratuvar verisi verir, gerçek kullanıcı deneyimi içinse Search Console’daki Core Web Vitals raporu ve saha verileri daha güvenilirdir. Değişiklik yaptıktan sonra verinin güncellenmesi birkaç hafta sürebilir.
Kayma çoğunlukla birkaç öğeden kaynaklanır. Önce görselleri, sonra reklam ve fontları düzeltmek, kısa sürede belirgin bir iyileşme sağlar.