CLS چیست و چرا عناصر سایت هنگام بارگذاری جابه‌جا می‌شوند؟

CLS چیست؟

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

هدف CLS بررسی ثبات بصری صفحه است. صفحه‌ای که عناصر آن بدون انتظار کاربر جابه‌جا نمی‌شوند، تجربه کاربری بهتری ایجاد می‌کند.

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

Layout Shift چیست؟

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

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

این نوع جابه‌جایی ناگهانی همان مشکلی است که CLS تلاش می‌کند آن را اندازه‌گیری کند.

چرا عناصر سایت هنگام بارگذاری جابه‌جا می‌شوند؟

دلایل مختلفی می‌توانند باعث Layout Shift شوند. برخی از رایج‌ترین آنها عبارت‌اند از:

• تصاویر بدون ابعاد مشخص
• ویدئوهای بدون فضای رزروشده
• تبلیغات و محتوای Dynamic
• بارگذاری دیرهنگام فونت‌ها
• افزودن محتوای جدید به بالای صفحه
• تغییر اندازه عناصر با JavaScript
• استفاده نادرست از iframe
• انیمیشن‌هایی که باعث تغییر Layout می‌شوند
• بارگذاری تدریجی برخی اجزای رابط کاربری

۱. تصاویر بدون width و height

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

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

برای جلوگیری از این مشکل بهتر است ابعاد تصویر مشخص باشد تا مرورگر بتواند فضای موردنیاز را از ابتدا در Layout رزرو کند.

<img src="image.webp" width="800" height="450" alt="توضیح تصویر">

استفاده از نسبت ابعاد مناسب نیز اهمیت دارد؛ مخصوصاً زمانی که تصویر به شکل Responsive در اندازه‌های مختلف نمایش داده می‌شود.

۲. تبلیغات می‌توانند باعث CLS شوند

تبلیغات یکی دیگر از منابع رایج Layout Shift هستند. اگر فضای تبلیغ قبل از بارگذاری آن رزرو نشده باشد، پس از دریافت تبلیغ ممکن است ارتفاع صفحه تغییر کند.

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

راهکار

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

۳. فونت‌ها و مشکل Flash of Unstyled Text

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

اگر تغییر اندازه متن باعث تغییر ابعاد بخش‌های مختلف صفحه شود، می‌تواند به جابه‌جایی Layout منجر شود.

برای کاهش این مشکل باید نحوه بارگذاری فونت‌ها و انتخاب فونت جایگزین را با دقت طراحی و آزمایش کرد.

۴. محتوای Dynamic و بارگذاری Ajax

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

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

راهکار مناسب این است که فضای موردنیاز برای محتوای Dynamic از قبل در نظر گرفته شود یا محتوای جدید در محلی نمایش داده شود که باعث جابه‌جایی محتوای موجود نشود.

۵. iframeها و Embedها

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

بهتر است برای iframeها نسبت ابعاد یا فضای مشخصی در Layout تعیین شود تا مرورگر بتواند قبل از دریافت محتوای خارجی، فضای لازم را رزرو کند.

۶. JavaScript و تغییر ناگهانی Layout

JavaScript می‌تواند عناصر صفحه را ایجاد، حذف یا تغییر دهد. اگر این تغییرات بعد از نمایش اولیه صفحه و بدون تعامل کاربر انجام شوند، احتمال ایجاد Layout Shift وجود دارد.

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

بنابراین هنگام توسعه JavaScript باید توجه داشت که تغییرات DOM چگونه روی Layout موجود تأثیر می‌گذارند.

CLS چگونه اندازه‌گیری می‌شود؟

CLS بر اساس میزان جابه‌جایی عناصر قابل مشاهده در صفحه محاسبه می‌شود. این معیار برخلاف معیارهایی مانند LCP، صرفاً یک زمان مشخص از بارگذاری صفحه را اندازه‌گیری نمی‌کند و بر اساس Layout Shiftهای رخ‌داده ارزیابی می‌شود.

برای بررسی CLS می‌توان از ابزارهایی مانند PageSpeed Insights، Chrome DevTools و ابزارهای مرتبط با عملکرد وب استفاده کرد.

محدوده مناسب CLS چیست؟

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

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

برای تصاویر فضای مشخص ایجاد کنید

برای تصاویر، نسبت ابعاد و اندازه مناسب را مشخص کنید تا مرورگر از ابتدا بداند چه مقدار فضا باید برای آنها در نظر بگیرد.

برای تبلیغات فضای رزرو کنید

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

محتوای جدید را به بالای صفحه اضافه نکنید

اگر لازم است یک اعلان، Banner یا محتوای Dynamic به صفحه اضافه شود، بهتر است طراحی آن به شکلی باشد که Layout موجود را ناگهان جابه‌جا نکند.

فونت‌ها را به شکل صحیح مدیریت کنید

فونت‌های موردنیاز را بهینه کنید و نحوه نمایش متن هنگام بارگذاری فونت را با دقت بررسی کنید.

اندازه iframeها را مشخص کنید

برای ویدئو، نقشه و سایر Embedها فضای مشخصی در Layout در نظر بگیرید.

تأثیر CSS بر CLS

CSS نقش مهمی در ساخت Layout صفحه دارد. تغییر ابعاد عناصر، اضافه شدن کلاس‌های جدید یا تغییر ناگهانی برخی ویژگی‌ها می‌تواند باعث جابه‌جایی عناصر شود.

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

تفاوت CLS با LCP و INP

هر سه معیار LCP، INP و CLS بخشی از Core Web Vitals هستند، اما هرکدام جنبه متفاوتی از تجربه کاربر را بررسی می‌کنند.

CLS در سایت‌های وردپرسی

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

برای مثال یک افزونه ممکن است یک Banner یا اعلان را بعد از بارگذاری صفحه به بالای محتوا اضافه کند. اگر فضای آن از ابتدا رزرو نشده باشد، این تغییر می‌تواند باعث Layout Shift شود.

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

CLS در فروشگاه‌های اینترنتی

فروشگاه‌های اینترنتی معمولاً عناصر Dynamic زیادی دارند؛ از تصاویر محصولات و پیشنهادهای ویژه گرفته تا قیمت، موجودی، تبلیغات و ابزارهای فیلتر.

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

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

چگونه مشکل CLS را در DevTools پیدا کنیم؟

ابزارهای توسعه‌دهنده مرورگر Chrome امکاناتی برای بررسی تغییرات Layout ارائه می‌کنند. با استفاده از ابزارهای Performance می‌توان فرآیند بارگذاری صفحه را بررسی کرد و تغییرات Layout را شناسایی کرد.

هنگام بررسی باید به دنبال عناصری باشید که بعد از بارگذاری منابعی مانند تصاویر، فونت‌ها یا اسکریپت‌ها تغییر موقعیت می‌دهند.

چک‌لیست کاهش CLS

• برای تصاویر ابعاد مشخص تعیین کنید.
• برای ویدئوها و iframeها فضای مناسب رزرو کنید.
• برای جایگاه تبلیغات ابعاد مشخص در نظر بگیرید.
• از اضافه کردن محتوای جدید به بالای صفحه جلوگیری کنید.
• فونت‌های سایت را بهینه کنید.
• تغییرات DOM ناشی از JavaScript را بررسی کنید.
• انیمیشن‌هایی که باعث تغییر Layout می‌شوند را کاهش دهید.
• Bannerها و اعلان‌های Dynamic را به شکل پایدار نمایش دهید.
• صفحات مهم سایت را با PageSpeed Insights بررسی کنید.
• بعد از اعمال تغییرات، CLS را دوباره اندازه‌گیری کنید.

جمع‌بندی

CLS یکی از معیارهای مهم Core Web Vitals است که ثبات بصری صفحات وب را بررسی می‌کند. زمانی که عناصر صفحه بدون انتظار کاربر جابه‌جا می‌شوند، تجربه استفاده از سایت کاهش پیدا می‌کند و مقدار CLS نیز ممکن است افزایش یابد.

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

مهم‌ترین اصل برای کاهش CLS این است که مرورگر از ابتدا بداند هر بخش از صفحه چه مقدار فضا نیاز دارد. با رزرو فضای مناسب برای تصاویر، تبلیغات و محتوای Dynamic و مدیریت صحیح فونت‌ها و JavaScript می‌توان ثبات بصری صفحه را بهبود داد.

منابع

• Google Search Central – Core Web Vitals
• web.dev – Cumulative Layout Shift
• web.dev – Optimize CLS
• Google PageSpeed Insights
• MDN Web Docs – Web Performance