تصور کنید در حال مطالعه یک مقاله جذاب در تلفن همراه خود هستید. ناگهان قصد دارید روی یک دکمه “ادامه مطلب” کلیک کنید، اما در همان لحظه یک بنر تبلیغاتی بزرگ در بالای صفحه ظاهر میشود و تمام محتوا را به پایین میراند. در این مطلب به CLS چیست و چرا برای سایت شما حیاتی است؟ میپردازیم.
انگشت شما اکنون روی یک لینک کاملاً متفاوت فرود آمده است. این احساس ناامیدی و سردرگمی دقیقاً نتیجه مستقیم مشکلی به نام Cumulative Layout Shift یا CLS است.
اما CLS فقط یک مشکل آزاردهنده برای کاربران نیست. امروزه این معیار تبدیل به یکی از ارکان اساسی موفقیت هر وبسایتی شده است، بهطوریکه گوگل رسماً آن را در دستهبندی Core Web Vitals (شاخصهای حیاتی وب) قرار داده و به عنوان یک فاکتور مستقیم رتبهبندی اعلام کرده است. در این مقاله، به شکلی عمیق و کاربردی، هر آنچه باید درباره CLS بدانید را بررسی خواهیم کرد.
CLS چیست و چرا مغز ما از آن متنفر است؟
CLS مخفف Cumulative Layout Shift به معنای “تغییر مکان تجمعی چیدمان” است. این یک معیار فنی مهم است که میزان ثبات بصری صفحات وب شما را اندازهگیری میکند.
توضیح به زبان ساده:
فرض کنید در حال خواندن یک مقاله در موبایل هستید و میخواهید روی یک دکمه کلیک کنید. ناگهان یک عکس یا تبلیغ بارگذاری میشود و همه چیز را به پایین میراند. در نتیجه شما به جای دکمه مورد نظر، روی یک لینک کاملاً متفاوت کلیک میکنید. این تجربه آزاردهنده دقیقاً نتیجه CLS بالا است.
چرا CLS مهم است؟
- تأثیر بر کاربران: جابجایی ناگهانی عناصر صفحه باعث سردرگمی کاربران میشود و تجربه بدی ایجاد میکند.
- تأثیر بر سئو: گوگل در سال 2021، CLS را به عنوان یکی از سه معیار اصلی Core Web Vitals (شاخصهای حیاتی وب) معرفی کرد و آن را مستقیماً در رتبهبندی سایتها تأثیر میدهد.
- تأثیر بر فروش: در فروشگاههای اینترنتی، CLS بالا میتواند منجر به کلیکهای اشتباه، رها کردن سبد خرید و از دست دادن فروش شود.
علل اصلی ایجاد CLS:
- تصاویر و ویدیوهای بدون سایز ثابت
- تبلیغات، بنرها و ویجتهای پویا
- فونتهای وب که دیر بارگذاری میشوند
- محتواهای اضافه شده با تاخیر (مثل نظرات یا پیشنهادات محصول)
تأثیر مستقیم CLS بر سئو: چرا گوگل آن را جدی گرفته است؟
گوگل همواره بر این اصل تأکید دارد: آنچه برای کاربران خوب است، برای گوگل نیز خوب است. در می202۱، گوگل بهطور رسمی Core Web Vitals را به عنوان یک سیگنال رتبهبندی معرفی کرد که CLS یکی از سه رکن اصلی آن است (دو رکن دیگر LCP و FID هستند).
- LCP (Largest Contentful Paint): سرعت بارگذاری محتوای اصلی.
- FID (First Input Delay): سرعت پاسخگویی به اولین تعامل کاربر.
- CLS (Cumulative Layout Shift): ثبات بصری.
اگر سایت شما CLS بالایی داشته باشد، گوگل آن را به عنوان سایتی با تجربه کاربری ضعیف شناسایی میکند و احتمالاً رتبه آن را در نتایج جستجو کاهش خواهد داد. این کاهش رتبه به معنای از دست دادن ترافیک ارگانیک، کاهش نرخ تبدیل و در نهایت ضرر مالی است.
CLS چگونه محاسبه میشود؟ فرمولی که باید بدانید.
درک فرمول CLS به شما کمک میکند ریشه مشکلات را بهتر شناسایی کنید. CLS حاصل ضرب دو مقدار برای هر جابجایی ناخواسته است: CLS = Impact Fraction × Distance Fraction
Impact Fraction (کسر تأثیر): به این سؤال پاسخ میدهد که “عنصر جابجا شده چقدر از viewport (قسمت قابل مشاهده صفحه) را در لحظه جابجایی اشغال کرده بود؟” این یک عدد بین ۰ و ۱ است. مثلاً اگر یک بنر نیمی از صفحه را جابجا کند، Impact Fraction آن ۰.۵ خواهد بود.
Distance Fraction (کسر فاصله): به این سؤال پاسخ میدهد که “عنصر چه نسبتی از ارتفاع viewport جابجا شده است؟” این هم عددی بین ۰ و ۱ است. مثلاً اگر یک دکمه به اندازه یک چهارم ارتفاع صفحه به پایین رانده شده باشد، Distance Fraction آن ۰.۲۵ است.
مقدار نهایی CLS صفحه، جمع تمام این جابجاییهای ناخواسته در طول عمر جلسه کاربر است.
مثال: یک تصویر بدون ابعاد که نیمی از صفحه را پوشانده (Impact=0.5) و به اندازه ۳۰٪ ارتفاع صفحه پایین رفته (Distance=0.3)، سهمی معادل ۰.۱۵ به CLS کل صفحه اضافه میکند.
امتیاز خوب CLS چقدر است؟
گروه Web Vitals گوگل دستهبندی واضحی ارائه داده است:
خوب (Good): ۰.۱ یا کمتر. این هدف نهایی شماست. صفحات با این امتیاز، ثبات بصری عالی دارند.
نیاز به بهبود (Needs Improvement): بین ۰.۱ تا ۰.۲۵. کاربران ممکن است متوجه جابجاییهای جزئی شوند. برای رقابت در سئو، باید این مقدار را بهبود دهید.
ضعیف (Poor): بالاتر از ۰.۲۵. تجربه کاربری به شدت تحت تأثیر قرار گرفته و رتبه سئوی شما به طور محسوسی آسیب میبیند.
علل اصلی افزایش CLS چیست؟
اصلیترین مقصران CLS عبارتند از:
۱. تصاویر و ویدیوهای بدون ابعاد (Dimensions): وقتی در کد HTML، عرض (width) و ارتفاع (height) برای یک رسانه تعیین نکنید، مرورگر نمیداند چه فضایی را برای آن رزرو کند. پس از بارگذاری، تصویر ناگهان ظاهر شده و همه چیز را به پایین میراند.
۲. تبلیغات، اگرریمها و ویجتهای پویا: عناصری مانند بنرهای تبلیغاتی، نقشههای تعاملی یا چتباتها که بعداً و به صورت پویا به صفحه تزریق میشوند، اگر فضای اختصاصی از قبل برایشان در نظر گرفته نشده باشد، قاتلان CLS هستند.
۳. فونتهای وب با بارگذاری ناهمزمان: وقتی از فونتهای سفارشی (مثلاً از Google Fonts) استفاده میکنید، مرورگر ابتدا متن را با فونت پیشفرض (مثلاً Arial) نمایش میدهد. پس از دانلود فونت اصلی، متن با فونت جدید رندر میشود که اندازههای متفاوتی دارد و باعث جابجایی میشود. این پدیده به FOIT/FOUT معروف است.
۴. محتواهای تزریقشده با JavaScript: هر محتوایی که پس از بارگذاری اولیه صفحه توسط جاوااسکریپت اضافه شود (مثل نتایج جستجو، نظرات یا توصیههای محصول) میتواند مشکلساز باشد.
راهکارهای عملی و پیشرفته برای کاهش CLS
این راهکارها از ساده به پیچیده مرتب شدهاند:
۱. همیشه ابعاد تصاویر و ویدیوها را مشخص کنید.
این مهمترین و مؤثرترین اقدام است.
۲. برای فونتهای وب، از fontdisplay: swap استفاده کنید.
این دستور به مرورگر میگوید: “بلافاصله متن را با فونت پیشفرض نمایش بده، و وقتی فونت اصلی آماده شد، آن را جایگزین کن.” اگر اندازه دو فونت متفاوت است، با تنظیم fontsizeadjust یا استفاده از preload برای فونتهای حیاتی میتوانید تأثیر جابجایی را کم کنید.
۳. برای عناصر پویا، فضای رزرو (Reserve Space) کنید.
اگر میدانید یک بنر تبلیغاتی با ابعاد ۳۰۰x250 پیکسل در بخشی از صفحه نمایش داده میشود، از همان ابتدا یک ظرف (Container) با آن ابعاد در چیدمان قرار دهید. حتی اگر تبلیغ دیر بارگذاری شود، فضای آن خالی میماند ولی چیزی جابجا نمیشود.
۴. ترتیب بارگذاری منابع را بهینه کنید.
از بارگذاری منابع غیرضروری در بخش بالای صفحه (<head>) خودداری کنید. برای اسکریپتها و استایلشیتهای غیرحیاتی از ویژگیهای async یا defer استفاده کنید تا رندر صفحه را مسدود نکنند.
۵. از ابزارهای Developer Tools کروم برای عیبیابی دقیق استفاده کنید.
- به بخش Performance بروید و یک ضبط (Record) انجام دهید.
- در بخش Experience، مستقیماً میتوانید نوارهای بنفش رنگی که نشاندهنده Layout Shifts هستند را ببینید.
- با کلیک روی هرکدام، میتوانید المان مسئول و علت دقیق جابجایی را در Summary پایین صفحه مشاهده کنید.
ابزارهای سنجش CLS
۱. Google PageSpeed Insights: بهترین نقطه شروع. آدرس URL را وارد کنید تا گزارش کاملی از Core Web Vitals از جمله CLS هم در محیط آزمایشی (Lab) و هم در دنیای واقعی (Field) دریافت کنید.
۲. Chrome User Experience Report (CrUX): دادههای واقعی از کاربران کروم. گزارش Core Web Vitals در کنسول جستجوی گوگل (Search Console) بر اساس همین دادههاست.
۳. Lighthouse: درون ابزارهای توسعهدهنده کروم (F12 > Lighthouse) یا به صورت خط فرمان. یک شبیهسازی آزمایشی انجام میدهد و راهکارهای دقیق برای رفع مشکلات ارائه میکند.
۴. Web Vitals Extension: یک افزونه کروم که در حین مرور صفحات، به صورت لحظهای LCP، FID و CLS را نشان میدهد. عالی برای تست صفحات مختلف سایت.
جمعبندی:
بهینهسازی CLS، سرمایهگذاری بر روی اعتماد است. اعتماد کاربری که از تجربه روان و قابل پیشبینی لذت میبرد و احتمال بازگشت و خریدش بیشتر است. اعتماد گوگل که سایت شما را شایسته قرارگیری در رتبههای بالاتر میداند.
در دنیای شلوغ اینترنت، جایی که توجه کاربران ارزشمندترین دارایی است، ثبات یک مزیت رقابتی بزرگ محسوب میشود. سایت شما باید مانند یک میزبان مطمئن باشد، نه یک صحنه متغیر و غیرقابل پیشبینی. با اندازهگیری مداوم، ریشهیابی و اجرای راهکارهای فنی، میتوانید CLS را به یک نقطه قوت تبدیل کنید و هم کاربران و هم موتورهای جستجو را شگفتزده نمایید.
