حرفه ای و پایدار از روز اول با جواد یاسمی

تغییر چیدمان تجمعی (CLS) چیست؟

آنچه در این مقاله می خوانید:

تغییر چیدمان تجمعی(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 قابل مشاهده است.

مشاهده این مطلب  بودجه خزش Crawl Budget چیست؟

5) اجتناب از انیمیشن های غیر ترکیبی

در صورت امکان، انیمیشن های ترکیبی را فقط برای کاهش نخ اصلی و جلوگیری از رنگ آمیزی مجدد پیکسل ها در طول بارگذاری صفحه اجرا کنید.

پلتفرم خدمات سئو سایت یاسئومی

برای داشتن یک سایت با سرعت عالی از سایت های وردپرسی تا سایت های اختصاصی کافی است به تیم فنی یاسئومی برای گرفتن نتیجه اعتماد کنید.

جواد یاسمی (متخصص سئو)

جواد یاسمی (متخصص سئو)

مشاوره و مجری سئو سایت های کارخانه ها برندها با بهترین و بزرگترین تیم سئو در ایران | سئو با جواد یاسمی

آخرین مقالات

ده روش ساده برای افزایش سرعت وب‌سایت شما
آیا از ترفندهای ساده‌ای که می‌توانند نتایج آنلاین شما را به طور چشمگیری افزایش دهند، غافل هستید؟ ریچل...
راهنمای بهینه‌سازی صفحات محصولات آمازون
در دنیای وسیع و رقابتی تجارت الکترونیک، آمازون غول بی‌رقیب است. با میلیون‌ها فروشنده که برای جلب توجه...
8 پادکست فوق‌العاده سئو برای ارتقای دانش شما
(نام پادکست مناسب برای) نتایج جستجوی گوگل در حال صعود است. بهینه‌سازان مبتدی سئو، آژانس‌ها و بازاریابان...
ساخت نقشه راه سئو برای افزایش عملکرد
نقشه راه سئو مکانی برای برنامه‌ریزی، زمان‌بندی و اولویت‌بندی کارهای استراتژی سئو این فقط یک لیست ساده...
چک لیست سئو 2024 - لیست کامل سئوی ۲۰۲۴
ما با استفاده از همین چک لیست، ترافیک ارگانیک خود را در 30 روز 189.12 درصد افزایش دادیم. همچنین به ما...
گوگل E-E-A-T: چگونه محتوایی با اولویت انسان ایجاد کنیم (+ ارزیابی رایگان)
این کدها، سبک‌بندی صفحات وب را با استفاده از زبان CSS تعریف می‌کنند. این سبک‌ها شامل تنظیمات حاشیه‌ها،...

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  • تماس
  • تلگرام
  • واتساپ
× Send

خدمات سئو، طراحی سایت و گوگل

رتبه 1 گوگل باشید.

سفارش دهید >> 09376996070