Cumulative Layout Shift (CLS) یکی از معیارهای اصلی در سنجش تجربه کاربری وبسایتها است که توسط گوگل به عنوان بخشی از Core Web Vitals معرفی شده است و روی بهینه سازی سایت و یا سئو تاثیر زیادی دارد. این معیار به بررسی تغییرات ناخواسته در چیدمان و محتوای صفحات وب در طول بارگذاری میپردازد. وقتی که المانهای صفحه وب به طور غیرمنتظره جابجا میشوند، مانند تصاویر یا متنهایی که بعد از بارگذاری محتوای صفحه تغییر موقعیت میدهند، این موضوع باعث تجربه ناخوشایند برای کاربر میشود.
CLS بهویژه برای صفحات موبایل اهمیت بیشتری دارد زیرا در این دستگاهها کاربران به سرعت به تعامل با صفحه میپردازند. به عنوان مثال، تصور کنید که در حال خواندن یک مقاله هستید و ناگهان، قبل از اینکه بتوانید روی لینک یا دکمهای کلیک کنید، صفحه به طور ناگهانی جابجا میشود. این نوع مشکلات میتواند تجربه کاربری را به شدت کاهش دهد و در نتیجه باعث ریزش کاربران از صفحه شود.
این معیار برای اندازهگیری کیفیت تجربه کاربری طراحی شده است و هدف آن کاهش مشکلاتی است که در اثر بارگذاری تدریجی و غیرقابل پیشبینی اجزای صفحه ایجاد میشوند. CLS با استفاده از تحلیلهای دقیق این تغییرات را شبیهسازی کرده و پیشنهادات برای بهبود آنها ارائه میدهد تا صفحات وب به صورت روان و بدون وقفه برای کاربران بارگذاری شوند.
در این مقاله به بررسی اهمیت CLS، علل بروز آن، و روشهای مختلف برای بهبود CLS خواهیم پرداخت تا صفحات وب بتوانند تجربه کاربری بهتری را برای بازدیدکنندگان خود فراهم کنند.
یکی از معیارهای اصلی Core Web Vitals است که برای اندازهگیری ثبات بصری یک صفحه وب استفاده میشود. این معیار مقدار جابجایی غیرمنتظره عناصر صفحه هنگام بارگذاری را محاسبه میکند. CLS اهمیت زیادی دارد، زیرا جابجاییهای غیرمنتظره میتوانند تجربه کاربری ضعیفی ایجاد کنند، مثل کلیکهای اشتباهی یا دشواری در تعامل با صفحه.
نکات کلیدی درباره Cumulative Layout Shift
1. CLS چه چیزی را اندازهگیری میکند؟
- جابجاییهای غیرمنتظره چیدمان: حرکاتی که در چیدمان عناصر صفحه بدون هشدار رخ میدهد و تجربه کاربر را مختل میکند.
- نمونههایی از جابجاییها:
- دکمهای که پس از تلاش کاربر برای کلیک جابجا میشود.
- تبلیغاتی که با تأخیر بارگذاری شده و محتوا را به پایین میراند.
- تصویری که بدون تعریف ابعاد مشخص، باعث جابجایی سایر عناصر میشود.
2. تفاوت بین جابجاییهای مورد انتظار و غیرمنتظره:
- جابجاییهای مورد انتظار: این نوع جابجایی در نتیجه تعامل کاربر رخ میدهد.
مثلاً وقتی با کلیک روی آیکون جستجو، نوار ورودی گسترش مییابد. - جابجاییهای غیرمنتظره: معمولاً به دلیل محتوای شخص ثالث، تصاویر بدون ابعاد مشخص، یا محتوای پویا رخ میدهد.
مثلاً زمانی که یک تبلیغ بهطور ناگهانی ظاهر شده و باعث جابجایی سایر محتوا میشود.
اهمیت Cumulative Layout Shift در امتیاز عملکرد وبسایت
- CLS 25٪ از کل امتیاز عملکرد را تشکیل میدهد که نشاندهنده اهمیت بالای آن است.
- برخلاف برخی معیارهای دیگر که تنها سرعت بارگذاری را ارزیابی میکنند، CLS بر تجربه کاربری متمرکز است.
- CLS به لذت کاربر کمک میکند، زیرا تجربهای روان و بدون وقفه برای بازدیدکنندگان فراهم میکند.
- این معیار بخشی از مجموعه Web Vitals است که اهمیت آن را بیشتر برجسته میکند.
محدودههای امتیاز CLS:
- خوب (نیازی به تغییر نیست): CLS برابر یا کمتر از 0.1.
- قابل قبول، اما قابل بهبود: CLS بین 0.1 و 0.15.
- طولانیتر از حد توصیهشده: CLS بین 0.15 و 0.25.
- بسیار طولانیتر از حد توصیهشده: CLS برابر یا بیشتر از 0.25.
چگونه Cumulative Layout Shift را بهبود دهیم؟
بهبود CLS با استفاده از اقدامات استاندارد در توسعه وب امکانپذیر است. برخی از مهمترین راهکارها عبارتند از:
1) مشخص کردن ابعاد تصاویر و ویدئوها
- همیشه عرض و ارتفاع تصاویر و ویدئوهای وبسایت را تعریف کنید تا فضا بهدرستی برای آنها رزرو شود.
- همچنین میتوانید از جعبههای CSS با نسبت ابعاد استفاده کنید.
2) کاهش جابجاییهای ناشی از تبلیغات، محتواهای جاسازیشده و iframes
- اندازه اسلات تبلیغات (ترجیحاً بزرگترین اندازه) را قبل از بارگذاری کتابخانه تبلیغات مشخص کنید.
- تبلیغات را به پایین صفحه یا خارج از نمای کاربر منتقل کنید.
- در صورت نبود تبلیغ، از عناصر جایگزین استفاده کنید.
3) جلوگیری از اضافه کردن محتوای جدید بالای محتوای موجود
- از افزودن محتوای پویا (مثل بنرها یا فرمها) بالای محتوای موجود خودداری کنید، مگر اینکه این کار در پاسخ به تعامل کاربر باشد.
4) جلوگیری از مشکل Flash of Invisible Text (FOIT)
- برای جلوگیری از ناپدید شدن متن هنگام بارگذاری فونتها، از پیشبارگذاری فونتها یا ویژگی font-display استفاده کنید.
5) اجتناب از انیمیشنهای غیرترکیبی
- تا حد امکان از انیمیشنهای ترکیبی استفاده کنید تا بار روی رشته اصلی پردازش کاهش یافته و از بازسازی مجدد پیکسلها هنگام بارگذاری صفحه جلوگیری شود.
Cumulative Layout Shift (CLS) چگونه بر سئو و رتبهبندی سایت تأثیر میگذارد؟
به عنوان یکی از مهمترین معیارهای تجربه کاربری در سئو شناخته میشود که مستقیماً بر رتبهبندی صفحات وب در موتور جستجوی گوگل تأثیر میگذارد. با توجه به اینکه گوگل تجربه کاربری را به عنوان یکی از عوامل کلیدی در تعیین رتبهبندی سایتها معرفی کرده است، بهینهسازی CLS نه تنها برای بهبود تجربه کاربران، بلکه برای موفقیت در سئو و افزایش ترافیک سایت بسیار حیاتی است.
تأثیر CLS بر رتبهبندی گوگل
گوگل در سالهای اخیر معیارهای تجربه کاربری مانند CLS، Largest Contentful Paint (LCP) و First Input Delay (FID) را در الگوریتمهای رتبهبندی خود وارد کرده است. این بدان معناست که صفحات وب با CLS پایینتر (که نشاندهنده تغییرات کمتری در چیدمان صفحه هستند) شانس بیشتری برای رتبهبندی بالاتر در نتایج جستجو دارند. اگر CLS یک صفحه بالا باشد و باعث جابجایی ناگهانی محتوا شود، تجربه کاربری ضعیفتری ایجاد کرده و احتمالاً موجب کاهش ترافیک سایت خواهد شد.
تأثیر بر نرخ تبدیل (Conversion Rate)
یکی از عواملی که به طور غیرمستقیم بر سئو تأثیر میگذارد، نرخ تبدیل است. وقتی CLS بالا باشد و محتوا ناگهانی جابجا شود، ممکن است کاربران به راحتی از سایت خارج شوند و تجربه منفی ایجاد کنند. این موضوع باعث کاهش نرخ تبدیل میشود و در نتیجه گوگل این سیگنالهای منفی را شناسایی کرده و رتبه سایت را کاهش میدهد.
میزان تعامل و زمان ماندگاری در صفحه
صفحات با CLS پایینتر به طور معمول تجربه کاربری روانتری را فراهم میکنند و کاربران میتوانند با راحتی بیشتری با محتوای صفحه تعامل داشته باشند. این امر باعث افزایش زمان ماندگاری در صفحه و کاهش نرخ پرش (bounce rate) میشود که خود این دو عامل به طور مستقیم بر رتبهبندی در موتور جستجو تأثیر دارند.
پیشنهادات گوگل برای بهبود CLS
گوگل ابزارهایی مانند Google PageSpeed Insights و Lighthouse را برای ارزیابی و تحلیل CLS در اختیار وبمستران قرار داده است. این ابزارها میتوانند به شناسایی مشکلات موجود در صفحه که باعث افزایش CLS میشوند، کمک کنند و راهکارهایی برای بهبود آن ارائه دهند. بهعنوان مثال، استفاده از اندازههای ثابت برای تصاویر، بارگذاری غیرهمزمان منابع و استفاده از ویژگیهای CSS مانند font-display میتواند از جابجاییهای ناخواسته جلوگیری کند.
نتیجهگیری
برای اینکه یک سایت بتواند در نتایج جستجو عملکرد خوبی داشته باشد، باید به تجربه کاربری توجه ویژهای داشته باشد. CLS یکی از فاکتورهای مهم در این زمینه است که تأثیر زیادی بر سئو و رتبهبندی سایت دارد. بهبود CLS نه تنها تجربه کاربری را ارتقا میدهد بلکه میتواند به بهبود رتبه سایت و افزایش ترافیک و نرخ تبدیل کمک کند. بنابراین، وبمستران باید همواره از ابزارهای گوگل برای تحلیل و بهینهسازی CLS استفاده کنند و به استانداردهای تجربه کاربری توجه داشته باشند.
