Sayfa neden okurken aşağı kayıyor?

Bir başlığa dokunmak üzereyken yukarıdan bir görsel yüklenir ve hedef aşağı kayar. Bu küçük hareket, yanlış bağlantıya basmana neden olabilir. CLS, beklenmedik yerleşim kaymalarını anlamaya yarayan bir metriktir. Sorun yalnızca görsel rahatsızlık değil, kontrolün kullanıcının elinden çıkmasıdır.

Okurken ekranın kayması benim için küçük bir teknik kusur değil, dikkati bozan bir deneyim. İnsan bir satırı takip ederken başka yere taşınıyorsa tasarım ne kadar şık olursa olsun rahatsız edebilir. Bu yüzden boş alanı sonradan doldurmayı planlamayı, sayfa yerleşiminin temel bir parçası olarak görüyorum.

Temel fikir

Boyutu bilinmeyen görseller, sonradan eklenen bileşenler ve farklı ölçülerde çizilen fontlar kaymaya yol açabilir. web.dev iyi bir CLS için 0,1 veya altını önerir. Bu değer saniye değildir; görünür alanın ne kadar etkilendiği ve öğelerin ne kadar hareket ettiğiyle ilişkili bir skordur.

Bir örnek üzerinden

Blog kapağını dosya gelmeden önce de 3:2 oranında yer kaplayacak şekilde tanımladığını düşün. Tarayıcı metni bu boşluğun altına yerleştirir; dosya geldiğinde yeni alan açmak zorunda kalmaz. Reklam veya video kutusu için de aynı planlama yapılabilir. Ama gereksiz büyük boşluklar bırakmak başka bir kullanım sorunu doğurur.

Nereden başlamalı?

Sayfayı yalnızca ilk yüklemede kontrol etme. Filtre aç, aşağı kaydır, yazı tipinin yüklenmesini bekle. Hangi hareketin kullanıcı isteğiyle, hangisinin habersiz gerçekleştiğini ayır. Sabit bir düzen, hareketli efektlerden daha temel bir güven hissi sağlar.

Benim yaklaşımım

Bir blog kapağı yüklenmeden önce ona alan ayırmayı isterdim. Aynı şekilde sonradan gelen bir duyuru, okunmakta olan paragrafı aşağı itmemeli. İlk kontrolde yalnızca sayfanın bitmiş görüntüsüne değil, açılma sırasında nasıl değiştiğine bakardım. Sorunu çoğu zaman son ekran görüntüsü tek başına anlatmaz.