CLS nədir?

CLS (Cumulative Layout Shift) məzmunun gözlənilməz anlarda hərəkət etməsini ölçür. Oxumağa başladığınız mətn yuxarıda reklam yükləndiyi üçün aşağı sürüşürsə və ya bir düyməyə toxunduğunuz anda yerini dəyişirsə, CLS yüksəkdir. Bu, hərəkət edən sahənin ölçüsü və köçürüldüyü məsafə əsasında hesablanan vahidsiz bir xaldır.

#Bu nə üçün vacibdir

• Oynayan səhifə yanlış kliklərə, oxuma mövqeyinin itirilməsinə və inamsızlıq hissəsinə səbəb olur.
• CLS üç Core Web Vitals göstəricisindən biridir.
• Adətən bunu düzəltmək asandır: sadəcə yer ayırmaq çox vaxt kifayət edir.
• İstifadəçi qarşılıqlı əlaqəsindən dərhal sonra (təxminən 500 ms ərzində) baş verən sürüşmələr (məsələn, menyu açılarkən məzmunun aşağı sürüşməsi) nəzərə alınmır. Xalı yalnız gözlənilməz sürüşmələr artırır.

#SEOAsist daxilində harada görünür

• Overview səhifəsindəki Core Web Vitals kartı mobil və masaüstü üçün CLS göstəricisini ayrı-ayrılıqda göstərir.
• SEO analizi mobil CLS 0.1-dən çox olduqda Layout shift tapıntısını qeydə alır; təklif isə təsvir ölçülərini və gec yüklənən blokları düzəltməkdir.

Ətraflı: Overview dashboard.

#Nümunə

<!-- Dimensions yoxdur: yüklənəndə altındakı hər şeyi aşağı itələyir -->
<img src="/img/product.webp" alt="Oak table">

<!-- Dimensions ilə: brauzer əvvəlcədən yer ayırır -->
<img src="/img/product.webp" alt="Oak table" width="800" height="600">

<!-- Gec yüklənən banner üçün sabit hündürlük ayırın -->
<div style="min-height:90px"><!-- campaign banner --></div>

#Tez-tez edilən səhvlər

• Təsvirlərdə və videolarda width/height (və ya aspect-ratio) göstəricilərini buraxmaq.
• Yüklənmədən sonra məzmunun üstünə kukilər xəbərdarlığı və ya reklam baneri əlavə etmək; bunun əvəzinə aşağıdan açılan overlay istifadə edin.
• Veb şrifti yüklənərkən mətn ölçüsünün çox dəyişməsi; oxşar parametrlərə malik ehtiyat (fallback) şrift seçin.
• Sürüşmələri yalnız ilk yüklənmədə axtarmaq; səhifəni aşağı çəkərkən (scroll) yüklənən məzmun da CLS xalını artırır.