خانه / اخبار / (Cumulative Layout Shift (CLS چیست؟
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (1 رای, میانگین: 5,00 از 5)
Loading...

(Cumulative Layout Shift (CLS چیست؟

آیا تا به حال مقاله ای را به صورت آنلاین خوانده اید که ناگهان چیزی در صفحه تغییر کند؟ بدون هشدار ، متن حرکت می کند و جای خود را از دست می دهید. یا حتی بدتر: شما در شرف ضربه زدن روی یک پیوند یا یک دکمه هستید ، اما بلافاصله قبل از فرود آمدن انگشت خود پیوند حرکت می کند ، و در آخر بر روی چیز دیگری کلیک می کنید!

بیشتر اوقات این نوع تجربه ها فقط آزار دهنده هستند ، اما در بعضی موارد می توانند آسیب واقعی ببینند. متغیر Cumulative Layout Shift(CLS)  به شما کمک می کند تا با اندازه گیری میزان بروز آن برای کاربران این مشکل را برطرف کنید.

(CLS ) Cumulative Layout Shift چیست؟

CLS معیاری برای اندازه گیری ثبات بصری در زمان بار گذاری یک صفحه است  و به معنای دیگر یک معیار و اندازه گیری برای تغییر غیر منتظره عناصر وب در زمان لود شدن برای کاربر هست.

چه عواملی باعث تغییر CLS می شود؟

به گفته گوگل ، شایع ترین دلایل رخ دادن CLS عبارتند از:

1.تصاویر بدون ابعاد

2.تبلیغات ، جاسازی ها و فریم های بدون ابعاد

3.محتوای تزریق پویا

4.قلم های وب که باعث FOIT / FOUT می شوند (فلش متن نامرئی و فلش متن غیر سبک)

5.اقدامات منتظر پاسخ شبکه قبل از به روز رسانی DOM

چگونه میتوان CLS را بهبود بخشید؟

اندازه تصاویر و ویدئو ها

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

فونت های مبتنی بر وب

فونت‌ های مبتنی بر وب می ‌توانند باعث شوند آن چه به عنوان Flash از متن‌ های نامرئی یا همان FOIT و FOUT یا متن‌ های بدون استایل شناخته می‌ شوند، در صفحه به وجود آیند. راه جلوگیری از این موضوع، استفاده از rel=”preload” در لینک بارگیری فونت وب است.

محتوای پویا

سعی کنید از درج محتوای پویا (به عنوان مثال ، آگهی ها ، فرم ها و غیره) در بالای محتوای موجود خودداری کنید مگر اینکه در واکنش به تعامل کاربر باشد. این به شما کمک می کند تا از تغییر چیدمان غیر منتظره جلوگیری شود.

ذخیره فضایی برای تبلیغات

تبلیغات یکی از بزرگترین عوامل در تغییر آرایش تجمعی است. راه حل این است که در کد سایت خود برای تبلیغات خود فضایی ذخیره کنید. به عنوان مثال ، فرض کنید شما می خواهید یک تبلیغات آسمان خراش 160 × 600 در نوار کناری خود نمایش دهید، به جای اینکه فقط کد آگهی را مستقیماً اضافه کنید می توانید آن را در داخل <div> با ابعاد آگهی قرار دهید به این ترتیب حتی اگر محتوای آگهی هنوز بارگیری نشده باشد فضا محفوظ است..همچنین باید در قرار دادن تبلیغات در بالای قسمت نمای بازدید کننده دقت داشته باشید زیرا این مکان ها مواردی هستند که به احتمال زیاد باعث تغییر طرح می شوند.

فرمول محاسبه نمره CLS 

  • کسر های ضربه ای

کسر ضربه کل فضای موجود در هنگام بارگیری عنصر از زمان بارگیری تا زمان تغییر مکان است

  • کسر های فاصله ای

کسر فاصله مقدار فضایی است که عنصر از موقعیت اصلی خود به موقعیت نهایی خود منتقل کرده است.

CLS = کسر ضربه * کسر فاصله

معیار خوب و بد در Cumulative Layout Shift

CLS اثر مستقیم بر روی نمره کلی Performance در GTMetrix دارد و این اثر کلا ۵ درصد هست ولی نکته بسیار مهم این هست که CLS اثر مستقیم بر روی سرعت سایت شما نداره و بلکه بر روی تجربه کاربری اثر دارد.

  • هر چیزی کمتر از .1 “خوب” در نظر گرفته می شود.
  • هر چیزی بین .1 و .25 “نیاز به بهبود” تلقی می شود.
  • هر چیزی بالاتر از .25 “ضعیف” در نظر گرفته می شود.

معیار خوب و بد در Cumulative Layout Shift

اگر یک وبسایتی CLS پایین داشته باشه یعنی دارای صفحه نمایش پایداری است که عناصر رو به اطراف منتقل نمیکنه و بارگیری ثابت و قابل پیش بینی تمام محتوای وب سایت را تضمین میکنه. طبیعتا شما اگر CLS رو بهبود بدید نهایتا Performance سایت شما ۵ درصد بهبود پیدا میکنه.

جمع بندی

Cumulative Layout Shift (CLS)  یکی از معیارهای لازم و ضروری است که باید برای سئو و بهینه سازی سایت خود آن را در نظر بگیرید. این فاکتور می تواند در رتبه بندی وب سایت شما  براساس استانداردهای موتور های جستجو به خصوص گوگل تاثیرگذار باشد. با توجه به اینکه گوگل در سال ۲۰۲۱ توجه ویژه‌ ای به تجربه مطلوب کاربر از بازدید از صفحات وب سایت کرده است، بهینه سازی معیار CLS باید جزو یکی از مهمترین معیارهای بهینه سازی و سئو وب سایت ها در نظر گرفته شود

عالی بود(1)جالب نیست!(0)

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

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

7 − 4 =