شاخص CLS یا Cumulative Layout Shift یکی از معیارهای اصلی Core Web Vitals گوگل است که میزان پایداری بصری و جابه جایی ناگهانی عناصر در هنگام بارگذاری صفحه وب را اندازه گیری می کند. امتیاز CLS مطلوب کمتر از 0.1 است و برای بهبود آن باید ابعاد دقیق تصاویر و ویدیوها را تعیین کنید، از بارگذاری تنبل اصولی استفاده نمایید و فضای کافی برای محتوای پویا و تبلیغات در نظر بگیرید. کاهش CLS باعث افزایش رضایت کاربر، کاهش نرخ پرش و بهبود رتبه سایت در نتایج جستجو می شود.
CLS چیست و مفهوم پایداری بصری در سئو
عبارت CLS مخفف Cumulative Layout Shift است که در زبان فارسی به آن تغییر چیدمان تجمعی یا پرش صفحه گفته می شود. این شاخص یکی از سه معیار اصلی Core Web Vitals (معیارهای حیاتی وب) است که توسط گوگل معرفی شده و هدف آن سنجش میزان پایداری بصری صفحه در حین بارگذاری و تعامل کاربر است.
تصور کنید در حال مطالعه یک مقاله جذاب در وب سایت مورد علاقه خود هستید و ناگهان یک بنر تبلیغاتی در بالای صفحه بارگذاری می شود. این اتفاق باعث می شود متنی که در حال خواندن آن بودید به پایین هل داده شود و شما رشته کلام را از دست بدهید یا به طور ناخواسته روی یک لینک دیگر کلیک کنید. این تجربه ناخوشایند دقیقاً همان چیزی است که CLS بالا آن را توصیف می کند. گوگل از سال 2021 این معیار را به عنوان یک فاکتور رسمی در الگوریتم رتبه بندی خود قرار داده است، زیرا پایداری بصری ارتباط مستقیمی با رضایت کاربر و کیفیت کلی وب سایت دارد.
نحوه محاسبه امتیاز CLS به زبان فنی و ساده
برخلاف تصور رایج، CLS فقط تعداد دفعات پرش صفحه را نمی شمارد، بلکه شدت و وسعت این جابه جایی ها را نیز محاسبه می کند. مرورگرها با استفاده از Layout Instability API هر تغییری را که در آن یک عنصر بصری موقعیت خود را بین دو فریم متوالی تغییر دهد، ردیابی می کنند. امتیاز نهایی CLS از حاصل ضرب دو مؤلفه اصلی به دست می آید:
فرمول محاسبه امتیاز تغییر چیدمان:
CLS Score = Impact Fraction × Distance Fraction
امتیاز CLS = کسر تاثیر × کسر فاصله
کسر تاثیر (Impact Fraction): این مؤلفه اندازه گیری می کند که چه درصدی از محدوده قابل مشاهده صفحه (Viewport) تحت تاثیر جابه جایی عناصر ناپایدار قرار گرفته است. اگر یک تصویر بزرگ ناگهان ظاهر شود و نیمی از صفحه را جابه جا کند، کسر تاثیر عدد بالایی خواهد بود.
کسر فاصله (Distance Fraction): این مؤلفه بیشترین فاصله ای را که یک عنصر ناپایدار طی کرده است (چه به صورت افقی و چه عمودی) نسبت به بزرگترین بعد محدوده قابل مشاهده صفحه محاسبه می کند.
نکته حائز اهمیت این است که تغییرات چیدمانی که در پاسخ به تعامل مستقیم کاربر (مانند کلیک روی دکمه یا تایپ در کادر جستجو) رخ می دهند، اگر در بازه زمانی 500 میلی ثانیه پس از تعامل اتفاق بیفتند، در محاسبه CLS لحاظ نمی شوند. این استثنا با پرچم hadRecentInput در API مشخص می شود تا تعاملات طبیعی کاربر جریمه نشوند.
دلایل اصلی ایجاد خطای CLS در وب سایت ها
شناسایی ریشه مشکل، اولین گام برای حل آن است. بر اساس تحلیل های فنی و داده های گوگل، چهار عامل اصلی بیشترین سهم را در ایجاد نمره CLS ضعیف دارند:
- تصاویر و ویدیوهای بدون ابعاد مشخص: زمانی که تگ های img یا video فاقد ویژگی های width و height باشند، مرورگر نمی تواند فضای مورد نیاز آن ها را قبل از بارگذاری کامل اختصاص دهد. به محض لود شدن رسانه، محتوای پایین تر به ناگهان به پایین هل داده می شود.
- فونت های وب سفارشی (Web Fonts): پدیده ای که به نام FOIT (Flash of Invisible Text) یا FOUT (Flash of Unstyled Text) شناخته می شود. زمانی که فونت اصلی با تاخیر بارگذاری می شود، مرورگر ابتدا متن را با فونت پیش فرض سیستم نمایش می دهد و پس از دانلود فونت اصلی، چیدمان متن به دلیل تفاوت در ارتفاع و عرض حروف، تغییر می کند.
- تبلیغات، امبدها و آی فریم های بدون سایز: بنرهای تبلیغاتی یا ویجت های شبکه های اجتماعی که به صورت داینامیک و بدون داشتن یک فضای از پیش تعیین شده (Reserved Space) در صفحه تزریق می شوند، از شایع ترین عوامل پرش صفحه هستند.
- محتوای پویا و تزریق ناگهانی المان ها: نمایش ناگهانی نوارهای اعلان، کوکی بانرها، یا فرم های اشتراک خبرنامه در بالای صفحه بدون در نظر گرفتن فضای آن ها، باعث جابه جایی کل محتوای اصلی می شود.
راهنمای گام به گام رفع و بهینه سازی CLS
برای کاهش امتیاز CLS و رسیدن به محدوده مطلوب، باید تغییرات ساختاری و کدنویسی دقیقی را در وب سایت اعمال کنید. راهکارهای زیر بر اساس استانداردهای توسعه وب و توصیه های گوگل ارائه شده اند:
اقدامات فوری و حیاتی برای توسعه دهندگان
- تعیین ابعاد ذاتی برای رسانه ها: همیشه از ویژگی های width و height در تگ های HTML تصاویر و ویدیوها استفاده کنید. در CSS مدرن، استفاده از ویژگی aspect-ratio نیز به مرورگر اجازه می دهد تا قبل از بارگذاری منبع، نسبت ابعاد را محاسبه و فضای خالی را رزرو کند.
- بهینه سازی فونت های وب: از دستور CSS به صورت font-display: swap استفاده کنید تا متن فوراً با فونت سیستم نمایش داده شود و پس از بارگذاری فونت اصلی، جایگزین گردد. همچنین می توانید فونت های حیاتی را با استفاده از تگ link و مقدار rel=preload در بخش head صفحه پیش بارگذاری کنید.
- رزرو فضای ثابت برای محتوای داینامیک: برای کانتینرهای تبلیغاتی یا ویجت ها، حداقل ارتفاع (min-height) مشخصی را در CSS تعریف کنید تا حتی قبل از لود شدن محتوا، فضای آن ها در صفحه اشغال شده باشد.
- استفاده از انیمیشن های مبتنی بر Transform: برای حرکات بصری، به جای تغییر ویژگی هایی مانند top، left، width یا height که باعث reflow و تغییر چیدمان می شوند، از ویژگی transform (مانند translate یا scale) استفاده کنید. این ویژگی ها فقط روی لایه کامپوزیت مرورگر اعمال می شوند و باعث جابه جایی سایر عناصر نمی گردند.
بهترین ابزارها برای اندازه گیری و پایش CLS
برای بهینه سازی، ابتدا باید بتوانید مشکل را به دقت اندازه گیری کنید. ابزارهای زیر ترکیبی از داده های میدانی (Real User Monitoring) و داده های آزمایشگاهی (Lab Data) را ارائه می دهند:
جدول راهنمای امتیازدهی CLS گوگل
گوگل برای یکپارچه سازی ارزیابی ها، بازه های امتیازی مشخصی را برای CLS تعریف کرده است. هدف نهایی هر وب سایتی باید قرار گرفتن در محدوده خوب باشد.
0.0 تا 0.1
خوب (Good)
پایداری بصری عالی و تجربه کاربری روان
0.1 تا 0.25
نیاز به بهبود (Needs Improvement)
پرش های جزئی که نیاز به بهینه سازی دارند
بیشتر از 0.25
ضعیف (Poor)
پرش های شدید و آزاردهنده برای کاربر
سوالات متداول درباره CLS
آیا CLS بر رتبه سایت در گوگل تاثیر مستقیم دارد؟
بله، از زمانی که گوگل معیارهای Core Web Vitals را به عنوان فاکتور رتبه بندی معرفی کرد، CLS به طور مستقیم بر جایگاه سایت در نتایج جستجو تاثیر می گذارد. سایت هایی با CLS بالا ممکن است در مقایسه با رقبای دارای پایداری بصری بهتر، رتبه پایین تری کسب کنند.
تفاوت CLS در موبایل و دسکتاپ چیست؟
معمولاً امتیاز CLS در دستگاه های موبایل بدتر از دسکتاپ است. دلیل این امر محدودیت فضای صفحه نمایش، سرعت پردازش پایین تر و شبکه های ناپایدارتر در موبایل است که باعث می شود عناصر دیرتر بارگذاری شده و پرش بیشتری ایجاد کنند. گوگل برای ارزیابی نهایی، اولویت را به داده های موبایل می دهد.
آیا استفاده از Lazy Loading باعث افزایش CLS می شود؟
اگر Lazy Loading به درستی پیاده سازی نشود، بله. اگر برای تصاویر پایین صفحه ابعاد مشخص تعیین نکنید، هنگامی که کاربر اسکرول می کند و تصویر شروع به بارگذاری می کند، محتوای اطراف آن جابه جا می شود. راه حل، تعیین همیشه ابعاد width و height یا استفاده از aspect-ratio در CSS است، حتی برای تصاویری که با تاخیر لود می شوند.
جمع بندی
شاخص CLS یا Cumulative Layout Shift دیگر یک مفهوم فرعی در توسعه وب نیست، بلکه یکی از ستون های اصلی تجربه کاربری و سئو تکنیکال محسوب می شود. پرش ناگهانی عناصر نه تنها باعث ناامیدی کاربران و افزایش نرخ پرش می شود، بلکه به طور مستقیم توسط الگوریتم های گوگل جریمه می گردد.
برای دستیابی به یک وب سایت حرفه ای و بهینه، لازم است توسعه دهندگان و مدیران سایت به طور منظم امتیاز CLS را با ابزارهایی مانند PageSpeed Insights و Search Console پایش کنند. با اجرای راهکارهای ساده اما حیاتی مانند تعیین ابعاد دقیق برای رسانه ها، رزرو فضا برای محتوای پویا و بهینه سازی فونت های وب، می توانید پایداری بصری سایت خود را تضمین کرده و جایگاه بهتری در نتایج جستجو کسب نمایید. به یاد داشته باشید که یک تجربه کاربری روان، همیشه بهترین استراتژی سئو است.