CLS چیست؟ راهنمای جامع بهینه سازی Cumulative Layout Shift برای سئو و تجربه کاربری

فرض کنید در حال مطالعه یک مقاله جذاب در مورد آموزش سئو هستید. به یک پاراگراف مهم می رسید و قصد دارید روی یک لینک داخلی کلیک کنید. درست در لحظه ای که انگشت یا نشانگر ماوس شما به سمت هدف حرکت می کند، ناگهان یک بنر تبلیغاتی بزرگ یا یک تصویر با تاخیر بارگذاری شده، از بالای صفحه به پایین هل داده می شود. محتوای مورد نظر شما به پایین جابجا شده و شما به جای لینک، روی تبلیغ کلیک می کنید.

این سناریوی آزار دهنده، که برای همه ما بارها اتفاق افتاده، دقیقاً همان چیزی است که CLS یا Cumulative Layout Shift (جابجایی تجمعی چیدمان) آن را اندازه گیری می کند. این جابجایی ناخواسته عناصر بصری صفحه، نه تنها تجربه کاربری را به شدت تخریب می کند، بلکه از سال ۲۰۲۱ به عنوان یکی از سه معیار اصلی Core Web Vitals، مستقیماً بر رتبه بندی سایت شما در گوگل تاثیر می گذارد.

هدف ما در این مقاله، ارائه یک راهنمای جامع و فنی است تا شما بتوانید این کابوس کلیک ناخواسته را برای همیشه از سایت خود حذف کنید و امتیاز CLS خود را به سطح عالی برسانید.

CLS چیست و چرا برای سئو و کاربران حیاتی است؟

CLS یا Cumulative Layout Shift، یکی از معیارهای اصلی گوگل برای سنجش ثبات بصری یک صفحه وب است. این معیار، میزان جابجایی ناگهانی و غیرمنتظره عناصر صفحه را در طول عمر کامل بارگذاری صفحه (تا زمانی که کاربر از آن خارج شود) محاسبه می کند.

تعریف فنی و نحوه محاسبه امتیاز CLS

گوگل برای سنجش CLS از یک فرمول ریاضی دقیق استفاده می کند که حاصل ضرب دو فاکتور اصلی است:

1. Impact Fraction (کسر تاثیر): این فاکتور، میزان فضای قابل مشاهده (Viewport) را که توسط عناصر جابجا شده اشغال می شود، اندازه می گیرد. به عبارت دیگر، چقدر از صفحه تحت تاثیر جابجایی قرار گرفته است.
2. Distance Fraction (کسر مسافت): این فاکتور، میزان مسافتی را که عناصر جابجا شده طی کرده اند، اندازه می گیرد.

فرمول CLS:

CLS Score = Impact Fraction × Distance Fraction

نکته تخصصی: امتیاز CLS در واقع مجموع تمام جابجایی های ناخواسته ای است که در یک “پنجره زمانی” (Session Window) رخ می دهد. این پنجره زمانی می تواند تا ۵ ثانیه طول بکشد و جابجایی هایی که کمتر از ۵۰۰ میلی ثانیه پس از تعامل کاربر (مانند کلیک) رخ دهند، معمولاً نادیده گرفته می شوند.

استانداردهای امتیازدهی CLS از نظر گوگل

گوگل برای امتیاز CLS سه سطح عملکرد تعریف کرده است که باید به سطح “خوب” برسید تا Core Web Vitals شما سبز شود:

سطح عملکرد	امتیاز CLS	وضعیت
خوب	۰.۱ یا کمتر	هدف اصلی شما باید این باشد.
نیاز به بهبود	بین ۰.۱ تا ۰.۲۵	نیاز به اصلاحات جدی دارد.
ضعیف	بیشتر از ۰.۲۵	تجربه کاربری ضعیف و تاثیر منفی بر سئو.

---

عوامل اصلی ایجاد CLS بالا (مجرمان جابجایی)

برای بهینه سازی CLS، ابتدا باید بدانیم چه عواملی باعث این جابجایی های ناخواسته می شوند. این عوامل معمولاً ناشی از بارگذاری نامتقارن منابع هستند:

• تصاویر و ویدئوهای بدون ابعاد: رایج ترین عامل. اگر ابعاد (عرض و ارتفاع) یک تصویر یا ویدئو در کد HTML مشخص نشده باشد، مرورگر نمی داند چقدر فضا برای آن رزرو کند. پس از بارگذاری فایل، مرورگر ناگهان فضا را اختصاص داده و محتوای زیرین را جابجا می کند.
• تبلیغات، Embedها و Iframeها: این عناصر اغلب به صورت پویا و با تاخیر بارگذاری می شوند. اگر فضایی برای آنها رزرو نشود، پس از تزریق به صفحه، باعث جابجایی محتوا می شوند.
• محتوای تزریق شده پویا (Dynamic Content): محتوایی که پس از بارگذاری اولیه توسط جاوا اسکریپت به صفحه اضافه می شود، مانند فرم های رضایت کوکی، نوتیفیکیشن ها یا ویجت های شبکه های اجتماعی.
• فونت های وب (FOIT/FOUT): زمانی که فونت اصلی صفحه با تاخیر بارگذاری می شود، مرورگر ابتدا از یک فونت سیستمی استفاده می کند. پس از بارگذاری فونت اصلی، به دلیل تفاوت در اندازه حروف، متن جابجا می شود (Flash of Unstyled Text یا Flash of Invisible Text).

راهکارهای عملی و فنی برای بهینه سازی CLS

بهینه سازی CLS یک فرآیند فنی است که نیاز به دقت در کدنویسی و پیکربندی دارد. در اینجا مهم ترین راهکارهای اجرایی آورده شده است:

۱. رزرو فضا برای تصاویر و ویدئوها (تعیین ابعاد)

این ساده ترین و موثرترین راهکار است. همیشه ابعاد width و height را در تگ <img> مشخص کنید:

<img src="image.jpg" width="600" height="400" alt="تصویر بهینه سازی CLS">

نکته تخصصی: برای تصاویر ریسپانسیو، از CSS برای حفظ نسبت ابعاد استفاده کنید. با استفاده از ویژگی aspect-ratio در CSS، می توانید به مرورگر بگویید که چه نسبتی از فضا را برای تصویر رزرو کند، حتی اگر ابعاد پیکسلی دقیق مشخص نشده باشد.

۲. مدیریت تبلیغات و محتوای تزریقی

برای جلوگیری از جابجایی ناشی از تبلیغات یا ویجت ها:

• رزرو فضای ثابت: همیشه برای اسلات های تبلیغاتی یک فضای ثابت (حداقل ارتفاع) رزرو کنید. اگر تبلیغی برای نمایش وجود نداشت، آن فضا را با یک محتوای جایگزین (Placeholder) پر کنید.
• قرار دادن در پایین صفحه: محتوای پویا و غیرضروری (مانند فرم های کوکی) را در پایین صفحه یا در یک ناحیه ثابت (مانند هدر چسبنده) قرار دهید تا جابجایی محتوای اصلی را تحت تاثیر قرار ندهد.

۳. بهینه سازی بارگذاری فونت های وب

برای رفع مشکل جابجایی فونت (FOIT/FOUT):

• استفاده از font-display: swap: این ویژگی CSS به مرورگر اجازه می دهد تا ابتدا از یک فونت سیستمی استفاده کند و به محض بارگذاری فونت اصلی، آن را جایگزین کند. این کار باعث می شود متن هرگز نامرئی نشود (رفع FOIT) و جابجایی ناشی از تغییر فونت را به حداقل می رساند.
• پیش بارگذاری (Preload) فونت های حیاتی: فونت هایی که برای نمایش محتوای بالای صفحه (Above-the-fold) ضروری هستند را با استفاده از تگ <link rel="preload"> زودتر بارگذاری کنید.

۴. استفاده از ابزارهای تست و مانیتورینگ

برای شناسایی و رفع مشکلات CLS، باید از ابزارهای تخصصی استفاده کنید:

• PageSpeed Insights: این ابزار گوگل، امتیاز CLS سایت شما را در محیط آزمایشگاهی (Lab Data) و داده های واقعی کاربران (Field Data) نمایش می دهد.
• Chrome DevTools (Lighthouse): در بخش Performance، می توانید جابجایی های دقیق را در طول بارگذاری صفحه مشاهده کنید و عنصر مسئول جابجایی را شناسایی نمایید.
• Search Console (Core Web Vitals Report): برای مانیتورینگ بلندمدت و شناسایی صفحاتی که در دنیای واقعی مشکل CLS دارند.

نکات طلایی و اجرایی برای CLS عالی

برای رسیدن به امتیاز CLS زیر ۰.۱، این نکات اجرایی را در نظر بگیرید:

1. لینک سازی داخلی: به یاد داشته باشید که یک ساختار لینک سازی داخلی قوی، به گوگل کمک می کند تا ارزش محتوای شما را بهتر درک کند.
2. لینک خارجی معتبر: برای افزایش اعتبار مقاله، به منابع معتبر خارجی لینک دهید.
3. پلاگین های وردپرس: اگر از وردپرس استفاده می کنید، پلاگین هایی مانند WP Rocket یا LiteSpeed Cache اغلب دارای تنظیماتی برای بهینه سازی بارگذاری تصاویر و فونت ها هستند که می توانند به طور خودکار CLS را بهبود بخشند.
4. نقش استاد آی تی: برای مشاوره تخصصی و اجرای راهکارهای فنی پیچیده در زمینه بهینه سازی سرعت و CLS، می توانید از خدمات متخصصان استاد آی تی استفاده کنید.

سوالات متداول

نتیجه گیری

تا اینجا CLS دیگر یک مفهوم مبهم برایتان نیست، بلکه یک فاکتور حیاتی برای موفقیت در سئو و ارائه یک تجربه کاربری درجه یک است. با درک دقیق نحوه محاسبه آن (Impact Fraction × Distance Fraction) و اجرای راهکارهای فنی مانند تعیین ابعاد تصاویر، رزرو فضا برای تبلیغات و بهینه سازی بارگذاری فونت ها، می توانید امتیاز CLS سایت خود را به زیر ۰.۱ برسانید. به یاد داشته باشید که ثبات بصری، پایه و اساس اعتماد کاربر به سایت شماست.

منابع

[۱] Google. (2021). Introducing Core Web Vitals. Retrieved from https://developers.google.com/search/blog/2020/05/evaluating-page-experience
[۲] Web.dev. (2023). Cumulative Layout Shift (CLS). Retrieved from https://web.dev/articles/cls
[۳] Web.dev. (2020). Optimize Cumulative Layout Shift. Retrieved from https://web.dev/articles/optimize-cls