CLS چیست؟ (Cumulative Layout Shift) چیست و چگونه آن را رفع کنیم؟

CLS یا Cumulative Layout Shift میزان جابجایی غیرمنتظره عناصر در صفحه هنگام بارگذاری را اندازه‌گیری می‌کند. برای رفع آن باید اندازه تصاویر و تبلیغات ثابت باشد، از ویژگی font-display: swap برای فونت‌ها استفاده کنید، فضای تبلیغات را از قبل رزرو کنید و استایل‌ها را قبل از اسکریپت‌ها بارگذاری کنید.

این مقاله برای جامعیت بیشتر مطابق با آخرین بروزرسانی‌های Core Web Vitals بروزرسانی شده است.

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

خوشبختانه از زمان معرفی Core Web Vitals گوگل در سال ۲۰۲۱، صاحبان سایت انگیزه پیدا کردند تا تعاملات واقعی کاربران با سایت را بررسی و مسیر خرید آن‌ها را بهبود دهند.

CLS چیست؟

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

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

بهینه‌سازی CLS باعث می‌شود کاربران بدون مزاحمت‌های ناگهانی، محتوای صفحه را مشاهده کنند و نرخ تعامل سایت افزایش یابد. ابزارهای اندازه‌گیری CLS، مانند Google PageSpeed Insights و Chrome DevTools، این امکان را فراهم می‌کنند تا امتیاز CLS را بسنجید و نقاط مشکل‌دار را اصلاح کنید.

جابجایی طرح‌بندی چیست؟

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

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

توسعه‌دهندگان و طراحان وب باید از تکنیک‌هایی مثل رزرو فضای کافی برای تصاویر و تبلیغات، بارگذاری فونت‌ها به صورت پیش‌بارگذاری شده، و استفاده از CSS Transitions به جای Animationهای سنگین استفاده کنند. این کارها باعث کاهش جابجایی‌های ناگهانی و بهبود تجربه کاربری می‌شود و در نهایت امتیاز CLS سایت را بهبود می‌بخشد.

امتیاز CLS خوب چیست؟

یک امتیاز CLS خوب معمولاً کمتر از 0.1 است و نشان می‌دهد که عناصر صفحه به‌طور کلی پایدار و ثابت هستند. امتیاز بین 0.1 تا 0.25 نیاز به بهبود دارد و هر عدد بالاتر از 0.25 نشان‌دهنده مشکلات قابل توجهی در تجربه کاربری است. این مقادیر برای توسعه‌دهندگان وب یک شاخص روشن فراهم می‌کنند تا میزان جابجایی‌های غیرمنتظره را بسنجند و اقدام به اصلاح آن‌ها کنند.

یک امتیاز CLS پایین به معنای تجربه مرور روان، کاهش کلیک‌های اشتباه و افزایش رضایت کاربران است. سایت‌های فروشگاهی، خدماتی و خبری که CLS بالایی دارند، ممکن است نرخ پرش بالاتر و تعامل کمتر داشته باشند، که در نهایت بر عملکرد کلی سایت و رتبه‌بندی  سئو تاثیر می‌گذارد. بنابراین، هدف اصلی، رسیدن به CLS کمتر از 0.1 است.

ابزارهایی مثل Google PageSpeed Insights این امکان را می‌دهند که CLS صفحه را به تفکیک بخش‌ها و عناصر بررسی کنید و مشکلات را با جزئیات مشاهده کنید. همچنین بررسی CLS در دستگاه‌ها و اندازه‌های مختلف صفحه نمایش، به شناسایی جابجایی‌های بالقوه کمک می‌کند.

نحوه محاسبه CLS

شاخص CLS بر اساس میزان جابجایی عناصر ناپایدار در صفحه وب محاسبه می‌شود. این محاسبه به کمک دو فاکتور اصلی انجام می‌گیرد: Impact Fraction و Distance Fraction. ترکیب این دو معیار نشان می‌دهد یک عنصر چه مقدار از فضای صفحه را جابجا کرده و تا چه فاصله‌ای حرکت کرده است.

• ۱. Impact Fraction (ضریب تأثیر):

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

  مثال: اگر یک تصویر ۲۰٪ از فضای صفحه را اشغال کند و در هنگام بارگذاری جابجا شود، مقدار Impact Fraction برابر با ۰.۲ خواهد بود.

• ۲. Distance Fraction (ضریب فاصله):

  این معیار بیشترین فاصله‌ای را که یک عنصر جابجا شده، نسبت به بزرگ‌ترین بُعد ویوپورت (عرض یا ارتفاع) نشان می‌دهد. در حقیقت، اگر یک عنصر مقدار زیادی جابجا شود، ضریب فاصله نیز افزایش می‌یابد.

  مثال: اگر یک دکمه به اندازه ۱۰٪ از ارتفاع صفحه حرکت کند، مقدار Distance Fraction برابر با ۰.۱ خواهد بود.

فرمول کلی محاسبه CLS:

Layout Shift Score = Impact Fraction × Distance Fraction

به بیان ساده، هرچه عناصر بیشتری جابجا شوند و هرچه این جابجایی‌ها در فاصله بیشتری نسبت به ویوپورت رخ دهد، نمره CLS بالاتر خواهد بود. برای داشتن تجربه کاربری خوب، این عدد باید کمتر از ۰.۱ باقی بماند.

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

محاسبه CLS همچنین می‌تواند در محیط آزمایشگاهی (Lab Data) یا داده‌های واقعی کاربران (Field Data) انجام شود. داده‌های واقعی کاربران نشان می‌دهند که چگونه افراد مختلف با سرعت اینترنت و دستگاه‌های مختلف با صفحه تعامل دارند، در حالی که داده‌های آزمایشگاهی امکان شناسایی مشکلات فنی دقیق‌تر را فراهم می‌کنند.

دلایل رایج مشکلات CLS

جابجایی ناگهانی عناصر در صفحات وب معمولاً به دلیل نبود پیش‌بینی درست در طراحی و بارگذاری منابع اتفاق می‌افتد. برخی از رایج‌ترین دلایل CLS بالا عبارتند از:

• ۱. تصاویر بدون ابعاد مشخص:

  وقتی تصاویر در صفحه قرار می‌گیرند ولی width و height برای آن‌ها تعریف نشده باشد، مرورگر فضای لازم را از قبل رزرو نمی‌کند. به همین دلیل هنگام بارگذاری تصویر، سایر عناصر صفحه جابجا می‌شوند.

• ۲. تبلیغات، iFrame یا Embed بدون اندازه ثابت:

  بنرهای تبلیغاتی یا محتواهای درج‌شده مانند ویدئوها و iframeها اگر ابعاد مشخص نداشته باشند، با بارگذاری دیرهنگام باعث جابجایی متن و سایر بخش‌ها می‌شوند. این مشکل در سایت‌های خبری و فروشگاهی بسیار رایج است.

• ۳. محتوای پویا (Dynamic Content):

  استفاده از پاپ‌آپ‌ها، آکاردئون‌ها یا عناصر تعاملی که بدون رزرو فضا در صفحه ظاهر می‌شوند، یکی از دلایل اصلی افزایش CLS است. این عناصر معمولاً باعث حرکت ناگهانی محتوای اصلی صفحه می‌شوند.

• ۴. فونت‌های وب و بارگذاری آن‌ها:

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

• ۵. اسکریپت‌های شخص ثالث:

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

• ۶. انیمیشن‌ها و ترنزیشن‌های CSS:

  استفاده نادرست از انیمیشن‌هایی که باعث تغییر ابعاد یا موقعیت عناصر می‌شوند (مانند تغییر height یا margin) CLS را افزایش می‌دهد. در مقابل، استفاده از transform و opacity تغییرات نرم‌تری ایجاد می‌کند و CLS را کاهش می‌دهد.

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

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

راه‌های شناسایی مشکلات CLS

شناسایی مشکلات CLS اولین قدم برای بهبود تجربه کاربری و افزایش ثبات صفحات وب است. برای این کار می‌توان از ابزارهای مرورگر و سرویس‌های آنلاین استفاده کرد:

• ۱. استفاده از Chrome DevTools:

  با باز کردن DevTools در مرورگر کروم و رفتن به بخش Performance، می‌توانید جابجایی عناصر صفحه را مشاهده کنید. هنگام ثبت عملکرد، جعبه‌های قرمز رنگ نشان‌دهنده مناطقی هستند که تغییر مکان داده‌اند و امتیاز CLS برای هر جابجایی مشخص می‌شود. این روش به شما امکان می‌دهد عناصر مشکل‌دار را شناسایی و بررسی دقیق انجام دهید.

• ۲. استفاده از Google PageSpeed Insights:

  در گزارش Google PSI، بخش‌های Opportunities و Diagnostics شامل هشدارهایی مرتبط با CLS هستند. این هشدارها مواردی مانند تصاویر بدون ابعاد مشخص، منابع مسدودکننده رندر، و تبلیغات پویا را نشان می‌دهند و به شما کمک می‌کنند نقاطی که باعث جابجایی ناگهانی شده‌اند را شناسایی کنید.

• ۳. بررسی داده‌های واقعی کاربران (Field Data):

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

• ۴. استفاده از PerformanceObserver API در جاوااسکریپت:

  این API امکان پایش CLS به صورت لحظه‌ای را فراهم می‌کند. می‌توانید جابجایی‌ها را در زمان واقعی رصد کرده و اطلاعاتی مانند Impact Fraction و زمان رخداد را جمع‌آوری کنید. این روش مخصوصاً برای صفحات پویا یا SPAها کاربرد دارد و به تحلیل دقیق‌تر مشکلات CLS کمک می‌کند.

• ۵. ترکیب داده‌های آزمایشگاهی (Lab Data) و واقعی (Field Data):

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

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

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

۵ روش برای بهبود CLS

بهینه‌سازی CLS باعث کاهش جابجایی ناگهانی عناصر صفحه و افزایش پایداری تجربه کاربری می‌شود. در ادامه ۵ روش اصلی برای بهبود CLS آورده شده است:

• ۱. مشخص کردن ابعاد تصاویر:

  با تعیین width و height برای تگ img و همچنین استفاده از CSS برای کنترل ابعاد، مرورگر می‌تواند فضای لازم برای تصاویر را از قبل رزرو کند. این کار باعث می‌شود هنگام بارگذاری تصاویر، عناصر دیگر صفحه جابجا نشوند.

• ۲. پیش‌بارگذاری فونت‌ها:

  با استفاده از link rel="preload" برای فونت‌های مهم و ویژگی font-display: swap می‌توان از تغییر ناگهانی متن هنگام اعمال فونت اصلی جلوگیری کرد. همچنین تعیین فونت‌های fallback مشابه باعث کاهش جابجایی متن می‌شود.

• ۳. رزرو فضا برای تبلیغات و محتوای پویا:

  برای تبلیغات و محتواهایی که دیرتر بارگذاری می‌شوند، با تعیین placeholder و ابعاد ثابت یا استفاده از ویژگی aspect-ratio، فضای لازم رزرو می‌شود تا محتواهای دیگر جابجا نشوند. این روش به ویژه در سایت‌های فروشگاهی و خبری اهمیت دارد.

• ۴. استفاده از CSS Transitions به جای Animationهای سنگین:

  انیمیشن‌هایی که باعث تغییر اندازه یا موقعیت عناصر می‌شوند، می‌توانند CLS را افزایش دهند. استفاده از transform و CSS Transitions به جای Animationهای سنگین، جابجایی عناصر را به حداقل می‌رساند و عملکرد صفحه را بهبود می‌بخشد.

• ۵. بهره‌گیری از bfcache (Back/Forward Cache):

  کش صفحات در مرورگر باعث می‌شود در هنگام بازگشت به صفحه، محتوا بدون رندر مجدد و جابجایی عناصر نمایش داده شود. این ویژگی مخصوصاً برای کاربرانی که بین صفحات سایت رفت و برگشت می‌کنند مفید است و CLS را کاهش می‌دهد. دقت کنید برخی صفحات به دلیل اسکریپت‌های پیچیده یا محتوای شخصی‌سازی شده ممکن است از bfcache محروم باشند.

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

نکات دیگر برای عبور از Core Web Vitals

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

سوالات متداول

ابزارهای مناسب برای بررسی CLS کدام‌اند؟

برای بررسی CLS می‌توانید از ابزارهای Google PageSpeed Insights برای داده‌های واقعی کاربران و Chrome DevTools برای آنالیز دقیق‌تر جابجایی عناصر استفاده کنید. همچنین با استفاده از PerformanceObserver API در جاوااسکریپت می‌توان CLS را به صورت دینامیک و لحظه‌ای اندازه‌گیری کرد.

آیا CLS فقط در زمان بارگذاری صفحه محاسبه می‌شود؟

خیر. CLS تغییرات غیرمنتظره عناصر را در طول بارگذاری و همچنین پس از تعامل کاربر (مثل کلیک و اسکرول) در کمتر از ۵۰۰ میلی‌ثانیه نیز محاسبه می‌کند و این موارد می‌توانند بر امتیاز CLS تاثیرگذار باشند.

چگونه می‌توانم CLS سایت خود را کاهش دهم؟

برای کاهش CLS باید ابعاد تصاویر و تبلیغات مشخص باشند، فونت‌ها با font-display: swap بارگذاری شوند، فضای تبلیغات رزرو شود، از CSS Transitions به جای انیمیشن‌های سنگین استفاده کنید و از bfcache برای کش صفحات بهره ببرید.