Bu rehberde neler bulacaksınız?
CLS, sayfanın yüklenirken ve kullanılırken ne kadar kararlı kaldığını gösterir.
Rehber; görseller, fontlar, bannerlar ve dinamik bileşenlerde alan ayırarak yanlış tıklama ve okuma kesintisini azaltmayı açıklar.
CLS neyi ölçer?
Cumulative Layout Shift, kullanıcı etkileşimi beklenmeden gerçekleşen görünür düzen kaymalarının toplam etkisini ölçer. Okumaya başladığınız paragrafın aşağı kayması veya basmak üzere olduğunuz düğmenin yer değiştirmesi zayıf görsel kararlılık örnekleridir. CLS bir süre değil, birimsiz puandır.
İyi deneyim hedefi 0,1 veya altıdır ve gerçek kullanıcı ziyaretlerinin 75. yüzdeliğinde değerlendirilir. Kullanıcının tıklamasından hemen sonra beklenen biçimde açılan alanlar genellikle farklı yorumlanır; sorun çoğunlukla alan ayrılmadan sonradan eklenen içeriklerdir.
Görsel ve video boyutları
Görsel, video ve iframe öğelerinde genişlik-yükseklik oranı önceden belirtilmelidir. Tarayıcı dosya inmeden ne kadar alan ayıracağını bildiğinde aşağıdaki içerik aniden itilmez. Responsive tasarımda CSS aspect-ratio özelliği ve uygun boyut kuralları kullanılabilir.
İçerik yönetim sisteminin yüklenen medya için boyut bilgisi üretmesi şablon genelindeki kaymaları azaltır. Görsel optimizasyonu sırasında width ve height değerlerini kaldırmak yanlış yaklaşımdır; tarayıcı bu değerleri CSS ile esnek boyuta dönüştürürken oranı koruyabilir.
Reklam, banner ve sonradan gelen içerik
Reklam, çerez bildirimi, kampanya şeridi ve üçüncü taraf widget için sabit veya minimum alan ayrılmalıdır. İçerik gelmediğinde boşluğun nasıl davranacağı tasarlanmalıdır. Sayfanın üstüne sonradan öğe eklemek, bütün görünümü aşağı ittiği için yüksek kayma oluşturabilir.
Bildirim gerekiyorsa mevcut alanı itmek yerine erişilebilir bir overlay veya önceden ayrılmış bölge değerlendirilebilir. Kişiselleştirilmiş içerik sunulacaksa ilk render ile sonraki durumların ölçüleri mümkün olduğunca benzer tutulmalıdır.
Web fontları ve metin kayması
Yedek font ile web fontu arasındaki karakter ölçüsü farkı metin satırlarını ve çevresindeki bileşenleri kaydırabilir. Uygun fallback seçimi, font metrik ayarları, kritik fontların erken yüklenmesi ve yalnız gereken karakter setlerinin sunulması bu etkiyi azaltır.
Fontu tamamen gizleyip sonra göstermek okunabilirliği geciktirebilir. Tasarım, font yüklenemediğinde de kullanılabilir olmalıdır. Başlıklar ve CTA’lar farklı ekran genişliklerinde test edilerek satır kırılmasının beklenmedik bileşen hareketi oluşturup oluşturmadığı kontrol edilmelidir.
SPA ve route değişimlerinde CLS
Tek sayfa uygulamalarında yeni route içeriği yüklenirken önceki alan aniden kaybolabilir veya iskelet ekran gerçek içerikle farklı ölçüde olabilir. Geçiş bileşenleri hedef düzenin yaklaşık boyutunu korumalıdır.
Scroll konumu ve sabit header davranışı route değişimlerinde test edilmelidir. Kullanıcının etkileşimiyle beklenen geçiş olsa bile sonraki kontrolsüz kaymalar deneyimi bozabilir.
Animasyon ile düzen kayması farkı
Transform animasyonları öğeyi görsel olarak hareket ettirebilir fakat çevresindeki düzeni yeniden hesaplatmayabilir. Top, left, height gibi özelliklerle yapılan animasyonlar daha fazla layout maliyeti ve kayma riski oluşturabilir.
Hareket azaltma tercihi olan kullanıcılar için animasyonlar sınırlandırılmalıdır. Görsel efekt performans ve erişilebilirlik hedefleriyle birlikte tasarlanır.
Dönüşüm sayfalarında kararlılık
Fiyat, paket avantajı ve WhatsApp düğmesinin sonradan yer değiştirmesi yanlış pakete tıklamaya veya dönüşüm kaybına yol açabilir. Bu alanların yüksekliği veri gelmeden önce korunmalıdır.
A/B test araçlarının üst bölüme sonradan varyasyon eklemesi özellikle izlenmelidir. Deney sonucu yalnız tıklama değil, CLS ve kullanıcı hata sinyalleriyle birlikte yorumlanır.
CLS kaynağını bulmak ve doğrulamak
Tarayıcı geliştirme araçları düzen kayması bölgelerini işaretleyebilir. Performans kaydında hangi öğenin hareket ettiği ve hangi yeni öğenin kaymaya neden olduğu ayrı ayrı incelenmelidir; hareket eden öğe her zaman sorunun kaynağı değildir.
Laboratuvar testleri tekrarlanabilir senaryolar sağlar, alan verileri ise kullanıcıların kaydırma ve etkileşim davranışlarını kapsar. Sayfa şablonları cihaz genişliği, yavaş ağ, önbelleksiz ziyaret ve giriş sonrası durumlarda test edilmelidir. Ortak header, reklam ve görsel bileşenleri düzeltilince çok sayıda URL aynı anda iyileşir.
İlgili kaynaklar ve sonraki adımlar
Konuyu uygulamaya geçirmek için aşağıdaki hizmet ve rehber sayfalarını inceleyebilirsiniz:
Sık sorulan sorular
İyi CLS değeri nedir?＋
75. yüzdelikte 0,1 veya altı iyi kabul edilir.
CLS saniye ile mi ölçülür?＋
Hayır. Görünür alan ve hareket etkisinden oluşan birimsiz puandır.
Görsel boyutu vermek neden önemlidir?＋
Dosya yüklenmeden tarayıcının doğru alanı ayırmasını sağlar.
Pop-up her zaman CLS oluşturur mu?＋
Overlay düzeni itmezse oluşturmayabilir; yine de erişilebilirlik ve deneyim kontrol edilmelidir.
Laboratuvar ve alan CLS neden farklı?＋
Gerçek kullanıcılar daha uzun ve çeşitli etkileşimler yaşar; laboratuvar sınırlı senaryo ölçer.
Backlink profiliniz için doğru paketi seçin
Güncel paket kapsamlarını, teslimat sürelerini ve fiyatları karşılaştırın.
Paketleri İncele