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

برخی از مقادیر موجب چیدمان مجدد، ترسیم اولیه و ترکیب‌هایی مانند box-shadow و box-sizing می‌شوند. این احتمال وجود دارد که تصاویر نسبت ابعاد متفاوتی داشته باشند و مرورگرها همچنان در حال ارزیابی بهترین راه حل موجود در چنین شرایطی هستند، از جمله این که آیا ابعاد باید بر روی تمامی منابع مشخص شوند یا خیر. به طور مشابه، موارد جدید اضافه شده به فهرست نیز قبلا در DOM حضور نداشتند، بنابراین موقعیت اولیه‌ی آن‌ها تغییر نکرده است. اما موقعیت مکانی مواردی با برچسب “Dog”، “Horse” و “Zebra” همگی تغییر کرده است. دکمه‌ی “Click Me” به قسمت پایین باکس خاکستری با متن مشکی ضمیمه شده است که باکس سبز رنگ با متن سفید را به سمت پایین هل می‌دهد (و قسمتی از آن از نمایشگر خارج می‌شود).

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

تنها استثنای این قانون زمانی است که برای بهبود تعامل با کاربر چنین کاری را انجام داده باشیم. بارگذاری محتوای پویا معمولاً بیش از 50 میلی ثانیه طول می‌کشد، در نتیجه روی تجربه کاربری بازدیدکنندگان تأثیر خوبی نخواهد داشت. ولی محتوای استاتیک خیلی زودتر لود می‌شود و تأثیری بر cls سایت نخواهد داشت. برای بهبود رتبه cls باید تغییر چیدمان صفحات وب در زمان بارگذاری سایت را به حداقل برسانیم. بخشی از فرآیند بهینه‌سازی cls سایت توسط نیاز به تغییر کدهای سایت دارد که توسط برنامه نویس انجام می‌شود. ولی 3 راهکار فوری وجود دارد که توسط متخصصین سئو نیز قابل انجام است و در ادامه به توضیح آنها می‌پردازیم.

با این کار، محتوای ضروری صفحه سریع‌تر رندر شده و تأخیر در نمایش کل صفحه کاهش می‌یابد. پیش‌بارگذاری محتوا به این معناست که فضای لازم برای عناصر اضافی مانند تبلیغات یا پاپ‌آپ‌ها از قبل در نظر گرفته می‌شود. این کار می‌تواند از جابجایی ناگهانی عناصر جلوگیری کند و ثبات بیشتری به صفحه ببخشد. ابزارهای طراحی وب مدرن مانند CSS Grid و Flexbox نیز می‌توانند در این زمینه مفید باشند. این فریم‌ورک‌ها به طراحان امکان می‌دهند تا با دقت بیشتری فضای مورد نیاز برای عناصر مختلف صفحه را مدیریت کنند و به طور مؤثرتری از پدیده جابجایی ناگهانی جلوگیری کنند. در ادامه این مقاله، ابتدا به تعریف دقیق‌تری از CLS می‌پردازیم، سپس به بررسی نحوه محاسبه آن و شناسایی عوامل مؤثر بر آن خواهیم پرداخت.

در صورتی که در صفحه از انیمیشن استفاده کردید با استفاده از کدنویسی برایش جایگاه مشخصی انتخاب کنید و کمترین حجم را برایش در نظر بگیرید. برای حل این مشکل در HTML صفحه باید کد مربوطه را وارد کنید که بهتر است این کار را یک متخصص سئو یا برنامه‌نویستان انجام دهد. الان باید فهمیده باشید که CLS چی هست و چه خطایی رو ایجاد میکنه و چطوری میشه حل کرد. شرکت ویرا آریان در سال ۱۴۰۰ با هدف فعالیت در حوزه خدمات طراحی وب فعالیت خود را آغاز کرده است و تا امروز توانسته است بهترین خدمات تخصصی را با بالاترین کیفیت در دسترس مشتریان قرار ‌دهد، با ما همراه باشید. هدف آژانس و آکادمی دی ام روم این است که با مشاوره و همراهی درست، بتوانید از تمام پتانسیل‌های فضای دیجیتال برای رشد و توسعه کسب و کار خود استفاده کنید. از سوی دیگر متخصصانی را آموزش دهیم که با نتایج ارزش‌ آفرین و قابل‌ تحسین، فضای قابل اعتمادتری در اکوسیستم دیجیتال ایران خلق کنند.

برای این کار ابتدا Chrome Development Tools را باز کنید و به تب Network بروید. در این بخش باید به صورت دستی و برای تست، سرعت سایت را کاهش دهیم تا آن را با سرعت کمتر آزمایش کنیم. همچنبن برای موفقیت در سئو و کاهش زمان لود صفحات سایت پیشنهاد میکنیم، tbt چیست را بخوانید و رابطه tbt را با cls درک کنید. در اخر پیشنهاد میشه برای بهتر نتیجه گرفتن از یک متخصص سئو یا هر کسی که بهش اعتماد دارید و دانش داره کمک بگیرید. ما طبق تجربه ای که در خدمات سرعت سایت در میزفا داشتیم متوجه شدیم که خیلی از سایت‌ها  مورد بالا رو رعایت نمیکنن.

فرض کنید وقتی مشغول خواندن یک مقاله هستید، تمامی المان‌ها یک‌دفعه حرکت کنند و جمله‌ای که مشغول خواندن آن بودید را گم کرده و مجبور شوید برای پیدا کردن آن کل متن را جستجو کنید. این یک اتفاق بسیار معمول در وب است؛ فرقی نمی‌کند که مشغول خواندن اخبار هستید یا قصد کلیک کردن بر روی دکمه‌های «Search» یا «Add to Cart» را دارید. برای اندازه‌گیری CLS، می‌توانید از ابزارهای مختلفی مانند Google PageSpeed Insights، Google Lighthouse و Chrome DevTools استفاده کنید. این ابزارها اطلاعات دقیقی درباره نحوه بارگذاری صفحه و میزان تغییرات ناگهانی چیدمان ارائه می‌دهند. امتیاز CLS به صورت عددی بین 0 تا 1 بیان می‌شود، و امتیاز کمتر از 0.1 به عنوان خوب در نظر گرفته می‌شود.

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

در این مطلب قصد داریم در مورد این معیار صحبت کنیم و راهکارهایی برای بهبود cls بیان کنیم تا پایان با ما همراه باشید. زمانی که یک فونت وب بارگذاری می‌شود، ممکن است متن‌هایی که قبلاً با فونت پیش‌فرض نمایش داده شده‌اند، تغییر اندازه یا شکل دهند. این تغییر می‌تواند منجر به جابجایی ناگهانی سایر عناصر صفحه شود، که در نهایت CLS را افزایش می‌دهد. همچنین، ارزیابی مداوم عملکرد صفحه وب و نحوه بارگذاری محتوا برای شناسایی و رفع مشکلات احتمالی در CLS ضروری است. استفاده از ابزارهای تست و نظارت می‌تواند به توسعه‌دهندگان کمک کند تا بهینه‌سازی‌های لازم را انجام دهند.

CLS یا Cumulative Layout Shift به تغییرات ناگهانی و غیرمنتظره چیدمان عناصر در صفحه وب گفته می‌شود که هنگام بارگذاری سایت رخ می‌دهد. این تغییرات می‌توانند تجربه کاربری را مختل کرده و تأثیر منفی بر تعامل کاربران با سایت بگذارند. در طراحی حرفه‌ای سایت، به‌ویژه طراحی سایت ویدئو که دارای محتوای پویا و متحرک است، توجه به CLS اهمیت بیشتری پیدا می‌کند. مشکلاتی مانند عدم تنظیم صحیح ابعاد تصاویر و ویدئوها یا نمایش تبلیغات بدون تخصیص فضای مشخص می‌توانند امتیاز CLS سایت شما را کاهش دهند. اگر می‌خواهید بدانید مقدار CLS سایت شما چیست، می‌توانید از ابزارهای تحلیلی مانند PageSpeed Insights یا Lighthouse برای اندازه‌گیری این معیار استفاده کنید. یک طراحی سایت اصولی و استاندارد که توسط متخصصان حرفه‌ای انجام شود، می‌تواند مشکلات مرتبط با CLS را به حداقل رسانده و تجربه کاربری را بهبود دهد.

در این مقاله خواهید آموخت که چگونه مشکلات CLS را به حداقل برسانید تا تجربه کاربری بهتر شود. Cumulative Layout Shift یا CLS یکی از فاکتورهای Core Web Vitals گوگل بوده که تجربه کاربری را ارزیابی می کند، به همین دلیل درک ماهیت و بهینه‌ سازی آن بسیار مهم می باشد. مجموع جابجایی‌های عناصر صفحه، میزان Cumulative Layout Shift رو مشخص می‌کنه که هرچقدر کمتر باشه، صفحه ما پایدارتر و UX بهتر خواهد بود. جابجایی محتواها گاهی اوقات به دلیل تبلیغات موجود در صفحه هست که ناگهان بالای صفحه ظاهر میشه و باعث جابجایی سایر محتواهای صفحه به سمت پایین میشه. ما قبلا در میزفا درباره خطای مهم Specify Image Dimensions صحبت کرده بودیم، مشخص کردن ابعاد عکس و ویدئوها می‌تونه به مرورگر کاربر بسیار کمک کنه تا جایگاه و اندازه هر المان رو به خوبی تشخیص بده. گاهی اوقات پیش آمده است که در حین مطالعه یک مطلب به ناگهان به بالای صفحه پرش می‌کنیم، این اتفاق به علت وجود محتوای پویا در صفحه است که بر اساس سابقه جستجو، علایق و رفتار شما شخصی سازی شده است و برایتان نمایش داده می شود.

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

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

یکی از روش‌های مهم برای کاهش تأثیر اسکریپت‌ها بر CLS، استفاده از خصوصیات async و defer در تگ‌های اسکریپت است. Async برای اسکریپت‌هایی که ترتیب اجرای آن‌ها اهمیت ندارد مناسب است و اجازه می‌دهد صفحه وب در حالی که اسکریپت در پس‌زمینه بارگذاری می‌شود، رندر شود. Defer، از سوی دیگر، تا زمانی که تمام محتوای صفحه بارگذاری نشده باشد، اجرای اسکریپت‌ها را به تأخیر می‌اندازد. اسکریپت‌ها و استایل‌ها می‌توانند به طور قابل توجهی بر طراحی و عملکرد صفحه وب تأثیر بگذارند. اسکریپت‌هایی که دیر بارگذاری می‌شوند یا به ناگهان اجرا می‌شوند، می‌توانند منجر به جابجایی‌های ناگهانی در عناصر صفحه شوند. به همین ترتیب، استایل‌هایی که دیر اعمال می‌شوند، می‌توانند منجر به تغییرات بصری ناخواسته در صفحه شوند.

یکی از راه‌ های کاهش جابجایی المان های صفحه، تنظیم min-height (حداقل ارتفاع) درون تگ div والد در CSS می باشد. قبل از بارگذاری پست، نمی‌توان ارتفاع دقیق محتوای تزریق شده را دقیقا پیش‌بینی کرد، به کمک این روش می‌ توانید فضای لازم را به محتوای مربوطه تخصیص دهید. تغییر layout صفحه Layout Shift نام دارد و از نظر اصول سئو لازم است که به آن توجه ویژه داشت. ورودی‌های layout-shift هر بار که تصویری درون محدوده دید، موقعیت اولیه خود را بین دو فریم تغییر می‌دهد، گزارش می‌کنند. این نوع از عناصر به عنوان عناصر ناپایدار در نظر گرفته می‌شوند.بهتر است به این نکته توجه داشته باشید که layout-shift‌ها فقط زمانی اتفاق می‌افتند که عناصر موجود، موقعیت اولیه خود را تغییر دهند.

در حقیقت CLS یک عامل رتبه‌بندی است و هرچه کاربر زمان کمتری در صفحه شما بماند امتیاز پایین‌تری به صفحه تعلق می‌گیرد. به طور مثال کاربری که ندانسته یک خرید اشتباه از سایت شما دارد یا کاربری که می‌داند و باعث مزاحمت‌هایی بر روی صفحه شما و بالا رفتن عدد CLS می‌شود. تا به اینجا، متوجه شدید که خطای خطای avoid large layout shifts چیست و چگونه عناصری را که در وب سایت خود که در حال تغییر هستند شناسایی کنید. اما هنوز نمی‌دانید که چطور باید ارور large layout shifts را رفع کرد. ما روش‌های زیر را برای رفع خطای large Layout Shifts، پیشنهاد می‌کنیم.

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

چون قرار است به شما بگوییم که cls چیست، چه تأثیری در سئو  و تجربه کاربری دارد و با چه ابزارهایی اندازه گیری می‌شود. همچنین با راهکارهایی آشنا می‌شوید که در بهبود امتیاز CLS سایت و عبور از فیلتر Core Web Vitals به شما کمک خواهند کرد. با استفاده از این راهکارها، شما می‌ توانید خطای “avoid large layout shifts” را رفع کرده و تجربه کاربری بهتری را برای بازدیدکنندگان صفحه خود ایجاد کنید. بر خلاف دیگر پارامترها که روی بارگذاری سریع یک صفحه تمرکز دارند، این معیار به تجربه کاربر و تعاملی که با یک سایت دارد می‌پردازد. در حقیقت CLS به جا به جایی‌های ناگهانی گفته می‌شود که در هنگام لود شدن ناگهانی یک صفحه رخ می‌دهد.

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

همه می‌دانیم هنگامی که یک محتوا ناگهانی و غیرمنتظره در سایت تغییر کند، باعث ناراحتی کاربر می‌شود و بلافاصله از سایت خارج می شود که مدت ماندگاری کاربر در سایت کم می‌شود. نتیجه این اتفاق این است که زمان ماندگاری کاربران کاهش پیدا می‌کند و نرخ پرش سایت افزایش پیدا می‌کند. بنابراین؛ می‌توانیم نتیجه بگیریم معیار cls روی سئو سایت و رتبه بندی آن بسیار تاثیرگذار است. یکی از نمونه‌های این خطا افزودن عناصر بصری بدون مقیاس‌بندی مناسب هست. همچنین گاهی یک تبلیغ با حجم بالا در بالای صفحه باعث تغییر مکان متن میشه.

تصاویر تست اغلب در کَش مرورگر توسعه‌دهنده وجود دارند و تماس‌ها با API به صورت محلی اجرا می‌شوند و اغلب به اندازه‌ای سریع هستند که می‌توان تاخیر آن‌ها را ناچیز در نظر گرفت. در این راهنما، ما بهینه‌سازی دلایل معمول تغییر چیدمان را بررسی خواهیم کرد. بله، در صورتی که از جاوا اسکریپتی استفاده شود که باعث ایجاد تغییر در layout صفحه و یا re-layout شود، روی امتیاز CLS تاثیر می گذارد. در نمونه سوم، پس از اینکه نام تعدادی حیوان از سرور خوانده شد، در بین محتوای کنونی صفحه وارد شده که باعث سه layout shift در صفحه شده است. برای اینکه در خصوص بهینه کردن صفحات در راستای کاهش layout shift اقدام کنیم، لازم است که ابتدا درک بهتری از CLS و نحوه محاسبه آن داشته باشیم.

ذخیره نام، ایمیل و وبسایت من در این مرورگر برای دفعه‌ی دیگری که دیدگاهی می‌نویسم. اگر قصد داشتن انیمیشن در صفحه را دارید، مطمئن باشید که در هنگام انیمیت شدن یک المان در صفحه، layout shift یا re-layout اتفاق نیفتد. به عنوان نمونه box-shadow و box-sizing می تواند باعث re-layout شود ولی CSS property هایی مانند transform می تواند جهت translate، rotate، scale و skew استفاده شوند و باعث re-layout و layout shift نیز نشوند. مرورگرهای مطرح مانند همه مرورگرهای بر پایه Chromium و مرورگر سافاری (به جز مرورگر فایرفاکس) صرف نظر از تعریف aspect ratio توسط کاربر، به صورت مستقل aspect ratio تصاویر را محاسبه می کنند. معیار distance fraction به میزان جابجایی المان در viewport نسبت به خود viewport اطلاق می شود. به عبارت دیگر، distance fraction بزرگترین جابجایی المان (افقی یا عمودی) تقسیم بر بزرگترین ضلع viewport (عرض یا ارتفاع) گفته می شود.

به همین دلیل، استفاده از ابزارهای گوگل برای شناسایی مشکلات این معیار ضروری است. یکی از ابزارهای مورد استفاده در این زمینه، دستور CLS در PageSpeed Insights است که به شما امکان می‌دهد امتیاز CLS صفحات سایت خود را بررسی و تحلیل کنید. برای کاهش تأثیر CLS بر سئو و بهبود تجربه کاربران، باید به عناصر بصری سایت مانند تصاویر، تبلیغات و ویدئوها توجه ویژه‌ای داشته باشید. خدمات حرفه‌ای ارائه‌شده توسط آژانس دیجیتال مارکتینگ DM House به شما کمک می‌کند تا با بهینه‌سازی چیدمان صفحه و رعایت استانداردهای CLS، سایت خود را در بهترین حالت ممکن برای کاربران و موتورهای جستجو قرار دهید. CLS یا Cumulative Layout Shift یکی از معیارهای کلیدی گوگل در ارزیابی تجربه کاربری است که تغییرات ناگهانی چیدمان صفحه را اندازه‌گیری می‌کند.

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

محتوای اصلی صفحه نباید به دلیل تاخیر در بارگذاری تصاویر و ویدیوها به هم ریخته شود. استفاده از روش‌هایی مانند Lazy Loading یا بارگذاری گام‌به‌گام می‌تواند یکی از راهکارهای بهبود CLS باشد. خوشبختانه ابزارهایی برای اندازه‌گیری و اشکال‌زدایی تغییر چیدمان تجمعی (CLS) موجود هستند. اگر مجبور به نمایش این نوع از قابلیت‌های UI هستید، از قبل فضای کافی را در نمایشگر کنار بگذارید (به عنوان مثال، با استفاده از یک placeholder یا مکان ‌یاب) تا هنگام بارگذاری موجب تغییر و جابه‌جایی محتوا در صفحه نشود. در مثال بالا، تمامی ورودی‌های تغییر چیدمان که پرچم hadRecentInput آن‌ها روی اشتباه تنظیم شده است، برای تعیین مقدار CLS با هم جمع شده‌اند.