تغییر چیدمان تجمعی(CLS) یک معیار عملکرد است که در سال 2020 توسط لایت هاوس برای اندازهگیری ثبات بصری درک شده در بارگذاری صفحه معرفی شد.
به بیانی ساده، CLS تغییر غیرمنتظره عناصر وب را در حین رندر شدن صفحه اندازه گیری میکند. این اندازهگیری سپس به‌عنوان یک امتیاز تجمعی از تمام تغییرات طرح‌بندی فردی در صفحه شما تعیین می‌شود.
CLS همچنین یکی از معیارهایی است که هسته حیاتی گوگل را تشکیل می دهد.
تغییر چیدمان تجمعی چه چیزی را اندازه گیری می کند؟
بنا به گوگل،CLS یک معیار مهم و کاربر-محور برای اندازهگیری ثبات بصری است، زیرا به تعیین تعداد دفعاتی که کاربران با تغییرات طرح‌بندی غیرمنتظره مواجه می‌شوند کمک میکند. داشتن CLS پایین امری مطلوب است زیرا ما را مطمئن می سازد که صفحه برای بیینده لذت‌بخش است.
اساساً، هر بار که یک صفحه بارگذاری می‌شود، برخی از عناصر صفحه به‌طور غیرمنتظره تغییر می‌کنند و بر نحوه تعامل کاربران با صفحه وب تأثیر می‌گذارند.
این عناصر می توانند شامل دکمه ها، فرم های تماس، تصاویر، فیلم ها، فونت ها یا انواع دیگر محتوا باشند.
در وب سایتی که دارای CLS پایین است، صفحه نمایش ثابت بوده، عناصر جابجا نمی شوند و تمام محتوای وب سایت دارای بارگذاری ثابت و قابل پیش بینی است.
کاهش CLS امری بسیار مهم است زیرا صفحاتی که در اطراف حرکت می کنند می توانند منجر به منفی شدن تجربه کاربری شوند (به ویژه در دستگاه های تلفن همراه).
به عنوان مثال، همه ما موقعیتی را تجربه کرده‌ایم که در آن منتظر بوده‌ایم تا صفحه‌ای بارگذاری شود یا دکمه‌ای را پیدا کرده‌ایم که قصد داشتیم رویش کلیک کنیم. با این حال، زمانی که روی آن کلیک کردیم/ ضربه زدیم، صفحه نمایش به پایین جابجا شده است و ما روی یک پیوند دیگر، اغلب یک آگهی، کلیک کرده ایم.
تغییر چیدمان مورد انتظار در مقابل غیرمنتظره
توجه به تفاوت بین تغییرات مورد انتظار و غیرمنتظره چیدمان مهم است.
● تغییر طرح مورد انتظار در پاسخ به ورودی کاربر اتفاق می افتد.
○ برای مثال، کلیک کردن آیکون جستجو برای بزرگ کردن یک فیلد ورودی
● از سوی دیگر، تغییر طرح‌بندی غیرمنتظره معمولاً توسط محتوای شخص ثالث، تصاویر بدون بعد یا سایر محتوای پویا ایجاد می‌شود.
○ برای مثال، تبلیغی که ناگهان ظاهر می‌شود و تصویر یا محتوا را به پایین صفحه می‌برد.
GTmetrix با حذف تغییرات طرح‌بندی که در عرض 0.5 ثانیه از ورودی کاربر رخ می‌دهد، تغییرات مورد انتظار را از تغییرات غیرمنتظره تفکیک می کند.
تأثیر تغییر چیدمان تجمعی بر امتیاز عملکرد شما
CLS پانزده درصد از کل امتیاز عملکرد را به خود اختصاص می دهد که نشان دهنده اهمیت نسبتاً بالای آن است.
برخی دیگر از معیارهای امتیاز عملکرد مستقیماً با سرعت بارگذاری صفحه مرتبط هستند، اماCLS به اندازه گیری تجربه صفحه بازدیدکنندگان شما میپردازد.
CLS به ویژه سهم عمده ای در “لذت کاربر” دارد – یعنی تجربه ای روان و بدون تاخیر برای بازدیدکنندگان شما.
این ویژگی با گنجاندن آن در مجموعه Web Vitals بیشتر تقویت می شود.
آستانه تغییر چیدمان تجمعی
باید توجه داشته باشید که CLS یک امتیاز است – نه یک زمان بندی در میلی ثانیه یا ثانیه. این امتیاز با استفاده از تغییرات شناسایی شده در مرورگر محاسبه می شود.
آستانه نمرات CLS به شرح زیر است:
- خوب –هیچ اقدامی لازم نیست CLS = 0.1 یا کمتر.
- خوب است اما جای بهبود دارد CLS = بین 0.1 و 0.15
- طولانی تر از حد توصیه شده =CLS بین 0.15 و 0.25.
- بسیار طولانی تر از حد توصیه شده CLS = 0.25 یا بالاتر.
چگونه تغییر چیدمان تجمعی را بهبود دهیم؟
توجه داشته باشید که ممیزی های خاص ذکر شده در زیر احتمالاً بیشترین سهم را در CLS شما دارد. با این حال، امتیاز CLS صفحه شما ممکن است تحت تأثیر بهینه سازی های دیگری قرار گیرد که باعث افزایش سرعت سایت شود در اینجا ذکر نشده است.
امتیاز CLS خود را با گنجاندن اقدامات خوب در گردش کار خود بهبود بخشید، مانند:
1) تعیین ابعاد تصویر
همیشه عرض و ارتفاع را برای عناصر تصویری و ویدیویی وب سایت خود مشخص کنید تا از فاصله صحیح برای تصاویر/فیلم ها استفاده شود.
از طرف دیگر، می‌توانید از جعبه‌های مربوط به نسبت ابعاد CSS برای انجام همین کار استفاده کنید. برای آشنایی بیشتر با این موضوع، این مقاله را بخوانید.
۲) کاهش تغییرات طرح‌بندی ناشی از تبلیغات، جاسازی‌ها و آیفریم‌ها
برای کاهش تغییرات طرح‌بندی ناشی از تبلیغات، جاسازی‌ها و آیفریم‌ها، این کارها را انجام دهید:
- قبل از بارگیری کتابخانه آگهی، اندازه جایگاه آگهی را رزرو کنید (ترجیحاً بزرگترین).
- تبلیغات را به پایین یا خارج از نما منتقل کنید.
- وقتی هیچ تبلیغی برای نمایش وجود ندارد از جایگاه-دارها استفاده کنید.
3) پرهیز از درج مطالب جدید بالای محتوای موجود
سعی کنید از درج محتوای پویا (مانند بنرها، فرم‌ها و غیره) بالای محتوای موجود خودداری کنید، مگر اینکه در پاسخ به تعامل کاربر باشد. این کار به جلوگیری از تغییرات غیرمنتظره چیدمان کمک می کند.
4) جلوگیری از فلش متن نامرئی (FOIT)
مشکل FOIT- Flash of Invisible Textنیز می تواند CLS صفحه شما را تحت تاثیر قرار دهد. اطمینان حاصل کنید که متن شما در حین بارگیری فونت های وب با بارگذاری پیش فونت های وب و/یا استفاده از ویژگی font-display قابل مشاهده است.
5) اجتناب از انیمیشن های غیر ترکیبی
در صورت امکان، انیمیشن های ترکیبی را فقط برای کاهش نخ اصلی و جلوگیری از رنگ آمیزی مجدد پیکسل ها در طول بارگذاری صفحه اجرا کنید.
پلتفرم خدمات سئو سایت یاسئومی
برای داشتن یک سایت با سرعت عالی از سایت های وردپرسی تا سایت های اختصاصی کافی است به تیم فنی یاسئومی برای گرفتن نتیجه اعتماد کنید.
