اگر حتی کمی با دنیای سئو و بهینهسازی سایت آشنا باشید، احتمالاً نام Core Web Vitals به گوشتان خورده است. گوگل در سالهای اخیر تمرکز ویژهای روی تجربه کاربری (UX) گذاشته و معیارهایی را معرفی کرده که مستقیماً کیفیت تجربه کاربر از یک وبسایت را اندازهگیری میکنند. یکی از مهمترین و در عین حال کمتر درکشدهترین این معیارها، CLS یا Cumulative Layout Shift است.
در این مقاله قرار است بهصورت کاملاً روان، انسانی و کاربردی بررسی کنیم که CLS چیست، چرا اهمیت دارد، چه تأثیری بر سئو میگذارد و اصلاً چرا گوگل تا این حد به آن حساس است. اگر صاحب سایت هستید، تولیدکننده محتوا هستید یا در حوزه طراحی و توسعه وب فعالیت میکنید، درک CLS میتواند نگاه شما را به تجربه کاربری بهطور جدی تغییر دهد.
CLS چیست؟ (تعریف ساده و قابلدرک)
CLS مخفف Cumulative Layout Shift است و به زبان ساده یعنی:
«میزان جابهجایی غیرمنتظره المانهای صفحه هنگام بارگذاری یا تعامل کاربر»
حتماً برایتان پیش آمده که وارد یک سایت شوید، بخواهید روی یک لینک یا دکمه کلیک کنید، اما ناگهان صفحه تکان بخورد و بهاشتباه روی چیز دیگری کلیک کنید.
یا در حال خواندن یک متن باشید و ناگهان متن به پایین پرتاب شود چون یک تصویر، تبلیغ یا فونت تازه لود شده است.
این دقیقاً همان چیزی است که CLS اندازهگیری میکند.
CLS نشان میدهد که صفحه شما تا چه حد پایدار است یا برعکس، چقدر در طول بارگذاری یا استفاده کاربر «میلرزد».
چرا گوگل CLS را مهم میداند؟
برای درک اهمیت CLS، باید از زاویه دید گوگل به موضوع نگاه کنیم.
هدف اصلی گوگل فقط نمایش لینکها نیست؛
هدفش این است که کاربر بهترین تجربه ممکن را داشته باشد.
حالا تصور کنید:
-
کاربر وارد سایت شما میشود
-
میخواهد ثبتنام کند یا محصولی بخرد
-
اما صفحه مدام جابهجا میشود
-
دکمهها زیر انگشتش فرار میکنند
-
متن از جلوی چشمش میپرد
نتیجه چیست؟
-
عصبانیت کاربر
-
افزایش نرخ پرش (Bounce Rate)
-
کاهش اعتماد
-
ترک سایت
گوگل دقیقاً میخواهد چنین سایتهایی را شناسایی کند و امتیاز کمتری بدهد. به همین دلیل، CLS بهعنوان یکی از سه ستون اصلی Core Web Vitals معرفی شد.
Core Web Vitals و جایگاه CLS در آن
Core Web Vitals شامل سه معیار اصلی است:
-
LCP (Largest Contentful Paint)
→ سرعت نمایش محتوای اصلی صفحه -
FID / INP (First Input Delay / Interaction to Next Paint)
→ سرعت پاسخگویی به تعامل کاربر -
CLS (Cumulative Layout Shift)
→ میزان پایداری بصری صفحه
اگر بخواهیم خیلی خلاصه بگوییم:
-
LCP = صفحه چقدر سریع دیده میشود؟
-
INP = صفحه چقدر سریع واکنش نشان میدهد؟
-
CLS = صفحه چقدر آرام و بدون پرش است؟
CLS چگونه اندازهگیری میشود؟
CLS یک عدد است، نه یک احساس یا قضاوت ذهنی.
این عدد مجموع تمام جابهجاییهای غیرمنتظره در طول عمر صفحه را نشان میدهد.
بازههای امتیاز CLS از دید گوگل:
-
✅ خوب (Good): کمتر از 0.1
-
⚠️ نیاز به بهبود: بین 0.1 تا 0.25
-
❌ ضعیف (Poor): بیشتر از 0.25
هرچه عدد CLS به صفر نزدیکتر باشد، یعنی صفحه شما پایدارتر و تجربه کاربری بهتر است.
جابهجایی غیرمنتظره یعنی چه؟
نکته مهم اینجاست که هر جابهجاییای بد نیست.
اگر:
-
کاربر روی دکمهای کلیک کند
-
یا خودش اسکرول کند
-
یا فرمی باز شود که انتظارش را دارد
اینها جزو CLS حساب نمیشوند.
CLS فقط به جابهجاییهایی حساس است که:
-
بدون دخالت کاربر اتفاق میافتند
-
قابل پیشبینی نیستند
-
تمرکز کاربر را به هم میزنند
مثالهای واقعی از CLS بد
برای اینکه موضوع کاملاً ملموس شود، چند مثال واقعی را بررسی کنیم:
1. تصاویر بدون تعیین ابعاد
تصویری در صفحه دارید، اما width و height مشخص نکردهاید.
مرورگر نمیداند چقدر فضا باید برای آن رزرو کند.
نتیجه؟
بعد از لود تصویر، کل صفحه جابهجا میشود.
2. تبلیغات ناگهانی
تبلیغی که بدون رزرو فضا، وسط محتوا ظاهر میشود و متن را به پایین هل میدهد.
یکی از بزرگترین قاتلهای CLS همین تبلیغات هستند.
3. فونتهای وب (Web Fonts)
وقتی ابتدا فونت پیشفرض نمایش داده میشود و بعد فونت اصلی لود میشود، اندازه متن تغییر میکند و صفحه میلرزد.
4. المانهایی که دیر لود میشوند
مثل بنرها، اسلایدرها یا ویدیوهایی که بعد از لود اولیه ظاهر میشوند.
تأثیر مستقیم CLS بر سئو
اینجا به سؤال مهم میرسیم:
آیا CLS واقعاً روی رتبه سایت تأثیر دارد؟
پاسخ کوتاه: بله، اما نه بهتنهایی.
گوگل بارها گفته که:
-
Core Web Vitals فاکتور رتبهبندی هستند
-
اما جای محتوای باکیفیت را نمیگیرند
با این حال:
-
وقتی چند سایت محتوای مشابه دارند
-
سایتی که CLS بهتری دارد، شانس بیشتری برای رتبه بهتر دارد
-
مخصوصاً در موبایل
بهعبارت دیگر:
CLS یک مزیت رقابتی است، نه معجزه.
CLS و تجربه کاربری (UX)
حتی اگر سئو را کنار بگذاریم،
CLS مستقیماً روی احساس کاربر نسبت به برند شما اثر میگذارد.
سایتی که:
-
آرام لود میشود
-
بدون پرش است
-
قابل پیشبینی رفتار میکند
ناخودآگاه حس:
-
حرفهای بودن
-
اعتماد
-
کیفیت بالا
را منتقل میکند.
در مقابل، سایتی با CLS بالا شبیه مغازهای است که زمینش لق میزند!
دلایل اصلی بالا بودن CLS در سایتها
واقعیت این است که بیشتر سایتها CLS بالایی ندارند چون «بد طراحی شدهاند»، بلکه چون جزئیات فنی مهمی نادیده گرفته شدهاند. بیایید مهمترین دلایل را بررسی کنیم:
1. تصاویر و ویدیوها بدون تعیین ابعاد مشخص
این مورد، شایعترین علت CLS است.
وقتی برای تصویر یا ویدیو:
-
width
-
height
یا نسبت ابعاد (aspect ratio)
مشخص نشده باشد، مرورگر نمیداند چه فضایی باید رزرو کند.
در نتیجه وقتی تصویر لود میشود، صفحه ناگهان جابهجا میشود.
این اتفاق مخصوصاً در:
-
مقالات وبلاگی
-
فروشگاههای اینترنتی
-
لندینگ پیجها
بسیار رایج است.
2. تبلیغات و بنرهای داینامیک
تبلیغاتی که:
-
بعد از لود صفحه ظاهر میشوند
-
فضای از قبل رزرو نشدهای دارند
-
وسط محتوا قرار میگیرند
تقریباً همیشه باعث CLS بالا میشوند.
گوگل خودش هم بارها به ناشران هشدار داده که تبلیغات بدون فضای رزرو شده، تجربه کاربری را نابود میکنند.
3. فونتهای وب (Web Fonts)
یکی از مواردی که خیلیها به آن توجه نمیکنند.
فرآیند معمول:
-
صفحه با فونت پیشفرض لود میشود
-
فونت اصلی سایت دیرتر لود میشود
-
اندازه و فاصله متن تغییر میکند
-
کل صفحه تکان میخورد
این اتفاق بهخصوص در زبان فارسی، به دلیل تفاوت زیاد فونتها، اثر شدیدتری دارد.
4. محتوای داینامیک که بدون اطلاع اضافه میشود
مثل:
-
پیامهای کوکی
-
نوارهای تخفیف
-
پاپآپهای اطلاعرسانی
-
پیشنهاد عضویت
اگر این عناصر بالای محتوا یا وسط آن ظاهر شوند، تقریباً قطعاً CLS ایجاد میکنند.
5. استفاده نادرست از انیمیشنها و Transitionها
انیمیشنهایی که:
-
روی position یا height اجرا میشوند
-
باعث جابهجایی عناصر اطراف میشوند
بهجای اینکه زیبا باشند، تجربه کاربر را مختل میکنند.
راهکارهای عملی و مؤثر برای کاهش CLS
حالا برسیم به مهمترین بخش: چطور CLS را درست کنیم؟
1. همیشه برای تصاویر و ویدیوها فضا رزرو کن
بهترین کار:
-
مشخص کردن width و height
-
یا استفاده از aspect-ratio در CSS
این کار باعث میشود مرورگر از قبل بداند چه فضایی قرار است اشغال شود.
حتی اگر تصویر دیر لود شود، صفحه دیگر نمیپرد.
2. برای تبلیغات، جای ثابت تعریف کن
اگر از تبلیغات استفاده میکنی:
-
فضای مشخص و ثابت براش در نظر بگیر
-
اجازه نده تبلیغ وسط متن ظاهر شود
-
تبلیغ را به پایین صفحه یا بین بخشهای مشخص منتقل کن
به زبان ساده:
تبلیغ باید در فضای خودش باشد، نه وسط نفس کشیدن محتوا!
3. مدیریت درست فونتها
چند راهکار بسیار مؤثر:
-
استفاده از
font-display: swapیاoptional -
استفاده از فونتهای سیستم در صورت امکان
-
preload کردن فونتهای اصلی
این کار باعث میشود تغییر ناگهانی اندازه متن کمتر شود یا اصلاً اتفاق نیفتد.
4. پیامها و نوارهای اطلاعرسانی را هوشمندانه نمایش بده
اگر لازم است:
-
پیام کوکی
-
نوار تخفیف
-
اطلاعیه مهم
نمایش داده شود:
-
بهتر است بهصورت overlay باشد
-
یا پایین صفحه ظاهر شود
-
نه اینکه محتوای اصلی را به پایین هل بدهد
5. از انیمیشنهای امن استفاده کن
بهجای تغییر:
-
height
-
width
-
top / left
از اینها استفاده کن:
-
transform
-
opacity
اینها باعث جابهجایی چیدمان صفحه نمیشوند و CLS ایجاد نمیکنند.
چگونه CLS سایت را اندازهگیری کنیم؟
برای بررسی CLS خوشبختانه ابزارهای خوبی وجود دارد:
1. Google Search Console
در بخش:
Core Web Vitals
میتوانی:
-
صفحات با CLS ضعیف
-
نیازمند بهبود
-
و خوب
را بهصورت واقعی (بر اساس داده کاربران واقعی) ببینی.
2. PageSpeed Insights
یکی از بهترین ابزارها برای تحلیل CLS.
مزایا:
-
نمایش CLS واقعی (Field Data)
-
نمایش CLS آزمایشی (Lab Data)
-
ارائه پیشنهادهای دقیق برای بهبود
3. Lighthouse (در Chrome DevTools)
برای بررسی سریع و فنی بسیار مناسب است، مخصوصاً برای توسعهدهندهها.
اشتباهات رایج در برخورد با CLS
خیلی از سایتها تلاش میکنند CLS را کم کنند، اما ناخواسته اشتباه میکنند:
-
فقط تمرکز روی نمره ابزارها، نه تجربه واقعی کاربر
-
حذف کامل تبلیغات بهجای مدیریت درست آنها
-
استفاده افراطی از Skeletonها بدون طراحی اصولی
-
نادیده گرفتن CLS در موبایل (در حالی که اهمیتش بیشتر است)
CLS در موبایل؛ حساستر از دسکتاپ
نکته بسیار مهم:
CLS در موبایل تأثیر بسیار بیشتری دارد.
چرا؟
-
صفحه کوچکتر است
-
هر جابهجایی شدیدتر حس میشود
-
لمس اشتباه راحتتر اتفاق میافتد
به همین دلیل، گوگل دادههای موبایل را اولویت میدهد.
جمعبندی نهایی: چرا CLS را جدی بگیریم؟
CLS فقط یک عدد در ابزارهای گوگل نیست.
CLS یعنی:
-
احترام به تمرکز کاربر
-
ساخت تجربهای آرام و قابل اعتماد
-
جلوگیری از عصبانیتهای کوچک اما مخرب
از نگاه سئو:
-
CLS یک فاکتور رتبهبندی است
-
در رقابتهای نزدیک، برگ برنده محسوب میشود
-
مستقیماً روی رفتار کاربر اثر میگذارد
اگر بخواهیم همه چیز را در یک جمله خلاصه کنیم:
سایتی که نمیلرزد، هم کاربر را نگه میدارد هم گوگل را راضی میکند.
اگر دوست داری، میتوانم:
-
این محتوا را سئو شدهتر کنم
-
تیترها را به سبک بلاگ یا لندینگ پیج بازنویسی کنم
-
یا مخصوص وردپرس / فروشگاه اینترنتی شخصیسازیاش کنم
