CLS چیست و عواملی که باعث افزایش میشوند

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

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

CLS چیست؟

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

هدف اصلی CLS، سنجش میزان “پایداری بصری” (Visual Stability) صفحه است. یک صفحه وب با CLS پایین، صفحه‌ای است که پس از بارگذاری اولیه، عناصر آن ثابت می‌مانند و کاربر می‌تواند به راحتی با محتوای آن تعامل کند بدون اینکه نگران جابجایی ناگهانی عناصر باشد. این معیار، بخشی از مجموعه Core Web Vitals گوگل است و نقش مهمی در ارزیابی کیفیت تجربه کاربری ایفا می‌کند.

نحوه محاسبه:

محاسبه CLS بر اساس فرمول مشخصی انجام می‌شود که دو فاکتور اصلی را در نظر می‌گیرد: Impact Fraction (کسر تأثیر) و Impact Distance (فاصله تأثیر).

Impact Fraction (کسر تأثیر): این فاکتور نشان‌دهنده این است که چه بخشی از ناحیه دید (Viewport) کاربر، تحت تأثیر جابجایی یک عنصر قرار گرفته است. این کسر به صورت درصدی از کل صفحه نمایش بیان می‌شود. برای مثال، اگر یک تصویر بزرگ در بالای صفحه جابجا شود و نیمی از صفحه نمایش را اشغال کند، کسر تأثیر آن بالا خواهد بود.
- نحوه محاسبه: (مساحت بخشی از Viewport که تحت تأثیر قرار گرفته است) / (کل مساحت Viewport)
Impact Distance (فاصله تأثیر): این فاکتور، میزان جابجایی عمودی (یا افقی، اگرچه تغییر چیدمان عمودی رایج‌تر است) یک عنصر از موقعیت اولیه خود را اندازه‌گیری می‌کند. این جابجایی در واحدهای پیکسل محاسبه می‌شود.

فرمول نهایی CLS:

CLS = Impact Fraction × Impact Distance

نکات مهم در محاسبه CLS:

جریان جابجایی‌ها: CLS فقط تغییرات ناگهانی (Pop-up) را در نظر می‌گیرد، نه انیمیشن‌های روان که کاربر از آن‌ها آگاه است.
دسته‌بندی جابجایی‌ها: جابجایی‌های متوالی که در فاصله زمانی کمتر از 500 میلی‌ثانیه رخ می‌دهند، به عنوان یک جابجایی واحد در نظر گرفته می‌شوند.
نادیده گرفتن تغییرات در پس‌زمینه: جابجایی‌هایی که در هنگام تمرکز مرورگر بر روی یک تب دیگر یا در پس‌زمینه رخ می‌دهند، معمولاً نادیده گرفته می‌شوند.
امتیازدهی: گوگل برای CLS سه دسته امتیاز در نظر می‌گیرد:
- خوب (Good): CLS کمتر از 0.1
- نیازمند بهبود (Needs Improvement): CLS بین 0.1 تا 0.25
- ضعیف (Poor): CLS بزرگتر از 0.25

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

اهمیت CLS در تجربه کاربری و سئو

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

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

تأثیر بر رتبه‌بندی موتورهای جستجو (سئو):

گوگل به طور مداوم در تلاش است تا نتایج جستجوی مرتبط‌تر و با کیفیت‌تری را به کاربران ارائه دهد. معیارهای Core Web Vitals، از جمله CLS، بخش مهمی از الگوریتم رتبه‌بندی گوگل را تشکیل می‌دهند. این بدان معناست که:

افزایش شانس رتبه بهتر: سایت‌هایی که از نظر Core Web Vitals (شامل CLS، LCP و FID) عملکرد خوبی دارند، شانس بیشتری برای کسب رتبه‌های بالاتر در نتایج جستجوی گوگل خواهند داشت. گوگل این معیارها را به عنوان نشانه‌ای از تجربه کاربری مثبت تلقی می‌کند.
تأثیر بر معیارهای سئو فنی: CLS پایین، نشان‌دهنده بهینه‌سازی فنی خوب صفحه است. موتورهای جستجو به سایت‌های بهینه‌سازی شده پاداش می‌دهند.
عامل تمایز: در میان سایت‌هایی که محتوای مشابهی ارائه می‌دهند، سایتی که تجربه کاربری بهتری (با CLS پایین‌تر) دارد، ممکن است اولویت گوگل برای نمایش در نتایج بالاتر باشد.

نرخ تبدیل و درآمد:

تجربه کاربری خوب، مستقیماً با موفقیت تجاری یک وب‌سایت مرتبط است.

افزایش نگهداری کاربران (Retention): کاربرانی که از تجربه کاربری لذت می‌برند، مدت زمان بیشتری در سایت می‌مانند و احتمال بازگشت آن‌ها نیز بیشتر است.
کاهش نرخ پرش (Bounce Rate): جابجایی‌های ناخواسته اغلب باعث خروج سریع کاربر از سایت می‌شوند. بهبود CLS به کاهش این نرخ پرش کمک می‌کند.
افزایش نرخ تبدیل (Conversion Rate): کاربران ناامید یا سردرگم، کمتر احتمال دارد که اقدام مورد نظر (خرید، ثبت‌نام، دانلود و غیره) را انجام دهند. بهبود CLS، با فراهم کردن تجربه‌ای روان و قابل اعتماد، مستقیماً بر افزایش نرخ تبدیل تأثیر می‌گذارد.
افزایش درآمد: در نهایت، تمام این عوامل (نگهداری بیشتر، نرخ پرش کمتر، نرخ تبدیل بالاتر) به طور مستقیم منجر به افزایش درآمد برای کسب و کار آنلاین شما می‌شوند.

عوامل مؤثر بر ایجاد CLS

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

1. تصاویر و ویدئوهای بدون ابعاد مشخص:

این یکی از رایج‌ترین و ساده‌ترین دلایل CLS است. وقتی یک تصویر یا ویدئو در HTML تعریف می‌شود اما عرض (width) و ارتفاع (height) آن مشخص نمی‌گردد، مرورگر نمی‌تواند از ابتدا فضای کافی برای آن رزرو کند.

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

مثال:

<img src="path/to/image.jpg" alt="توضیح تصویر">
<!-- مرورگر نمی‌داند چه میزان فضا برای این تصویر رزرو کند -->

2. تبلیغات پویا و ویجت‌های شخص ثالث:

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

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

3. فونت‌های وب (Web Fonts) و بارگذاری آن‌ها:

استفاده از فونت‌های سفارشی (مانند فونت‌های گوگل) به جای فونت‌های سیستمی، می‌تواند منجر به CLS شود، به خصوص اگر مدیریت درستی نداشته باشد.

چگونگی تأثیر: هنگامی که مرورگر صفحه را بارگذاری می‌کند، ابتدا فونت‌های سیستم را برای نمایش متن به کار می‌برد (Flash of Unstyled Text یا FOUT). پس از اینکه فونت وب دانلود شد، مرورگر مجدداً متن را با فونت جدید رندر می‌کند. این تعویض فونت ممکن است باعث تغییر در اندازه یا عرض هر کاراکتر شود که در نهایت منجر به تغییر در چیدمان پاراگراف‌ها و خطوط متن و در نتیجه CLS می‌گردد. حتی گاهی اوقات، قبل از بارگذاری فونت وب، یک فونت جایگزین (Fallback Font) نمایش داده می‌شود که پس از بارگذاری فونت اصلی، جایگزین می‌شود و این خود باعث جابجایی می‌شود. (Flash of Invisible Text یا FOIT نیز می‌‌تواند منجر به CLS شود).
مثال: یک پاراگراف با فونت استاندارد نمایش داده می‌شود، سپس فونت سفارشی بارگذاری شده و اندازه یا عرض حروف تغییر کرده، پاراگراف بلندتر یا کوتاه‌تر شده و جابجا می‌شود.

4. تزریق محتوا پس از بارگذاری (Content Injection):

این مورد شامل افزودن محتوای جدید به صفحه پس از بارگذاری اولیه آن است. این می‌تواند شامل نمایش پیام‌های تأیید، پیشنهادات، یا آپدیت‌های محتوا باشد.

چگونگی تأثیر: اگر این محتوای جدید بدون رزرو فضا یا در مکانی نامناسب اضافه شود، باعث جابجایی عناصر دیگر و افزایش CLS می‌گردد.
مثال: بعد از اتمام بارگذاری صفحه، یک پیام “پست با موفقیت منتشر شد” در بالای صفحه ظاهر شده و تمام محتوای قبلی را به پایین هل می‌دهد.

5. انیمیشن‌های ناپایدار:

در حالی که انیمیشن‌ها می‌توانند تجربه کاربری را بهبود بخشند، استفاده نادرست از آن‌ها، به خصوص انیمیشن‌هایی که خصوصیات مربوط به چیدمان (Layout Properties) را تغییر می‌دهند، می‌توانند باعث CLS شوند.

چگونگی تأثیر: انیمیشن‌هایی که خصوصیات CSS مانند margin, padding, width, height, top, left, transform (در برخی موارد) را به صورت انیمیشنی تغییر می‌دهند، ممکن است باعث شوند مرورگر مجدداً چیدمان صفحه را محاسبه کند. این محاسبات مکرر و تغییر موقعیت عناصر، به CLS منجر می‌شود.
مثال: دکمه‌ای که هنگام هاور شدن (hover) به صورت انیمیشنی بزرگ می‌شود و فضایی را اشغال می‌کند، می‌تواند باعث جابجایی عناصر همسایه شود.

6. تغییر اندازه پنجره مرورگر (Resize) و حالت نمایشی (Viewport Modes):

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

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

اندازه‌گیری CLS

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

ابزارهای اندازه‌گیری:

Google Search Console:
- قابلیت: این ابزار یکی از مهم‌ترین منابع برای درک وضعیت CLS وب‌سایت شما از دیدگاه گوگل است. در بخش “Core Web Vitals”، گوگل گزارشی از عملکرد سایت شما بر اساس داده‌های واقعی کاربران (CrUX – Chrome User Experience Report) ارائه می‌دهد.
- اطلاعات: گزارش CLS در Search Console، سایت شما را به سه دسته “خوب”، “نیازمند بهبود” و “ضعیف” تقسیم‌بندی می‌کند و به تفکیک URLها، مشکلاتی که باعث CLS بالا شده‌اند را نمایش می‌دهد. این ابزار به شما کمک می‌کند تا بدانید کدام صفحات سایت نیاز به توجه فوری دارند.
PageSpeed Insights:
- قابلیت: این ابزار یک تحلیلگر آنلاین است که هم داده‌های آزمایشگاهی (Lighthouse) و هم داده‌های واقعی کاربران (CrUX) را برای یک URL خاص ارائه می‌دهد.
- اطلاعات: PageSpeed Insights علاوه بر امتیاز CLS، جزئیات دقیقی در مورد بیشترین جابجایی‌های چیدمان (Largest Layout Shifts) در صفحه ارائه می‌دهد. همچنین، لیستی از دلایل احتمالی CLS بالا و پیشنهاداتی برای رفع آن‌ها را نیز ذکر می‌کند. این ابزار برای شناسایی سریع مشکلات در یک صفحه خاص بسیار مفید است.
Lighthouse (در Chrome DevTools):
- قابلیت: Lighthouse یک ابزار منبع باز است که توسط گوگل توسعه یافته و به عنوان افزونه مرورگر Chrome و همچنین یک ابزار خط فرمان در دسترس است. Lighthouse به طور خودکار عملکرد، قابلیت دسترسی، سئو و سایر جنبه‌های یک صفحه وب را ارزیابی می‌کند.
- اطلاعات: در بخش “Performance” گزارش Lighthouse، امتیاز CLS به همراه لیستی از “Layout Shift” ها (تغییرات چیدمان) که باعث افزایش CLS شده‌اند، نمایش داده می‌شود. Lighthouse همچنین زمان و مدت زمان هر جابجایی را نشان می‌دهد و مشخص می‌کند که کدام عناصر باعث این جابجایی‌ها شده‌اند. این ابزار برای اشکال‌زدایی در محیط توسعه بسیار کارآمد است.
Chrome DevTools (Developer Tools):
- قابلیت: ابزارهای توسعه‌دهنده مرورگر Chrome (Chrome DevTools) مجموعه‌ای قدرتمند از ابزارهایی هستند که به توسعه‌دهندگان امکان می‌دهند تا عملکرد، شبکه، DOM و سایر جنبه‌های یک صفحه وب را به صورت دقیق بررسی کنند.
- اطلاعات:
  - Performance Tab: با فعال کردن گزینه “Web Vitals” در تب Performance، می‌توانید هنگام ضبط فعالیت صفحه، تغییرات چیدمان و CLS را به صورت بصری مشاهده کنید. این تب دقیقاً نشان می‌دهد که چه عنصری و در چه زمانی جابجا شده است.
  - Rendering Tab: با فعال کردن “Layout Shift Regions” در تب Rendering، می‌توانید مناطقی که دچار تغییر چیدمان می‌شوند را به صورت بصری با رنگ‌های مشخص مشاهده کنید. این به شما کمک می‌کند تا بلافاصله متوجه شوید کدام بخش از صفحه مشکل دارد.
1. ابزار تست سرعت سایت خدمات سرعت:
- قابلیت: این ابزار دقیقا پاسخ های مانند پیج اسپید گوگل میدهد و به دلیل اینکه گوگل این ابزار را برای ایرانی ها تحریم کرده تیم خدمات سرعت با استفاده از Api پیج اسپید این ابزار را بصورت مستقیم در اختیار کاربران ایرانی قرار داده که میتوانید با کلیک روی ابزار تست سرعت وبسایت با این ابزار دسترسی داشته باشید

نکات مهم در اندازه‌گیری:

داده‌های واقعی کاربران (Field Data): این داده‌ها از طریق CrUX (Chrome User Experience Report) جمع‌آوری می‌شوند و نشان‌دهنده تجربه واقعی کاربرانی است که از سایت شما بازدید کرده‌اند. این داده‌ها، تصویر واقعی‌تری از وضعیت سایت ارائه می‌دهند، زیرا بر روی دستگاه‌های مختلف، در شبکه‌های مختلف و در شرایط واقعی مورد استفاده قرار می‌گیرند.
داده‌های آزمایشگاهی (Lab Data): این داده‌ها از طریق ابزارهایی مانند Lighthouse یا PageSpeed Insights در محیط کنترل شده و شبیه‌سازی شده به دست می‌آیند. این داده‌ها برای اشکال‌زدایی و شناسایی مشکلات قبل از انتشار بسیار مفید هستند، اما ممکن است همیشه منعکس‌کننده تجربه واقعی همه کاربران نباشند.
پیگیری مداوم: CLS یک معیار پویا است و ممکن است با تغییرات در سایت یا رفتار کاربران تغییر کند. بنابراین، پیگیری مداوم CLS از طریق ابزارهای گزارش‌دهی اهمیت زیادی دارد.

راهکارهای عملی جهت بهبود CLS

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

1. تعیین ابعاد عناصر تصویری و ویدیویی:

این راهکار، یکی از مؤثرترین و ساده‌ترین راه‌ها برای جلوگیری از CLS ناشی از تصاویر و ویدئوها است.

روش: همیشه عرض (width) و ارتفاع (height) مورد انتظار برای عناصر <img>, <video>, <iframe> و هر عنصر رسانه‌ای دیگر را در HTML یا CSS مشخص کنید.

<!-- روش پیشنهادی در HTML -->
<img src="image.jpg" width="800" height="600" alt="توضیح تصویر">

<!-- یا با استفاده از CSS Aspect Ratio -->
<div class="image-container">
    <img src="image.jpg" alt="توضیح تصویر">
</div>
<style>
.image-container {
    aspect-ratio: 800 / 600; /* نسبت تصویر (عرض به ارتفاع) */
    width: 100%; /* یا عرض ثابت */
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* برای اطمینان از پوشش کامل فضا */
}
</style>

نکته: در طراحی واکنش‌گرا (Responsive Design)، از ویژگی aspect-ratio در CSS برای حفظ نسبت تصویر استفاده کنید. این کار باعث می‌شود مرورگر بتواند فضای لازم را حتی در اندازه‌های مختلف صفحه رزرو کند.

2. رزرو فضا برای محتوای دینامیک (تبلیغات، iframe، بنرها):

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

روش: یک عنصر حاوی (container) با ارتفاع ثابت برای تبلیغات، ویدئوها یا ویجت‌های خارجی تعریف کنید. این فضا قبل از بارگذاری محتوای اصلی رزرو می‌شود و در صورت عدم بارگذاری یا بارگذاری با تأخیر محتوا، آن فضا خالی باقی می‌ماند اما باعث جابجایی نمی‌شود.
```
<div class="ad-placeholder" style="height: 250px; width: 300px;">
    
</div>
```
نکته: حتی اگر تبلیغ نمایش داده نشود، این فضای رزرو شده از جابجایی عناصر زیرین جلوگیری می‌کند.

3. مدیریت صحیح فونت‌های وب (Web Fonts):

برای جلوگیری از CLS ناشی از تغییر فونت، از تکنیک‌های زیر استفاده کنید:

استفاده از font-display: swap;: این ویژگی CSS به مرورگر می‌گوید که قبل از بارگذاری کامل فونت وب، از فونت پیش‌فرض سیستم استفاده کند و پس از بارگذاری فونت وب، آن را جایگزین کند. با این حال، swap باعث جابجایی می‌شود. برای کاهش جابجایی:
- نزدیک کردن فونت‌های جایگزین به فونت اصلی: سعی کنید فونت پیش‌فرض سیستمی که به عنوان جایگزین استفاده می‌شود، تا حد امکان از نظر عرض و ارتفاع شبیه به فونت وب اصلی شما باشد. این کار با استفاده از ویژگی size-adjust در @font-face یا ویژگی font-synthesis در CSS امکان‌پذیر است.
- پیش‌بارگذاری (Preloading) فونت‌ها: با استفاده از <link rel="preload"> در بخش <head> صفحه، به مرورگر بگویید که فونت‌ها را زودتر دانلود کند.
```
<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
```
- استفاده از font-display: optional; یا font-display: fallback;: optional زمانی مناسب است که اولویت اصلی، عدم جابجایی باشد و فونت وب فقط در صورت بارگذاری بسیار سریع استفاده شود. fallback نیز یک گزینه است که با یک دوره انتظار کوتاه، اولویت را به عدم جابجایی می‌دهد.

4. استفاده بهینه از CSS برای انیمیشن‌ها:

انیمیشن‌هایی که خصوصیات طرح‌بندی (Layout Properties) را تغییر می‌دهند، بیشترین تأثیر را بر CLS دارند.

روش: به جای انیمیشن دادن به خصوصیات مانند width, height, margin, padding, top, left، از خصوصیات CSS که مرورگر آن‌ها را با استفاده از GPU و بدون نیاز به بازسازی طرح‌بندی (Layout) انیمیشن می‌کند، استفاده کنید. این خصوصیات شامل transform (برای translate, scale, rotate) و opacity هستند.

/* روش نامناسب (ایجاد CLS) */
.element {
    margin-left: 10px;
    transition: margin-left 0.5s ease-out;
}
.element:hover {
    margin-left: 30px; /* این جابجایی باعث CLS می‌شود */
}

/* روش مناسب (بدون ایجاد CLS) */
.element {
    transform: translateX(0);
    transition: transform 0.5s ease-out;
}
.element:hover {
    transform: translateX(20px); /* جابجایی با transform */
}

5. اصلاح فرآیند تزریق محتوا:

هنگام افزودن محتوای داینامیک به صفحه، مراقب باشید که باعث جابجایی نشود.

روش:
- محتوای جدید را در انتهای صفحه یا در مکانی که کمترین تأثیر را بر چیدمان موجود دارد، اضافه کنید.
- اگر محتوا باید در بالای صفحه اضافه شود، سعی کنید از قبل فضایی را برای آن در نظر بگیرید.
- از انیمیشن‌های سریع و روان برای نمایش محتوای جدید استفاده کنید، نه انیمیشن‌هایی که باعث تغییر ناگهانی ابعاد می‌شوند.
نکته: استفاده از position: fixed یا position: absolute برای عناصری که نباید در چیدمان اصلی تأثیر بگذارند (مانند منوهای ثابت یا پاپ‌آپ‌ها)، می‌تواند از ایجاد CLS جلوگیری کند، به شرطی که این عناصر خود باعث پوشاندن یا اختلال در عناصر دیگر نشوند.

6. بهینه‌سازی بنرهای سایت و تبلیغات:

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

نمونه‌هایی از بهبود CLS

در این بخش، به بررسی چند سناریوی عملی و نحوه بهبود CLS در هر یک می‌پردازیم:

مورد 1: بهینه‌سازی تصاویر محصول در یک فروشگاه آنلاین

مشکل: صفحه محصول شامل تصاویر بزرگ محصول است که بدون width و height تعریف شده بارگذاری می‌شوند. همچنین، یک بخش “محصولات پیشنهادی” در زیر تصاویر وجود دارد که پس از بارگذاری تصاویر، با تأخیر ظاهر می‌شود.
راهکار:
1. تعیین ابعاد تصاویر: برای هر تصویر محصول، width و height آن را در تگ <img> یا با استفاده از aspect-ratio در CSS مشخص کنید.
2. رزرو فضا برای محصولات پیشنهادی: یک placeholder با ارتفاع ثابت برای بخش “محصولات پیشنهادی” در نظر بگیرید، یا اطمینان حاصل کنید که این بخش پیش از بارگذاری تصاویر اصلی، به صفحه اضافه شود.

مورد 2: وبلاگی با فونت‌های سفارشی و تبلیغات میان‌متن

مشکل: مقالات وبلاگ از فونت‌های سفارشی گوگل استفاده می‌کنند و همچنین حاوی تبلیغات بنری در میان پاراگراف‌ها هستند. کاربر هنگام خواندن، متوجه جابجایی متن به دلیل تغییر فونت و همچنین جابجایی به دلیل ظهور ناگهانی تبلیغات می‌شود.
راهکار:
1. مدیریت فونت‌ها:
  - از font-display: swap; استفاده کنید، اما فونت جایگزین را تا حد امکان به فونت اصلی شبیه کنید (با تست و تنظیم).
  - فونت‌ها را با استفاده از preload در head پیش‌بارگذاری کنید.
2. مدیریت تبلیغات:
  - برای هر تبلیغ بنری، یک div با ارتفاع ثابت به عنوان placeholder ایجاد کنید.
  - تبلیغات را در مکان‌هایی قرار دهید که کمترین تأثیر را بر جریان خواندن محتوا داشته باشند (مثلاً در انتهای پاراگراف‌ها به جای وسط آن‌ها).

مورد 3: سایت خبری با بارگذاری محتوای پویا (اخبار فوری)

مشکل: یک سایت خبری، اخبار فوری را در بالای صفحه نمایش می‌دهد. این اخبار با انیمیشن وارد صفحه شده و باعث جابجایی سایر اخبار موجود می‌شوند.
راهکار:
1. رزرو فضا: برای ناحیه “اخبار فوری”، یک div با ارتفاع ثابت در بالای صفحه در نظر بگیرید.
2. تزریق محتوا: اخبار فوری را به انتهای لیست اخبار موجود اضافه کنید، نه در ابتدای آن. اگر لازم است در ابتدا نمایش داده شوند، اطمینان حاصل کنید که فضای مورد نیاز آن‌ها از قبل رزرو شده و جابجایی ناگهانی اتفاق نیفتد.

مورد 4: استفاده از برای ویدئوهای یوتیوب

مشکل: <iframe> های ویدئو بدون ابعاد مشخص بارگذاری می‌شوند و باعث جابجایی محتوای اطراف خود می‌گردند.
راهکار:
1. تعیین ابعاد <iframe>: نسبت تصویر ویدئو را محاسبه کرده و از CSS برای تعیین width و height یا aspect-ratio استفاده کنید.
2. استفاده از loading="lazy": برای ویدئوهایی که در ناحیه دید اولیه نیستند، از ویژگی loading="lazy" استفاده کنید تا بارگذاری آن‌ها به تعویق افتاده و CLS در بارگذاری اولیه کاهش یابد.

نتیجه‌گیری:

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

درک کامل مفهوم CLS، شناسایی عوامل رایجی که باعث ایجاد آن می‌شوند (مانند تصاویر بدون ابعاد، محتوای پویا، فونت‌های وب، تبلیغات و انیمیشن‌های ناپایدار) و همچنین توانایی اندازه‌گیری دقیق آن با استفاده از ابزارهایی مانند Google Search Console، PageSpeed Insights و Chrome DevTools، گام‌های اساسی در جهت بهبود این شاخص هستند.

همانطور که در این راهنما به تفصیل شرح داده شد، پیاده‌سازی راهکارهای عملی مانند تعیین ابعاد دقیق برای رسانه‌ها، رزرو فضا برای محتوای دینامیک، مدیریت صحیح فونت‌ها با استفاده از font-display و preload، و استفاده از خصوصیات CSS مناسب برای انیمیشن‌ها، می‌تواند به طور چشمگیری CLS سایت شما را کاهش دهد.

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

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

بلاگ