CLS چیست و چگونه از جابه‌جایی چیدمان جلوگیری کنیم؟

این مطلب نسخه خلاصه‌شده‌ای از یکی از راهنماهای تخصصی وبتیک است.

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

این اتفاق‌ها نمونه هایی از Layout Shift هستند؛ یعنی تغییر ناگهانی موقعیت عناصر قابل‌مشاهده صفحه بدون اینکه کاربر انتظار آن را داشته باشد.

CLS یا Cumulative Layout Shift یکی از معیارهای Core Web Vitals است که پایداری بصری صفحه را اندازه گیری می‌کند و نشان می‌دهد کاربران تا چه اندازه با جابه‌جایی غیرمنتظره عناصر مواجه می‌شوند.

CLS در کنار LCP و INP یکی از سه معیار اصلی Core Web Vitals است. LCP بیشتر به سرعت نمایش محتوای اصلی مربوط می‌شود، INP پاسخ‌گویی صفحه به تعاملات را می‌سنجد و CLS روی ثبات بصری یا ثبات بصری تمرکز دارد.

در این مقاله می‌بینیم CLS دقیقاً چگونه محاسبه می‌شود، چه عددی برای آن مناسب است، چه عواملی باعث جابه‌جایی چیدمان می‌شوند و چگونه می‌توان علت CLS ضعیف را پیدا و برطرف کرد.

CLS چیست؟

CLS مخفف Cumulative Layout Shift است و میزان جابه‌جایی غیرمنتظره عناصر قابل‌مشاهده صفحه را اندازه گیری می‌کند.

هر تغییر موقعیتی در صفحه الزاماً تجربه بدی ایجاد نمی‌کند. اگر کاربر روی یک Accordion کلیک کند و بخش جدیدی باز شود، تغییر چیدمان برای او قابل انتظار است. اما اگر بدون هیچ اقدامی از طرف کاربر یک تبلیغ، تصویر یا بنر وارد صفحه شود و محتوایی را که کاربر در حال مشاهده آن است جابه جا کند، با یک Layout Shift مشکل ساز روبه‌رو هستیم.

برخلاف LCP و INP، مقدار CLS برحسب ثانیه یا میلی ثانیه نیست. CLS یک عدد بدون واحد است که براساس میزان فضای جابه جا شده و فاصله‌ای که عناصر حرکت کرده اند محاسبه می‌شود.

آیا هر جابه‌جایی صفحه روی CLS اثر دارد؟

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

تبلیغات، Embedها و iframeهای بدون فضای رزروشده

فرض کنید وسط یک مقاله جایگاهی برای تبلیغ وجود دارد، اما ارتفاع آن تا زمان دریافت تبلیغ صفر است. وقتی Ad Network تبلیغ ۲۵۰ پیکسلی را Load می‌کند، ناگهان تمام محتوای پایین صفحه جابه جا می‌شود.

PageSpeed Insights

اگر Field CLS بالا ولی نتیجه Lab پایین باشد، احتمال دارد جابه‌جایی بعد از Load اولیه اتفاق بیفتد؛ برای مثال هنگام Scroll، نمایش تبلیغ یا بارگذاری یک Component دیرهنگام.

Lighthouse

بنابراین کم بودن CLS در Lighthouse لزوماً به این معنی نیست که CLS واقعی کاربران هم پایین است. ابزارهای Field و Lab باید مکمل یکدیگر باشند.

تفاوت CLS با LCP و INP چیست؟

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

آیا CLS روی SEO تأثیر دارد؟

CLS یکی از Core Web Vitals است و Google اعلام کرده سیستم‌های Ranking از Core Web Vitals استفاده می‌کنند. با این حال، داشتن CLS خوب تضمین نمی‌کند یک صفحه رتبه بالاتری بگیرد. Google صراحتاً می‌گوید داشتن نتایج خوب در گزارش هایی مانند Core Web Vitals به‌معنی تضمین حضور در رتبه‌های بالای Search نیست.

جمع بندی

CLS یا Cumulative Layout Shift معیار ثبات بصری صفحه است و نشان می‌دهد کاربران با چه میزان جابه‌جایی غیرمنتظره در محتوای قابل‌مشاهده روبه‌رو می‌شوند.

مطالعه نسخه کامل

برای مطالعه توضیحات کامل، مثال‌ها و جزئیات بیشتر، CLS چیست و چگونه از جابه‌جایی چیدمان جلوگیری کنیم؟ را در وبتیک بخوانید.