Cumulative Layout Shift (CLS)چیست و نقش حیاتی آن در سئو

در تجربه وب مدرن، فقط سرعت بارگذاری مهم نیست؛ ثبات بصری نیز به همان اندازه اهمیت دارد. “Cumulative Layout Shift” یا به اختصار CLS یکی از سه معیار اصلی Core Web Vitals گوگل است که دقیقاً این ثبات را اندازه‌گیری می‌کند. CLS نشان‌دهنده میزان جابجایی ناخواسته عناصر بصری در صفحه در طول فرآیند بارگذاری و حتی پس از آن است. یک CLS بالا می‌تواند تجربه کاربری را به شدت مختل کند و بر رتبه‌بندی سایت در موتورهای جستجو تأثیر منفی بگذارد.

در این مقاله، به صورت عمیق و فنی به CLS، نحوه محاسبه آن، دلایل اصلی بروز آن و راهکارهای جامع برای بهبود آن می‌پردازیم و تأثیر آن بر سرعت سایت و سئو را بررسی می‌کنیم.

CLS چیست؟ تعریف فنی و مفهوم

Cumulative Layout Shift (CLS) معیاری بدون واحد است که مجموع تمام امتیازات “جابجایی طرح‌بندی” (Layout Shift Score) را برای هر جابجایی ناخواسته در چیدمان صفحه در طول عمر کامل آن اندازه‌گیری می‌کند. این معیار به پایداری بصری یک صفحه وب اشاره دارد و به دنبال پاسخ به این سوال است: “آیا عناصر صفحه بدون انتظار کاربر جابجا می‌شوند و مزاحمت ایجاد می‌کنند؟”

جابجایی طرح‌بندی (Layout Shift): زمانی اتفاق می‌افتد که یک عنصر موجود و قابل مشاهده در صفحه، موقعیت شروع خود را از یک فریم به فریم دیگر تغییر دهد. این جابجایی‌ها می‌توانند باعث شوند کاربر به اشتباه روی چیزی کلیک کند یا رشته افکارش در هنگام مطالعه محتوا قطع شود.

نحوه محاسبه CLS Score: امتیاز هر جابجایی طرح‌بندی از حاصل‌ضرب دو مقدار به دست می‌آید:

1. Impact Fraction (کسر تاثیر): این کسر، ناحیه متأثر از جابجایی را در نمای دید (viewport) اندازه‌گیری می‌کند. این شامل مجموع مساحت دیدنی عناصری است که قبل از جابجایی و بعد از جابجایی در نمای دید قرار دارند. برای مثال، اگر یک عنصر 50% از نمای دید را اشغال کند و سپس 25% به سمت پایین حرکت کند، کسر تاثیر آن 0.75 خواهد بود (0.50 قبل از جابجایی + 0.25 بعد از جابجایی).
2. Distance Fraction (کسر فاصله): این کسر، بیشترین فاصله جابجایی هر عنصر ناپایدار (عنصری که جابجا شده) را نسبت به ابعاد کلی نمای دید اندازه‌گیری می‌کند. برای مثال، اگر یک عنصر 25% از ارتفاع نمای دید را به سمت پایین حرکت کند، کسر فاصله آن 0.25 خواهد بود.

Layout Shift Score = Impact Fraction × Distance Fraction

Cumulative Layout Shift (CLS) مجموع تمام Layout Shift Scoreهای فردی است که به صورت غیرمنتظره در طول عمر صفحه اتفاق می‌افتند. جابجایی‌هایی که در عرض 500 میلی‌ثانیه پس از یک تعامل کاربر (مانند کلیک یا تایپ) رخ می‌دهند، از محاسبه CLS مستثنی می‌شوند، زیرا این جابجایی‌ها معمولاً مورد انتظار کاربر هستند (مثلاً باز شدن یک منوی آبشاری پس از کلیک).

نمره‌دهی CLS از نظر گوگل:

• خوب (Good): 0.1 یا کمتر
• نیاز به بهبود (Needs Improvement): بین 0.1 و 0.25
• ضعیف (Poor): بیش از 0.25

هدف گوگل این است که 75% از بازدیدهای یک صفحه، CLS کمتر از 0.1 داشته باشند.

چرا CLS مهم است؟ تأثیر بر سرعت سایت و سئو

CLS به طور مستقیم بر سرعت سایت به معنای زمان بارگذاری اولیه تأثیر نمی‌گذارد، اما به شدت بر کیفیت تجربه کاربری (UX) و عملکرد ادراکی (Perceived Performance) تأثیر می‌گذارد. در نهایت، این تجربه کاربری است که بر سئو و رتبه‌بندی سایت شما اثر می‌گذارد.

تأثیر بر تجربه کاربری (UX):

1. ناامیدی و سردرگمی کاربر: جابجایی ناگهانی محتوا فوق‌العاده آزاردهنده است. تصور کنید در حال مطالعه یک پاراگراف هستید که ناگهان یک تبلیغ بارگذاری می‌شود و متن را به پایین هل می‌دهد. یا می‌خواهید روی یک دکمه کلیک کنید و در لحظه آخر، دکمه جابجا شده و شما روی چیز دیگری کلیک می‌کنید. این تجربیات منفی، باعث ناامیدی، سردرگمی و حس عدم کنترل در کاربر می‌شود.
2. افزایش نرخ پرش (Bounce Rate): کاربران به سرعت از وب‌سایت‌هایی که تجربه کاربری ضعیفی دارند فرار می‌کنند. CLS بالا به طور مستقیم با نرخ پرش بالاتر و کاهش زمان ماندگاری در سایت (Dwell Time) مرتبط است.
3. کاهش تبدیل (Conversions): اگر کاربران نتوانند به راحتی با عناصر کلیدی مانند دکمه‌های “افزودن به سبد خرید” یا فرم‌های تماس تعامل داشته باشند، نرخ تبدیل به شدت کاهش می‌یابد.
4. مشکلات دسترسی‌پذیری (Accessibility): برای کاربران دارای ناتوانی، به ویژه افرادی که از فناوری‌های کمکی استفاده می‌کنند، جابجایی محتوا می‌تواند استفاده از وب‌سایت را تقریباً غیرممکن کند.

تأثیر بر سرعت سایت (به مفهوم غیر مستقیم):

اگرچه CLS مستقیماً زمان بارگذاری اولیه را اندازه‌گیری نمی‌کند، اما راهکارهای بهبود آن اغلب با بهینه‌سازی‌های کلی عملکرد سایت همپوشانی دارند. به عنوان مثال، اطمینان از تعریف ابعاد تصاویر به مرورگر کمک می‌کند تا فضای لازم را از قبل رزرو کند، که این خود می‌تواند به بهینه‌سازی زمان رندر اولیه نیز کمک کند.

تأثیر بر سئو (SEO):

از می 2021، Core Web Vitals (شامل CLS) به عنوان یک فاکتور رتبه‌بندی رسمی در الگوریتم جستجوی گوگل معرفی شده‌اند. این بدان معناست که:

1. رتبه‌بندی مستقیم: وب‌سایت‌هایی با CLS پایین‌تر، احتمالاً در نتایج جستجو رتبه بهتری خواهند داشت. گوگل به وضوح اعلام کرده است که به سایت‌هایی که تجربه کاربری بهتری ارائه می‌دهند، پاداش می‌دهد.
2. بهبود سیگنال‌های کاربر (User Signals): CLS پایین منجر به تجربه کاربری بهتر می‌شود. این امر به نوبه خود، سیگنال‌های مثبت کاربر مانند نرخ پرش کمتر، زمان ماندگاری بیشتر، و نرخ تبدیل بالاتر را تقویت می‌کند. گوگل این سیگنال‌ها را به طور غیرمستقیم در الگوریتم خود لحاظ می‌کند.
3. تأثیر بر AI Overviews (SGE): در عصر هوش مصنوعی و ادغام آن در نتایج جستجو (مانند AI Overviews گوگل)، ارائه یک تجربه بصری پایدار و سریع از اهمیت بیشتری برخوردار است. سایت‌هایی که از نظر CLS بهینه هستند، احتمالا در ارائه محتوا به واسطه هوش مصنوعی نیز عملکرد بهتری خواهند داشت.

دلایل اصلی بروز CLS بالا

شناسایی علت اصلی CLS بالا، اولین گام برای بهبود آن است. رایج‌ترین دلایل عبارتند از:

1. تصاویر و ویدئوهای بدون ابعاد (Images/Videos Without Dimensions): این شایع‌ترین علت است. اگر ابعاد width و height برای تگ <img> یا <video> مشخص نشود، مرورگر در ابتدا نمی‌داند چه فضایی را برای آن‌ها رزرو کند. هنگامی که تصویر یا ویدئو بارگذاری می‌شود، فضای لازم را اشغال می‌کند و محتوای زیر آن جابجا می‌شود.
2. تبلیغات، فریم‌های داخلی (Iframes) و محتوای Embed شده بدون ابعاد: مشابه تصاویر، تبلیغات (به خصوص تبلیغات ریدایرکت شده و داینامیک)، ویدئوهای Embed شده از یوتیوب، و سایر محتوای Embed شده (مانند پست‌های شبکه‌های اجتماعی) اگر ابعاد مشخصی نداشته باشند، پس از بارگذاری باعث جابجایی محتوا می‌شوند.
3. محتوای تزریق شده دینامیک (Dynamically Injected Content): محتوایی که پس از بارگذاری اولیه صفحه توسط جاوا اسکریپت یا APIها به صفحه اضافه می‌شود (مثلاً نوتیفیکیشن‌ها، فرم‌های کوکی، بنرهای تبلیغاتی، یا محتوای لود شده از طریق ای‌جکس) می‌تواند باعث جابجایی شود، به خصوص اگر فضای کافی برای آن از قبل رزرو نشده باشد.
4. فونت‌های وب (Web Fonts) که باعث FOIT/FOUT می‌شوند:
   • FOIT (Flash of Invisible Text): مرورگر تا زمانی که فونت وب بارگذاری شود، متن را پنهان می‌کند. پس از بارگذاری، متن ناگهان ظاهر می‌شود و ممکن است باعث جابجایی عناصر دیگر شود.
   • FOUT (Flash of Unstyled Text): مرورگر ابتدا متن را با یک فونت سیستمی (fallback font) نمایش می‌دهد و پس از بارگذاری فونت وب، آن را با فونت جدید جایگزین می‌کند. این تغییر فونت می‌تواند منجر به تغییر اندازه متن و در نتیجه جابجایی عناصر اطراف شود.
5. انیمیشن‌های CSS/JavaScript که باعث تغییر طرح‌بندی می‌شوند: برخی انیمیشن‌ها یا انتقال‌ها که از ویژگی‌های CSS مانند width, height, top, left و غیره استفاده می‌کنند، می‌توانند باعث جابجایی شوند. برای انیمیشن‌های روان‌تر باید از transform و opacity استفاده کرد.
6. عدم استفاده از Placeholder برای عناصر متغیر: برای عناصری که می‌دانید قرار است بعداً بارگذاری شوند (مانند اسلایدرها، فرم‌ها، یا کامنت‌ها)، اما ابعاد دقیق آن‌ها مشخص نیست، عدم وجود یک فضای رزرو شده (Placeholder) باعث CLS می‌شود.

راهکارهای جامع و فنی برای بهبود CLS

بهبود CLS نیازمند رویکردی سیستماتیک و بررسی دقیق ساختار و بارگذاری صفحه است:

1. همیشه ابعاد (width و height) را برای تصاویر و ویدئوها مشخص کنید:

   • این مهمترین و مؤثرترین راهکار است. با اضافه کردن ویژگی‌های width و height به تگ‌های <img> و <video>، مرورگر قبل از بارگذاری فایل رسانه، فضای لازم را برای آن رزرو می‌کند.
   • نکته پیشرفته: برای تصاویر واکنش‌گرا، از ویژگی srcset و sizes استفاده کنید، اما همچنان ابعاد اولیه را برای نسبت ابعاد (aspect ratio) حفظ کنید. می‌توانید از CSS aspect-ratio برای تعیین نسبت ابعاد برای عناصر مختلف نیز استفاده کنید.

2. فضای لازم را برای تبلیغات، Embedها و iFrames رزرو کنید:

   • برای تبلیغات: اگر از پلتفرم‌های تبلیغاتی داینامیک استفاده می‌کنید، سعی کنید فضای کافی را برای هر بلوک تبلیغاتی (حتی اگر تبلیغ خالی باشد) رزرو کنید. از استایل‌های min-height و min-width برای تضمین حداقل ابعاد استفاده کنید.
   • برای Embedها (مانند یوتیوب، توییتر، اینستاگرام): ابعاد عناصر Embed شده را با استفاده از ویژگی‌های width و height (در صورت امکان) یا با CSS (مانند aspect-ratio برای ویدئوها) مشخص کنید.
   • Fallback Content: در صورت عدم بارگذاری تبلیغ یا محتوای Embed شده، یک فضای خالی (placeholder) یا محتوای جایگزین (fallback content) نمایش دهید.

3. از تزریق محتوای دینامیک بالای خط دید (Above-the-Fold) خودداری کنید:

   • محتوایی که پس از بارگذاری اولیه بالای خط دید اضافه می‌شود، یکی از عوامل اصلی CLS است.
   • اگر باید محتوای دینامیک را بالای خط دید اضافه کنید (مانند پاپ‌آپ‌های کوکی یا نوتیفیکیشن‌ها)، فضای لازم را برای آن‌ها از قبل با CSS یا JavaScript رزرو کنید.
   • در صورت امکان، این نوع محتوا را در پایین صفحه یا پس از بارگذاری کامل محتوای اصلی نمایش دهید.
   • از Transitionها برای انیمیشن‌های ورودی (Fade-in animations) استفاده کنید تا ورود عناصر ناگهانی نباشد.

4. فونت‌های وب را به درستی بارگذاری و بهینه‌سازی کنید:

   • font-display: swap;: این ویژگی CSS به مرورگر اجازه می‌دهد که در حین بارگذاری فونت وب، از یک فونت سیستمی (fallback font) استفاده کند. این کار از “Flash of Invisible Text” (FOIT) جلوگیری می‌کند و متن را در سریع‌ترین زمان ممکن قابل مشاهده می‌کند. پس از بارگذاری فونت وب، فونت سیستمی با آن جایگزین می‌شود.
   • Preload کردن فونت‌های حیاتی: از <link rel="preload" as="font" crossorigin> برای بارگذاری فونت‌های حیاتی (مانت فونت‌های استفاده شده در بالای خط دید) در اوایل فرآیند بارگذاری استفاده کنید.
   • استفاده از size-adjust, ascent-override, descent-override, line-gap-override در @font-face: این ویژگی‌های پیشرفته CSS به شما اجازه می‌دهند تا با تنظیم دقیق ابعاد فونت‌های fallback، تفاوت اندازه بین فونت fallback و فونت اصلی را به حداقل برسانید و بدین ترتیب جابجایی طرح‌بندی را کاهش دهید.

5. انیمیشن‌ها را با دقت اجرا کنید:

   • از ویژگی‌های CSS که باعث تغییر طرح‌بندی می‌شوند (مانند width, height, top, left, margin, padding) برای انیمیشن‌ها اجتناب کنید.
   • به جای آن‌ها، از ویژگی‌های transform (برای جابجایی translateX(), translateY(), scale()) و opacity استفاده کنید. این ویژگی‌ها توسط GPU شتاب‌دهی می‌شوند و باعث رندر مجدد (re-layout) نمی‌شوند، بنابراین جابجایی طرح‌بندی ایجاد نمی‌کنند.

6. از ویژگی content-visibility برای عناصر بزرگ و خارج از صفحه استفاده کنید:

   • این ویژگی جدید CSS به مرورگر اجازه می‌دهد تا رندرینگ عناصر خارج از نمای دید را به تعویق بیندازد و فقط زمانی که کاربر به آن‌ها اسکرول می‌کند، آن‌ها را رندر کند. این کار می‌تواند برای بهبود عملکرد کلی و CLS مفید باشد، زیرا مرورگر نیازی به محاسبات طرح‌بندی برای عناصر نامرئی ندارد.

7. بررسی دقیق تغییرات DOM پس از تعامل کاربر:

   • اگر تغییرات طرح‌بندی پس از تعامل کاربر (مانند کلیک روی یک دکمه برای باز کردن یک منو) رخ می‌دهد، اطمینان حاصل کنید که این تغییرات در زمان 500 میلی‌ثانیه پس از ورودی کاربر اتفاق می‌افتند.
   • اگر تغییرات پس از این بازه زمانی رخ می‌دهند، باید مکانیسم بارگذاری یا نمایش محتوا را طوری تغییر دهید که فضای لازم را از قبل رزرو کند یا تغییرات را به صورت روان‌تر (مثلاً با انیمیشن‌های transform) انجام دهد.

ابزارهای اندازه‌گیری و اشکال‌زدایی CLS

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

• PageSpeed Insights (PSI): ابزار رسمی گوگل که هم داده‌های فیلد (CrUX) و هم داده‌های آزمایشگاهی (Lighthouse) را برای CLS ارائه می‌دهد.
• Chrome DevTools (Lighthouse & Performance Panel):
  • Lighthouse: در پنل DevTools مرورگر کروم، می‌توانید یک گزارش Lighthouse کامل اجرا کنید که CLS را ارزیابی کرده و پیشنهاداتی برای بهبود آن ارائه می‌دهد.
  • Performance Panel: این پنل به شما اجازه می‌دهد تا ضبطی از فرآیند بارگذاری صفحه انجام دهید و تمام رویدادهای جابجایی طرح‌بندی (Layout Shift) را به صورت گرافیکی مشاهده کنید. این بهترین راه برای شناسایی عنصر یا رویدادی است که باعث جابجایی می‌شود.
• WebPageTest: ابزاری قدرتمند برای شبیه‌سازی بارگذاری صفحه از مکان‌های مختلف و با سرعت‌های اتصال متفاوت، که جزئیات دقیق CLS و سایر متریک‌ها را ارائه می‌دهد. می‌توانید ویدئوی بارگذاری صفحه را نیز مشاهده کنید تا جابجایی‌ها را به صورت بصری ردیابی کنید.
• Search Console (Core Web Vitals Report): گزارش Core Web Vitals در گوگل سرچ کنسول، نمای کلی از عملکرد CLS وب‌سایت شما بر اساس داده‌های کاربران واقعی (CrUX) را ارائه می‌دهد.

نتیجه‌گیری: CLS، ضامن پایداری و موفقیت در وب

Cumulative Layout Shift یک متریک حیاتی در Core Web Vitals است که فراتر از سرعت صرف، به ثبات و پایداری تجربه بصری کاربر می‌پردازد. نادیده گرفتن CLS نه تنها به تجربه کاربری آسیب می‌رساند، بلکه به طور مستقیم بر رتبه‌بندی سئوی سایت شما نیز تأثیر منفی می‌گذارد.

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