چگونه خطای CLS یا Cumulative Layout Shift را رفع و زمان آن را کاهش دهیم؟‎

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

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

ویدئو زیر یک نمایشگر را نشان می دهد که چگونه بی ثباتی طرح می تواند بر کاربران تاثیر منفی بگذارد.

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

چه عواملی باعث Cumulative Layout Shift می شود؟

چند عنصر اغلب باعث تغییر طرح غیر منتظره می شوند و نمره CLS شما را بد می کنند از جمله:

• تصاویر و فیلم با اندازه های مشخص نشده
• تبلیغات پویا
• جاسازی های سنگین
• فونت های وب

حالا که فهمیدید چه عواملی باعث Cumulative Layout Shift می شود در ادامه نحوه رفع خطای CLS را خواهیم گفت.

نحوه رفع خطای CLS چگونه است؟

اکنون می دانیم که چه عواملی باعث ایجاد خطای CLS می شوند و می توانیم بهترین روش ها را برای رفع خطای CLS اعمال کنیم.

اضافه کردن ویژگی عرض و ارتفاع به تصاویر و فیلم ها

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

<img Src="thelink" width="400px"
height="300px">

هرگز محتوایی را روی محتوای موجود قرار ندهید

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

انیمیشن ها را غیر فعال کنید

انیمیشن های متحرک را به انیمیشن هایی که تغییرات چیدمان ایجاد می کنند، ترجیح دهید. انتقال را به نحوی انیمیشن کنید که پس زمینه و پیوستگی را از حالتی به حالت دیگر فراهم کند.

فونت های وب را از قبل بارگیری کنید 

ابتدا می توانید با استفاده از Font Loading API، زمان بارگیری فونت های وب را کاهش دهید. در صورت طولانی شدن، می توانید از ابزار نمایش فونت برای تغییر فونت های سفارشی رندر به مقادیری مانند خودکار، تعویض، مسدود کردن، برگشت و اختیاری استفاده کنید.

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

امیدوارم مقاله نحوه رفع خطای CLS برایتان مفید باشد. موفق و پیروز باشید.

منبع: marfeel - paulhoda