CLS یا Cumulative Layout Shift چیست؟
هنگامی که طراح Layout سایت را طراحی میکند، ممکن است برای Divها، Sectionها و قابهای صفحه، طول و عرض دقیقی مشخص نکرده باشد. در این صورت، ممکن است در هنگام لود صفحه به خاطر تغییر رزولوشن و زمان لود تصاویر، قابها جابهجا شوند و تجربه کاربری بدی ایجاد کنند.
LCP و CLS دو فاکتور بسیار مهم هستند که خطاهای مرتبط با آنها را در سرچ کنسول هم میبینید و با بهبود آنها تا حد بسیار زیادی پرفورمنس سایت را افزایش میدهید.
برای بهبود CLS چه کار کنیم؟
در تگ img برای تصاویر عرض و طول به پیکسل وارد کنید. در این صورت مرورگر با رسیدن به این تگ، آن فضا را برای تصویر رزرو نگه میدارد تا تصویر به طور کامل لود شود و و دیگر متنها و سایر المانها جابجا نمیشوند.
در نظر داشته باشید که، اگرچه اغلب اوقات تصاویر باعث بروز مشکل در CLS میشوند، اما کدهای جاوا اسکریپت هم میتوانند پیچیدگیهایی ایجاد کنند.