Cumulative Layout Shift چیست؟

یک قسمت بزرگ از 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="در اینجا باید آدرس فونت رو درج کنید"/>