CLS (Cumulative Layout Shift)
Kısa tanım
CLS, bir sayfa yüklenirken görsel öğelerin beklenmedik şekilde ne kadar kaydığını ölçen Core Web Vitals kararlılık puanıdır.
Sayfa açılırken bir görsel ya da reklam alanı geç yüklenip metni aşağı ittiğinde bu kayma CLS'e yansır. Puan, kayan alanın büyüklüğü ve kaydığı mesafe çarpılarak hesaplanır, sıfıra yakın olması hedeflenir.
PageSpeed Insights ve Search Console'da görülür, resmi eşik 0,1'dir; bu değerin altı iyi, 0,1-0,25 arası geliştirilmesi gereken, üzeri kötü sayılır. Görsellere önceden boyut tanımlamak bu kaymayı büyük ölçüde önler.
Sayfa hızıyla karıştırılır ama CLS hıza değil kararlılığa bakar; hızlı açılan bir sayfa da yüklenirken öğeleri kaydırıyorsa CLS'i kötü çıkabilir.
En sık yapılan hata, çerez izni ya da kampanya bandını sayfa render olduktan sonra en üste eklemektir; bu, altındaki tüm içeriği aşağı iter ve CLS'i büyük ölçüde bozar. Doğrusu, bu tür bileşenler için önceden sabit bir yükseklik ayırmak ya da onları içerik akışını itmeyecek şekilde üste bindirmektir.
Neden önemli
Ziyaretçi tam tıklayacağı an düğme yer değiştirirse yanlış yere basar, bu da güvensizlik ve terk yaratır. CLS'i düşük tutmak formda, sepette ve ödeme adımında yanlış tıklamaları önler.
Örnek senaryo
Bir spa zincirinin fiyat sayfasında geç yüklenen banner metni aşağı itiyor, ziyaretçiler yanlışlıkla farklı bir pakete tıklıyordu; banner alanına sabit yükseklik verilince kayma durdu.
