CLS یا Cumulative Layout Shift چیست ؟

Cumulative Layout Shift چیست؟

Cumulative Layout Shift یا CLS از فاکتورهای سه‌گانه هسته گوگل به حساب می‌آید که براساس تغییرات ناگهانی تصاویر، المان‌ها و فاصله میان آنها در زمان لود شدن سایت محاسبه می‌شود. این تغییرات به دلایل مختلفی از جمله دیر لود شدن فونت‌ها، تصاویر، دکمه‌ها و سایر المان‌های سایت به وجود می‌آید.

CLS معیار بزرگترین انفجار جابه جایی برای هر تغییر چیدمان غیر منتظره ای است که در طول عمر یک صفحه به وقوع می‌پیوندد. هرگاه یک عنصر قابل مشاهده موقعیت خود را از یک فریم رندر شده به فریم دیگر تغییر دهد ، تغییر چیدمان (layout shift) اتفاق می افتد‌.

تاثیر CLS بر روی سئو 

گوگل در پی آن است تجربه‌ی کاربری یا UX را به عنوان یکی از معیارهای سئو در نظر بگیرد. این کار باعث می‌شود تا دارندگان سایت و طراحان وب برای ساخت سایت‌هایی بهتر برای کاربران تلاش کنند نه سایت‌هایی بهتر برای موتورهای جستجو. درنتیجه نه تنها CLS بلکه هر عامل دیگر که بتواند UX یا تجربه‌ی کاربری بازدیدکنندگان سایت را بهبود دهد، ممکن است مستقیما یا غیرمستقیم وضعیت سئو سایت شما را بهبود بخشد.

معرفی واحد CLS

در قسمت Google Search Console گزارش جدیدی مبنی بر تجربه‌ی کاربری مثل سرعت سایت و CLS را اندازه‌گیری نمایش داده می‌شود. این مقدار می‌تواند عددی بین ۰ و ۱ باشد. هر چه مقدار این عدد کمتر باشد، نشان‌دهنده‌ی پایدار بودن بیشتر سایت است. مقدار قابل قبول برای سایت‌های خوب از نظر گوگل باید کمتر از ۰.۱ باشد. این میزان بر اساس تعداد و مقدار تغییراتی که در صفحه به وقوع می‌پیوندد، محاسبه می شود. بدان معنا که هر چه تعداد تغییرات بیشتر، فاصله‌ی جابجایی زیادتر  و در نتیجه نمره‌ی CLS افزایش بیشتری خواهد یافت.

علت افزایش CLS و  چگونگی کاهش آن

• تصاویر

یکی از مهم‌ترین دلایل جابجا شدن عناصر صفحه، بارگزاری تصاویر سایت است. اگر در زمان طراحی سایت، اندازه‌ی تصاویر را روی تگ img مشخص کنید، این مشکل حل خواهد شد ‌‌.

• کدهای جاوااسکریپت

از دیگر علل متداول در افزایش CLS، استفاده از جاوااسکریپت در جهت تغییر ساختار یا اضافه کردن محتوا به سایت است. اگر زمان اجرای کدهای جاوااسکریپت برای این کار پس از بارگزاری کامل صفحه باشد، مقدار CLS افزایش میابد. برای حل این مشکل کدهای خود را به شکلی باید تغییر دهید که کمترین تغییر ساختار در کوتاه‌ترین زمان ممکن انجام شود.

• بارگزاری دیرهنگام CSS

کدهای CSS که ساختار اصلی صفحه را تعیین می‌کنند بهتر است در بخش head باشند و کمترین حجم ممکن را داشته باشند. انجام این کار باعث می‌شود تا شکل کلی صفحه در زمانی کوتاه مشخص شود.

• علل دیگر

بارگزاری نکردن فونت‌ها و برخی دلایل دیگر ممکن است همین تاثیر را داشته باشد که باید به دقت بررسی و مشکلات آن رفع شود.

موارد نام برده مربوط به Unexpected Layout Shift است. به عبارت دیگر تغییراتی که ما انتظار وقوع آن‌ها را نداریم ولی گاهی اوقات تغییراتی وجود دارند که کاربران انتظار آن را دارند.