آرتا رسانه

cls چیست

Cumulative Layout Shift چیست؟

Table of Contents

Cumulative Layout Shift (CLS) یکی از معیارهای Core Web Vitals است که توسط گوگل تعریف شده و پایداری قابل مشاهده صفحات وب را اندازه‌گیری می‌کند. وقتی که تغییرات غیرمنتظره در نمایش محتوا در حین بارگذاری صفحه وب به دلیل تغییر اندازه تصاویر، نمایش تبلیغات، انیمیشن، رندرینگ مرورگر یا عناصر اسکریپت دیگر اتفاق می‌افتد، این تغییرات کیفیت تجربه کاربری را پایین می‌آورد و می‌تواند باعث گیج شدن کاربران سایت شود و یا نیاز باشد مدت زمان بیشتری منتظر بمانند تا صفحه به طور کامل لود شود.

یک قسمت بزرگ از HTML، CSS، JavaScript و سایر منابع می‌توانند پس از نمایش محتوای اولیه در مرورگر وب بارگذاری شوند. CLS اطمینان می‌دهد که آنچه که بعداً بارگذاری می‌شود، صفحه را به نحوی تغییر نمی‌دهد که تجربه کاربری را تحت تاثیر قرار دهد و محتوای صفحه جابجا نمی شود. در این مقاله با مفهوم، امتیاز استاندارد و روش های بهبود Cumulative Layout Shift آشنا می شویم و تاثیر آن بر سئو سایت را بررسی می کنیم.

نکته: سئو سایت مجموع فعالیت های فنی و تکنیکال و درج درست و اصولی محتوا در سایت است که نیاز به مهارت و تخصص دارد. به همین دلیل است که در استعلام قیمت سئو سایت، همه این نکات و فعالیت ها در نظر گرفته می شود.

cls چیست؟

CLS به معنای Cumulative Layout Shift نشان می‌دهد که در حین بارگذاری یک صفحه وب، تغییرات ناگهانی در چیدمان محتوا (Layout) اتفاق می‌افتد یا خیر. به طور عامیانه اگر بخواهیم این مفهوم را توضیح دهیم، به این معنی است که این معیار نشان دهنده این است که محتوای قابل نمایش از جمله تصاویر سایت، به هنگام نمایش، ثبات دارند یا چندین بار جابجا می شوند.

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

مقدار CLSاستاندارد و بهینه برای CLS کمتر از ۰.۱ است و در این صورت به عنوان یک امتیاز “خوب” شناخته می شود.

امتیاز بین ۰.۱ تا ۰.۱۵ به عنوان قابل قبول

بین ۰.۱۵ تا ۰.۲۵ امتیاز بد

بیشتر از ۰.۲۵ به عنوان وضعیت بسیار بد شناخته می شوند.

نحوه محاسبه امتیاز layout-shift

همانطور که در مقاله FCP چیست توضیح داده شد، برای هر کدام از این مفاهیم، معیارهای اندازه گیری وجود دارد و امتیاز Cumulative Layout Shift (CLS) برای یک صفحه وب به صورت یک امتیاز محاسبه می‌شود که نشان دهنده پایداری چیدمان صفحه در زمان بارگذاری است. برای محاسبه CLS، عوامل زیر در نظر گرفته می‌شوند:

  • Impact Fraction (IF): این عامل نشان می‌دهد که یک عنصر چقدر بر روی چیدمان صفحه تأثیر می‌گذارد. معمولاً این عدد بین ۰ تا ۱ است که نشان دهنده درصدی از تغییرات چیدمان است که توسط عنصر ایجاد می‌شود.
  • Distance Fraction (DF): این عامل نشان می‌دهد که عنصر به چه فاصله‌ای حرکت می‌کند. مانند IF، این نیز بین ۰ تا ۱ است و نشان دهنده نسبت فاصله‌ای است که تغییرات چیدمان تا آنجا اعمال می‌شود.

سپس CLS برای یک صفحه وب به صورت میانگین از این دو عامل برای یک بازه زمانی تا ۵ ثانیه محاسبه می‌شود. به عبارت دیگر، CLS میانگین مقادیر IF و DF برای تمام تغییرات چیدمانی است که در حین بارگذاری صفحه اتفاق می‌افتد.

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

امتیاز CLS بر اساس فرمول زیر محاسبه می‌شود:

امتیاز CLS = ضریب تأثیر x ضریب فاصله

روش های رفع خطای Cumulative Layout Shift

بهبود امتیاز Cumulative Layout Shift نیاز به تخصص دارد و توصیه می کنیم اگر در زمینه برنامه نویسی یا نکات فنی و تکنیکال، مهارت لازم را ندارید، از افراد متخصص در این حوزه کمک بگیرید. در ادامه به چند نکته و روش که موجب بهبود این معیار مهم در تجربه کاربری می شود، می پردازیم.

تعیین ویژگی‌ عرض، طول و ارتفاع در تصاویر و ویدئوهای سایت

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

استفاده از تبلیغات ثابت در صفحه

اگر در صفحه سایت از تبلیغات با انیمیشن استفاده می کنید توصیه می کنیم که تبلیغات را به صورت ثابت و بدون هیچگونه حرکت و انیمیشنی در سایت نمایش دهید. همینطور می توانید نظیر انچه که برای تصاویر گفته شد، برای تبلیغات هم یک فضا در نظر بگیرید و مرورگر به هنگام لود صفحه، این فضا را برای تبلیغات اختصاص دهد.

از CSS Transform Property استفاده کنید

انیمیشن‌ها می‌توانند تغییرات زیادی در چیدمان صفحه ایجاد کنند. تعیین طول و عرض برای تصاویر، گاهی اوقات ممکن است چاره کار نباشد و باید از ویژگی تبدیل CSS transform:translate استفاده کنید. ویژگی transform: translate در CSS برای جابجایی یک عنصر از مکان فعلی آن به یک مکان جدید استفاده می‌شود. این ویژگی جزء ویژگی‌های transform در CSS است که امکان انجام انواع تغییرات و تبدیلات (مثل چرخش، مقیاس‌دهی و جابجایی) بر روی عناصر HTML را فراهم می‌کند.

مدیریت تغییرات فونت برای بهبود امتیاز Cumulative Layout Shift

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

مرورگر فونت پیش فرض خود را به کاربر نمایش می دهد و پس از دانلود، فونت اصلی سایت، نمایش داده می شود که اصطلاحاً حالت Flash of Unstyled Text یا FOUT گفته می شود.

مشکل این روش این است که بعد از دانلود فونت اصلی سایت و تغییر به فونت اصلی، ممکن است جابجایی در محتوای صفحه (CLS)، رخ دهد.

حالت دوم هم حالتی است، که تا قبل از دانلود فونت اصلی سایت توسط مرورگر، به مخاطب و کاربر هیچ متنی داخل سایت نمایش داده نمی شود که به این حالت هم Flash of Invisible Text یا FOIT گفته می شود.

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

برای حل این مشکل اینکه از ویژگی font:display استفاده کنید تا از ایجاد حالت FOIT جلوگیری کنید. سپس از روش rel=”preload” کردن فونت در head سایت استفاده کنید.

				
					<link rel="preload"
      as="style"
      href="در اینجا باید آدرس فونت رو درج کنید"/>
				
			

استفاده از کدنویسی بهینه در سایت

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

دیدگاه‌ خود را بنویسید

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

آرتا رسانه
آرتا رسانه
دیجیتال مارکتینگ چیست؟
Loading
/
پیمایش به بالا