CLS, bir sayfa yüklenirken ve kullanılırken görünür öğelerin beklenmedik biçimde ne kadar yer değiştirdiğini ölçen metriktir; tam tıklanacakken kayan buton ya da aşağı inen metin gibi görsel kararsızlıkları sayısallaştırır.
CLS, Core Web Vitals'ın görsel kararlılık metriğidir. Sayfa açılırken bir görsel geç yüklenip metni aşağı ittiğinde, bir reklam alanı sonradan belirdiğinde ya da web fontu gelince satırlar yeniden dizildiğinde ekranda kayma olur. Tarayıcı her beklenmedik kaymanın büyüklüğünü ve etkilenen alanı hesaplar, bunları toplar ve tek bir puana dönüştürür. Google'ın yayınladığı eşiğe göre 0,1'in altındaki CLS değerleri iyi kabul edilir. Kullanıcının kendi eylemi sonucu oluşan kaymalar, örneğin bir menünün açılması, ölçüme dahil edilmez.
İşletme sahibi için neden önemli
Kaymalar yalnızca rahatsız edici değildir; yanlış tıklamaya yol açar. Kullanıcı bir ürün bağlantısına basacakken araya giren bir banner yüzünden başka bir yere gider ya da formu göndereceğine reklamı açar. Bu durum güveni zedeler ve özellikle mobilde terk oranını artırır. CLS sorunları çoğunlukla tasarım ve kodlama disiplininden kaynaklanır: görsellere boyut tanımlamamak, dinamik içeriğe yer ayırmamak, fontları geç yüklemek. Bunlar proje başında önlenmesi kolay, sonradan bulması zahmetli hatalardır.
Örnek
Bir haber ve içerik sitesinin makale sayfalarında, başlığın hemen altına sonradan yüklenen bir reklam alanı var. Reklam gelince tüm metin 250 piksel aşağı kayıyor ve okuyucu yerini kaybediyor. Reklam alanına sabit yükseklik tanımlanıp yer önceden ayrıldığında kayma sıfırlanıyor; sayfanın CLS değeri eşiğin altına iniyor ve okuma süresi artıyor.
Sık yapılan hata
Görsel ve video etiketlerine genişlik ve yükseklik yazmamaktır; tarayıcı görselin boyutunu ancak indirdikten sonra öğrenir ve o ana kadar yer ayırmaz. İkinci sık hata, sayfa yüklendikten sonra üstten açılan çerez uyarısı ya da kampanya bandının içeriği aşağı itmesidir; bu tür öğeler akışın üstünde konumlanmalıdır. Üçüncüsü, web fontu yüklenirken yedek fontla gösterilen metnin sonradan farklı genişlikte yeniden dizilmesidir.
Teklif alırken sorulacak soru
Görseller, videolar, reklam ve kampanya alanları için yer ayırma kuralı kodlama standardının parçası olacak mı? Çerez uyarısı ve bildirim bantları sayfa içeriğini kaydırmadan gösterilecek mi?
Sık sorulanlar
CLS neden bazı ziyaretlerde iyi, bazılarında kötü çıkıyor?
Kayma, bağlantı hızına ve cihaza göre değişir. Yavaş bağlantıda görseller ve reklamlar daha geç gelir, dolayısıyla daha fazla kayma yaşanır. Bu yüzden gerçek kullanıcı verisine bakmak gerekir.
Kayma yapan öğeyi nasıl bulurum?
PageSpeed Insights ve Chrome geliştirici araçları, hangi öğelerin ne kadar kaydığını listeler. Çoğu zaman sorumlu boyutsuz görseller, geç gelen reklam alanları ya da web fontlarıdır.
