CLS, İngilizce cumulative layout shift ifadesinin kısaltmasıdır: sayfa yüklenirken içeriğin beklenmedik biçimde yer değiştirmesinin ölçüsüdür. Bir düğmeye basmak üzereyken sayfanın kayması ve yanlış yere tıklamanız tam olarak bu ölçütün yakaladığı şeydir. LCP ve INP ile birlikte Google’ın üç temel hız ölçütünden biridir.
Nasıl hesaplanır?
Kayan alanın ekranın ne kadarını kapladığı ile ne kadar uzağa kaydığı çarpılır. Bu yüzden birimi yoktur, saniye ya da piksel değil sadece bir sayıdır. Google’ın ölçütü 0,1 ve altı iyidir; 0,25 üstü kötü sayılır ve değerlendirme gerçek kullanıcıların 75’inci yüzdeliği üzerinden yapılır.
En sık dört sebep
- Ölçüsü verilmemiş görseller. Tarayıcı görselin ne kadar yer kaplayacağını bilmediği için önce sıfır yer ayırır, görsel gelince alttaki her şeyi aşağı iter.
- Geç gelen yazı tipleri. Metin önce yedek yazı tipiyle çizilir, asıl yazı tipi gelince satırların yüksekliği değişir.
- Sonradan eklenen bloklar. Reklam, çerez şeridi, duyuru bandı; içeriğin üstüne girip her şeyi aşağı kaydırır.
- Ölçüsü bilinmeyen gömülü içerik. Video, harita ve sosyal medya gömüleri.
Nasıl önlenir?
Kural tek cümleyle şudur: gelecek olan şeyin yerini önceden ayırın.
- Her görsele width ve height yazın; tarayıcı oranı bundan hesaplar ve yeri baştan ayırır. Aynı görselin alternatif metni de bu sırada yazılır.
- Yazı tiplerini ön yükleyin ve yedek yazı tipini ölçüce yakın seçin.
- Reklam ve duyuru alanlarına sabit yükseklik verin, boşken de o yer dursun.
- Yeni içeriği mevcut içeriğin üstüne değil altına ekleyin.
Kullanıcının başlattığı kayma sayılmaz
Bir açılır menüyü siz açtığınızda içerik kayar, ama bu ölçüte girmez. Tarayıcı kullanıcı etkileşiminden sonraki kısa bir pencerede olan kaymaları beklenen sayar. Ölçütün adındaki "beklenmedik" kelimesi buradan gelir.