CLS یا Cumulative Layout Shift یکی از معیارهای جدید و مدرن است که گوگل با استفاده از گوگل کروم روی سیستم کاربران اندازهگیری میکند. این معیار مشخص میکند که چه مقدار از بخشهای صفحه در طول استفادهی کاربر به دلایل فنی، ناپایدار هستند و ممکن است محل و اندازهی آنها تغییر کند.
برای مثال هنگامی که یک تصویر هنوز بارگزاری نشده است، ممکن است متنهای پس از آن در محلی قرار گرفته باشند و هنگامی که مرورگر تصویر مورد نظر را بارگزاری کند، تمام عناصر پس از آن تصویر جابجا شوند و ارتفاع صفحه زیاد شود.
هر چه مقدار CLS بیشتر باشد، نشان میدهد که صفحهی سایت ناپایداری بیشتری دارد و استفاده از آن برای کاربران دشوارتر است.
CLS چه اثری روی سئو دارد
این طور که به نظر میرسد گوگل در تلاش است تجربهی کاربری یا UX را به عنوان یکی از معیارهای سئو در نظر بگیرد. این کار سبب میشود تا دارندگان سایت و طراحان وب برای ایجاد سایتهایی بهتر برای کاربران تلاش کنند نه سایتهایی بهتر برای موتورهای جستجو.
بنابراین نه تنها CLS بلکه هر عامل دیگر که بتواند UX یا تجربهی کاربری بازدیدکنندگان سایت را بهبود دهد، ممکن است به صورت مستقیم یا غیرمستقیم وضعیت سئو سایت شما را بهتر کند.
واحد CLS چیست ؟
گوگل در بخش Google Search Console گزارش جدیدی آماده کرده است که عوامل مختلف تجربهی کاربری مثل سرعت سایت و CLS را اندازهگیری میکند و نمایش میدهد. این مقدار میتواند عددی بین ۰ و ۱ باشد. هر چه مقدار این عدد کمتر باشد، نشاندهندهی پایدار بودن بیشتر سایت است. مقدار قابل قبول برای سایتهای خوب از نظر گوگل باید کمتر از ۰.۱ باشد.
این عدد بر اساس تعداد و مقدار تغییراتی که در صفحه رخ میدهد، تعیین میشود. یعنی هر چه تعداد تغییرات بیشتر باشد و فاصلهی جابجایی زیادتر باشد، نمرهی CLS افزایش بیشتری را تجربه میکند.
علت افزایش CLS چیست چه طور آن را کم کنیم ؟
تصاویر
یکی از مهمترین دلایل جابجا شدن عناصر صفحه، بارگزاری تصاویر سایت است. اگر هنگام طراحی سایت، اندازهی تصاویر را به شکل زیر روی تگ img مشخص کنید، این مشکل برطرف میشود.
<img src="sample.png" width="300" height="200">
کدهای جاوااسکریپت
یکی دیگر از علتهای متداول در افزایش CLS، استفاده از جاوااسکریپت برای تغییر ساختار یا اضافه کردن محتوا به سایت است. اگر زمان اجرای کدهای جاوااسکریپت برای این کار پس از بارگزاری کامل صفحه باشد، مقدار CLS افزایش پیدا میکند. برای رفع مشکل کدهای خود را به شکلی باید تغییر دهید که کمترین تغییر ساختار در کوتاهترین زمان ممکن به انجام برسد.
بارگزاری دیرهنگام CSS
کدهای CSS که ساختار اصلی صفحه را مشخص میکنند بهتر است در بخش head باشند و کمترین حجم ممکن را داشته باشند. انجام این کار باعث میشود تا شکل کلی صفحه در زمانی کوتاه مشخص شود.
دلایل دیگر
عدم بارگزاری فونتها و برخی دلایل دیگر ممکن است همین اثر را داشته باشد که باید به دقت بررسی و مشکلات آن برطرف شود.
خیلی خوب بود ممنون
ممنون از مطلب مفیدتون.
برای ورد پرس باید چه کاری انجام بشه. سی ال اس ها بعضی وقت ها خیلی بالا میشه.
با تشکر
با سلام
CLS به طور مستقیم با قالب سایت ارتباط دارد. البته گاهی ممکن است برخی افزونههای وردپرس باعث افزایش آن شوند ولی به طور کلی با اصلاح یا تغییر قالب باید این مشکل را برطرف نمایید
ممنون عالی بود و مشکلم حل شد