در شرایطی که بسیاری از کاربران در کمتر از 3 ثانیه تصمیم خود را برای ماندن یا خروج از یک سایت میگیرند، CLS میتواند تفاوت بزرگی در موفقیت یا شکست یک سایت شما ایجاد کند. اما CLS چیست و چگونه میتواند بر افزایش تعداد کاربران و بهبود تجربه کاربری آنها تاثیر داشته باشد؟ در این مطلب به طور کامل به بررسی پاسخ این سوالها میپردازیم.
CLS چیست؟
برای درک دقیق اینکه CLS چیست باید با مفهوم Core Web Vitals آشنا شویم. گوگل برای سنجش کیفیت تجربه کاربری سه معیار اصلی دارد که یکی از مهمترین آنها Cumulative Layout Shift است. Cumulative Layout Shift به مجموع تغییر مکانهای ناگهانی عناصر صفحه هنگام بارگذاری گفته میشود.
اگر هنگام خواندن متن، تصویر یا تبلیغ ناگهان پایین بیاید، امتیاز CLS افزایش پیدا میکند. معنی CLS در سئو به ثبات بصری صفحه مربوط است. وقتی کاربر روی دکمهای میخواهد کلیک کند و همان لحظه عنصر جابهجا شود، احتمال خطا بالا میرود. گوگل این رفتار را نشانه تجربه کاربری ضعیف میداند.
بنابراین CLS به زبان ساده معیاری برای اندازهگیری آرام بودن صفحه هنگام لود است. شاخص CLS گوگل نشان میدهد سایت تا چه اندازه از نظر بصری پایدار عمل میکند. اگر سایت شما مرتبا تکان بخورد، الگوریتم تجربه صفحه امتیاز منفی میدهد. در موبایل اهمیت CLS بیشتر دیده میشود، چون صفحه کوچک است و کوچکترین جابهجایی به چشم میآید. به همین دلیل گوگل نسخه موبایل را معیار اصلی ارزیابی قرار داده است.
با توجه به نقش CLS در رتبه گوگل سایت، معمولا در آموزش سئو به این معیار توجه ویژهای میشود.
نحوه محاسبه CLS
برای درک بهتر این شاخص، لازم است بدانیم CLS چگونه محاسبه میشود. همانطور که در بررسی معیارهای تجربه صفحه کنار موضوعاتی مثل LCP چیست؟ مطرح میشود، گوگل تلاش میکند کیفیت واقعی نمایش صفحه را اندازهگیری کند.
امتیاز هر جابهجایی چگونه تعیین میشود
هرگاه عنصری در صفحه بدون تعامل کاربر (مانند کلیک یا اسکرول) بهطور ناگهانی جابهجا شود، گوگل دو مقدار را در نظر میگیرد و آنها را در هم ضرب میکند. مقدار اول، ضریب تأثیر (Impact Fraction) نام دارد که نشان میدهد چه نسبتی از ناحیه قابل مشاهده صفحه (viewport) تحت تأثیر این جابهجایی قرار گرفته است.
مقدار دوم، ضریب فاصله (Distance Fraction) است که میزان جابهجایی عنصر را نسبت به ارتفاع viewport اندازهگیری میکند. برای مثال اگر نیمی از صفحه تحت تأثیر باشد و عنصر مورد نظر ۲۵ درصد ارتفاع viewport جابهجا شود، امتیاز آن جابهجایی برابر با ۰٫۵ × ۰٫۲۵ یعنی ۰٫۱۲۵ خواهد بود. تنها جابهجاییهای غیرمنتظره و بدون دخالت کاربر در این محاسبه وارد میشوند.
CLS نهایی صفحه به چه صورت محاسبه میگردد
گوگل امتیازهای جابهجایی را بهصورت ساده جمع نمیکند. در عوض، این جابهجاییها را در پنجرههای زمانی کوتاه (session window) گروهبندی مینماید. هر پنجره معمولا با یک جابهجایی آغاز میشود، حداکثر ۵ ثانیه ادامه مییابد و اگر بیش از ۱ ثانیه جابهجایی جدیدی رخ ندهد، پایان میپذیرد.
امتیاز هر پنجره برابر است با مجموع امتیازهای جابهجاییهای داخل آن. در نهایت، مقدار CLS صفحه برابر با بالاترین امتیاز میان تمام پنجرههای زمانی در طول عمر کامل صفحه خواهد بود. این روش از سال ۲۰۲۱ اعمال شده تا تمرکز بر بدترین لحظه بارگذاری باشد و محاسبه دقیقتر و منصفانهتری ارائه دهد. ابزارهایی مانند PageSpeed Insights و Lighthouse دقیقا از همین فرمول برای گزارش CLS استفاده میکنند.
مقدار بهینه CLS
بنا بر آمار گوگل، اگر CLS صفحه کمتر از ۰٫۱ باشد، این امتیاز بسیار مناسب است. یعنی در بیشتر مواقع (حداقل ۷۵ درصد بازدیدها) صفحه تقریبا هیچ جابهجایی ناگهانی ندارد و کاربر احساس راحتی میکند. اگر این میزان بین ۰٫۱ تا ۰٫۲۵ باشد، متوسط است و بهتر است تلاش برای کاهش این میزان انجام شود. ولی اگر امتیاز CLS بیشتر از ۰٫۲۵ شود، وضعیت صفحه مناسب نیست و گوگل سایت را ضعیف میبیند، رتبه آن پایینتر میآید و خیلی از بازدیدکنندهها هم سریع صفحه را میبندند. پس هدف اصلی این است که CLS را زیر ۰٫۱ بیاوریم، مخصوصا روی گوشی که مردم بیشتر اذیت میشوند.
معیارهای سنجش CLS
دو راه اصلی برای فهمیدن مقدار CLS وجود دارد: یکی دادههای واقعی مردم (یعنی گوگل از تجربه میلیونها کاربر واقعی که با کروم وارد سایت تو میشوند، میانگین میگیرد). این اطلاعات را میتوانید در ابزار PageSpeed Insights یا بخش Core Web Vitals در سرچ کنسول گوگل ببینید.
راه دوم، تست مصنوعی است؛ یعنی کامپیوتر گوگل صفحه را باز میکند و میبیند چقدر جابهجا میشود (مثل Lighthouse داخل مرورگر کروم یا همان PageSpeed Insights در بخش شبیهسازی). گوگل بیشتر به دادههای واقعی اهمیت میدهد، ولی تست مصنوعی هم بسیار کمک میکند که متوجه شوید مشکل کجاست و به سرعت برای رفع آن اقدام نمایید.
روشهای بهینهسازی CLS
برای اینکه صفحه کمتر جابهجا شود و امتیاز CLS سایت افزایش یابد، بهتر است به موارد زیر توجه کنید:
- حتما برای تصاویر و ویدئوها ابعاد دقیق (عرض و ارتفاع) را در کد HTML مشخص کنید (مثلا width=600 height=400). این کار باعث میشود مرورگر از همان ابتدا فضای لازم را رزرو کند و از جابهجایی ناگهانی جلوگیری شود.
- در صورت استفاده از فونتهای سفارشی، از ویژگی font-display: swap استفاده کنید تا تا زمان بارگذاری فونت اصلی، فونت جایگزین (fallback) نمایش داده شود و متن ناگهان تغییر اندازه ندهد.
- برای تبلیغات، بنرها یا بخشهایی که محتوای آنها با تأخیر بارگذاری میشود، از قبل یک کانتینر (container) با ارتفاع ثابت تعریف کنید تا فضای مورد نیاز حفظ شود و صفحه تکان نخورد. مثلا اگر از سرور مجازی با سرعت بالا استفاده میکنید، این کار با ترکیب سرعت بارگذاری و رزرو فضا، تأثیر دوچندانی در کاهش CLS خواهد داشت.
- انیمیشنها و تغییرات ظاهری را با استفاده از ویژگیهای CSS مانند transform یا opacity انجام دهید، نه با تغییر موقعیت (position) یا حاشیهها، تا جابهجایی عناصر رخ ندهد.
- عناصری مانند ابزارهای چت آنلاین، پنجرههای پاپآپ یا ویدئوهایی که با تأخیر بارگذاری میشوند را به گونهای طراحی و پیادهسازی کنید که تنها پس از بارگذاری کامل محتوای اصلی صفحه نمایش داده شوند.
پس از اعمال هر یک از این تغییرات، پیشنهاد میشود صفحه را مجددا با ابزار PageSpeed Insights بررسی کنید. معمولا با اجرای چند مورد از این راهکارها، امتیاز CLS به زیر ۰٫۱ میرسد و تجربه کاربری سایت شما به طور قابل توجهی بهبود مییابد.
تأثیر CLS بر سئوی سایت
CLS یکی از معیارهای مهم گوگل است که مستقیما روی تجربه کاربری تأثیر میگذارد و گوگل از سال ۲۰۲۱ آن را به عنوان بخشی از سیگنالهای رتبهبندی سایت در نظر میگیرد. اگر صفحه شما جابهجاییهای زیادی داشته باشد، نه تنها کاربران ناراضی میشوند، بلکه شانس دیده شدن سایت در نتایج جستجو هم کمتر خواهد شد.
CLS چطور مستقیما روی رتبه سایت اثر میگذارد؟
از سال ۲۰۲۱ گوگل سه معیار اصلی تجربه کاربری (Core Web Vitals) را به الگوریتم رتبهبندی اضافه کرد که یکی از آنها CLS است. اگر CLS صفحه شما خوب نباشد (یعنی بیشتر از ۰٫۱)، گوگل سایت را از نظر کیفیت تجربه کاربری ضعیف میبیند. در نتیجه، حتی اگر محتوای سایت عالی باشد، ممکن است در نتایج جستجو پایینتر قرار بگیرد. این تأثیر بهخصوص در جستجوهای موبایل بیشتر دیده میشود، چون جابهجاییها روی گوشی آزاردهندهتر هستند و کاربران سریعتر صفحه را ترک میکنند.
تأثیر غیرمستقیم CLS روی سئو چیست؟
در کنار نقش مستقیم CLS بر سئو سایت، این ویژگی تاثیرات غیر مستقیمی نیز دارد. CLS بالا باعث میشود کاربران زود صفحه را ببندند (نرخ پرش بالا میرود)، زمان ماندگاری روی صفحه کم میشود و احتمال کلیک روی لینکهای دیگر سایت هم کاهش پیدا میکند. همه اینها سیگنالهای منفی برای گوگل هستند. وقتی کاربران از سایت شما راضی نباشند، گوگل هم کمتر آن را به بقیه پیشنهاد میدهد. در نتیجه، حتی بدون تغییر مستقیم در رتبه، ترافیک ارگانیک سایت کم میشود و رقابت با سایتهای رقیب سختتر خواهد شد.
جمع بندی
CLS یا جابهجایی عناصر صفحه یکی از معیارهای مهم تجربه کاربری است که Google به آن توجه میکند. وقتی امتیاز آن کمتر از ۰٫۱ باشد، صفحه پایدار دیده میشود و کاربر راحتتر در سایت میماند. همین موضوع به بهتر شدن رتبه جستجو کمک میکند. با تعیین اندازه تصاویر، مشخص کردن جای تبلیغات و مدیریت فونتها میتوان این مشکل را برطرف کرد و بازدید طبیعی سایت را افزایش داد.
سوالات متداول
CLS چیست؟
CLS یا Cumulative Layout Shift به معنای جابهجایی تجمعی عناصر صفحه است. یعنی چقدر متن، عکس، دکمه یا تبلیغ موقع باز شدن صفحه یا کار کردن با آن ناگهانی جابهجا میشود و کاربر را اذیت میکند. این یکی از سه معیار اصلی گوگل برای سنجش کیفیت تجربه کاربری است.
CLS خوب چند است؟
CLS خوب کمتر از ۰٫۱ است. یعنی در حداقل ۷۵ درصد بازدیدها صفحه تقریبا هیچ جابهجایی ناگهانی نداشته باشد. اگر بیشتر از ۰٫۲۵ شود وضعیت ضعیف است و گوگل سایت را پایینتر نشان میدهد.
CLS چطور روی سئو تأثیر میگذارد؟
CLS بالا باعث میشود گوگل سایت را از نظر تجربه کاربری ضعیف ببیند و رتبهاش را پایین بیاورد. همچنین کاربران زودتر صفحه را ترک میکنند، نرخ پرش بالا میرود و ترافیک ارگانیک کمتر میشود.
چرا CLS در موبایل مهمتر است؟
در گوشی صفحه کوچک است و کوچکترین جابهجایی (مثل پایین آمدن ناگهانی متن) خیلی به چشم میآید و کاربر را کلافه میکند. گوگل هم بیشتر نسخه موبایل را برای ارزیابی CLS در نظر میگیرد، پس سایتهایی که در موبایل پایدار نیستند، ضرر بیشتری میبینند.
چگونه میتوان CLS را سریع پایین آورد؟
برای همه عکسها و ویدئوها عرض و ارتفاع را در کد HTML مشخص کنید، جای تبلیغات را از قبل رزرو کنید و فونتها را طوری تنظیم کنید که متن اول تکان نخورد. معمولا با این چند تغییر کوچک، CLS به زیر ۰٫۱ میرسد.
