CLS یا Cumulative Layout Shift چیست؟ چگونه بر سئو سایت تاثیر می گذارد؟

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

برای گوگل تجربه کاربری به وضوح در اولویت است. به همین دلیل است که گوگل Cumulative Layout Shift را به یکی از سیگنال های تجربه صفحه تبدیل کرده است. این سیگنال ها سعی دارند جنبه های فنی تجربه کاربری را به دست آورند.

با توجه به تأکیداتی که توسط انجمن توسعه دهندگان وب بر تجربه کاربری شده است، بسیار حیرت انگیز است که بسیاری از وب سایت های معروف هیچ کاری برای تثبیت لی اوت خود انجام نمی دهند، صفحات خود را با محتوای بینابینی، بنر ها و تبلیغات ناگهانی پر می کنند که این کار ها تجربه را برای کاربران آن ها خراب می کند.

Cumulative Layout Shift چیست؟

Cumulative Layout Shift یا (CLS) یک معیار اصلی هسته وب Core Web Vital است که با جمع کردن همه تغییرات لی اوت که ناشی از تعامل کاربر نیست، محاسبه می شود. CLS به تناسب بین بازدید هایی که تحت تأثیر تغییرات لی اوت و فاصله حرکت عناصری که جابجا شده اند، نگاه می کند.

نمره CLS خوب چند است؟

نمره Cumulative Layout Shift برای صفحات کاملاً استاتیک می تواند 0 باشد و هرچه تغییرات لی اوت در صفحه بیشتر شود، این عدد بالا تر می رود.هرچه امتیاز شما کمتر باشد، لی اوت شما پایدار تر است. امتیازات رسمی CLS که توسط ابزار های عملکردی گوگل استفاده می شود به شرح زیر است:

صفحه خوب: CLS زیر 0.1
صفحه نیازمند به بهبود: CLS بین 0.1 و 0.25
صفحه ضعیف: CLS بالاتر از 0.25

گوگل توصیه می کند که نمره CLS خود را زیر 0.1 نگه دارید.

آیا نمره CLS بر سئو شما تأثیر می گذارد؟

با شروع به روزرسانی تجربه صفحه گوگل، CLS در ژوئن 2021 به یک عامل رتبه بندی تبدیل می شود. این بدان معناست که نمره CLS شما (همراه با معیارهای LCP و FID) بر سئو شما تأثیر می گذارد. اگرچه احتمالاً فاکتور بسیار جزئی است، اما نمره CLS شما (همراه با سایر فاکتور ها) ممکن است در میزان ترافیکی که از گوگل و سایر موتور های جستجو دریافت می کنید، منعکس شود.

علاوه بر این CLS با معیار های رفتار کاربر ارتباط دارد. در حالی که گوگل ادعا می کند از معیار هایی مانند زمان اقامت در یک صفحه یا bounce rate برای اهداف رتبه بندی استفاده نمی کند، موتور های جستجوی دیگر مانند Bing، اذعان می کنند که از این معیار ها در الگوریتم های رتبه بندی خود استفاده می کنند. به همین دلایل، قطعاً بهینه سازی CLS باید در اولویت استراتژی سئو شما باشد.

چرا باید نگران Cumulative Layout Shift باشید؟

همانطور که در بالا اشاره کردیم CLS یک فاکتور رتبه بندی است. از همه مهم تر، نمره بالا CLS به این معنی است که کاربران هنگام مرور صفحه شما تجربه خوبی نخواهند داشت. تأثیرات منفی لی اوت های متعدد از آزار های خفیفی که می رساند، می تواند به خرید تصادفی یک محصول اشتباه تغییر کند. این مسئله می تواند منجر به بررسی های بدی برای شرکت شما شود و کاربران را از بازگشت به سایت منصرف کند و همچنین مشتریان جدید را از خود دور کند.

CLS چگونه محاسبه می شود؟

دو عامل وجود دارد که بر روی CLS تاثیر می گذارد: ضریب Impact و ضریب Distance.

ضریب Impact

برای محاسبه ضریب Impact، ابتدا باید منطقه Impact را محاسبه کنید. منطقه Impact منطقه تحت تأثیر تغییرات لی اوت را مشخص می کند. گوگل تمام عناصر تحت تأثیر را شناسایی کرده و منطقه اصلی را با نسخه تغییر یافته ترکیب کرده و منطقه Impact را مشخص می کند.

منطقه Impact معمولاً یک مستطیل است، اما اگر چندین تغییر لی اوت، چه به صورت افقی و چه به صورت عمودی داشته باشید، می تواند شکل پیچیده تری داشته باشد. حال بیایید در مورد ضریب Impact صحبت کنیم.

برای تعریف ضریب Impact، منطقه Impact را به بخش های قابل دید viewport (بخشی از صفحه که بدون پیمایش قابل مشاهده است) تقسیم می کنید:

منطقه Impact / منطقه viewport = ضریب Impact

اولین نسخه CLS گوگل فقط شامل ضریب Impact بود. با این حال عناصر بزرگ ممکن است فقط اندکی حرکت کنند و این حرکات عناصر بزرگ بیشتر از عناصر کوچک حواس را پرت می کنند. با در نظر گرفتن این نکته، این محاسبه ساده CLS نیاز به بهبود داشت. به همین دلیل گوگل استفاده از ضریب Distance را به میان آورد.

ضریب Distance

برای محاسبه این پارامتر، ابتدا باید فاصله حرکت عناصر را محاسبه کنید. فاصله حرکت عناصر، فاصله قبل و بعد از تغییر لی اوت را مشخص می کند. تقریباً به این سوال پاسخ می دهد: عنصر منتقل شده تا کجا حرکت کرده است؟

برای محاسبه ضریب Distance باید حداکثر فاصله حرکت عناصر را بر ارتفاع viewport تقسیم کنید:

حداکثر فاصله حرکت عناصر/ ارتفاع viewport = ضریب Distance

محاسبه تغییر لی اوت

مرحله بعدی محاسبه نمرات تغییر لی اوت است. در اینجا دو پارامتری که در بالا ذکر شد را در هم ضرب می کنید تا نمره تغییر لی اوت برای یک قاب صفحه را بدست آورید:

ضریب Impact * ضریب Distance = نمره تغییر لی اوت برای یک قاب صفحه

محاسبه Cumulative Layout Shift

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

نمره تغییر لی اوت 1 + نمره تغییر لی اوت 2 +… = نمره CLS

با این حال این روش نسبت به اپلیکیشن های Single Page که بدون مکانیسم پیمایش بین صفحات خاص برنامه بودند، کمی “ناعادلانه” بود. بنابراین گوگل درخواست بازخورد کاربران را کرد و تلاش کرد تا راه حل بهتری ایجاد کند.

فرمول فعلی: محققان گوگل تصمیم گرفتند مکانیزمی را برای گروه بندی تغییرات لی اوت در session windows به کار گیرند. Session windows در واقع چارچوب زمانی در چرخه حیات صفحه شما هستند که در آن تغییرات لی اوت خلاصه می شود.

وقتی تغییر لی اوت در صفحه شما اتفاق می افتد، یک Session window باز می شود. این کار می تواند حداکثر 5 ثانیه طول بکشد اما اگر در عرض 1 ثانیه از تغییر قبلی تغییر دیگری رخ ندهد، زود تر بسته می شود.

تغییرات لی اوت سپس در Session windows خلاصه می شوند. نمره CLS نهایی شما حداکثر نمره یک Session window است، سایر پنجره های نشست روی CLS شما تأثیر نمی گذارند. به عنوان مثال:

صفحه شما شروع به رندرینگ می کند.
بعد از 1 ثانیه تغییر لی اوت 0.1 رخ می دهد.
0.5 ثانیه بعد، تغییر دیگری از 0.2 رخ می دهد.
2 ثانیه بعد، تغییر 0.25 رخ می دهد و سپس صفحه بسته می شود.

دو تغییر لی اوت اولیه در یک پنجره نشست یکسان اتفاق افتاد، بنابراین ما نمرات را با هم جمع می کنیم. تغییر لی اوت سوم بعد از 2 ثانیه رخ داد، بنابراین در یک پنجره نشست جداگانه قرار دارد. پنجره نشست قبلی یک ثانیه پس از تغییر لی اوت دوم، بسته شد.

بنابراین در این سناریو نمره نهایی CLS صفحه شما 0.1 + 0.2 = 0.3 خواهد بود. تغییر لی اوت سوم بر روی امتیاز نهایی تأثیر نمی گذارد. این تغییر در فرمول نمره دهی چگونه می تواند روی نمرات شما تأثیر بگذارد؟

از آنجا که این فرمول به روزرسانی CLS یک صفحه را پوشش می دهد، در نتیجه این تغییر هیچ صفحه ای نمره بد تری نخواهد داشت. براساس تجزیه و تحلیل ما، 55٪ از صفحات تغییری در CLS نخواهند دید. دلیل این امر این است که صفحات آن ها یا در حال حاضر هیچ تغییر لی اوتی ندارند یا تغییراتی که دارند از قبل به یک پنجره واحد محدود شده اند. بقیه صفحات نمرات بهبود یافته ای خواهند دید. بیشتر افراد فقط اندکی پیشرفت خواهند داشت، اما حدود 3٪ شاهد بهبود امتیازات خود از داشتن “صفحه نیازمند به بهبود” یا “صفحه ضعیف” به “صفحه خوب” هستند. این صفحات تمایل به استفاده از اسکرول های بی نهایت دارند یا به روزرسانی های رابط کاربری (UI) بسیار کندی دارند.
گوگل

سایر مواردی که باید در مورد CLS بدانید

تغییرات لی اوت عمدی

CLS تمام تغییرات لی اوتی را که در عرض نیم ثانیه از ورودی که کاربر وارد می کند، ظاهر می شوند، نادیده می گیرد. به آن پنجره استثنا ورودی گفته می شود. این بدان معنی است که اندازه گیری CLS پس از هر تعامل کاربر با سایت برای 500 میلی ثانیه متوقف می شود. بنابراین اگر تغییر لی اوت عمدی باشد و توسط کاربر ایجاد شود، بر CLS شما تأثیری نخواهد داشت.

انیمیشن ها و شیفت های لی اوت

انیمیشن ها می توانند باعث تغییر لی اوت شوند، اما همه آن ها در امتیاز Cumulative Layout Shift شما محاسبه نمی شوند. گوگل تغییرات CSS را نادیده می گیرد. بنابراین اگر انیمیشن شما از ویژگی تبدیل استفاده کند، بر CLS شما تأثیری نخواهد داشت.

ایجاد تغییر لی اوت

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

چگونه Cumulative Layout Shift خود را بهبود ببخشیم؟

بهبود فاکتور رتبه بندی Cumulative Layout Shift

با توجه به اینکه فاکتور های رتبه بندی از اهمیت بسیار بالایی برخوردار هستند، در ادامه راهکار هایی را برای بهبود CLS خواهید دید.

با استفاده از فونت: مقادیر نمایش و لینک rel = preload

اگر سایت شما از فونت هایی که به صورت آنلاین میزبانی می شوند استفاده می کند، ممکن است دلیل اصلی ایجاد FOIT (Flashes Of Invisible Text) و FOUT (Flashes Of the Unstyled Text) باشد.

وقتی مرورگر فونت ها را از سرور بارگیری می کند، اغلب فضای خالی را نمایش می دهد تا زمانی که فونت سفارشی بارگیری شود. پس از بارگیری و نمایش فونت، لی اوت معمولاً بسیار زیاد جابجا می شود. به آن FOIT (فلش های متن نامرئی) می گویند.

سناریوی دیگر زمانی اتفاق می افتد که مرورگر تا زمانی که فونت سفارشی بارگیری شود، یکی از فونت های سیستم را نمایش دهد. ما به آن FOUT می گوییم (Flashes of the Unstyled Text). از آنجا که فونت سیستم ممکن است با نوع سفارشی متفاوت باشد، ممکن است فضای متفاوتی را اشغال کند. به همین دلیل ممکن است بعد از بارگیری فونت های سفارشی، لی اوت سایت شما به طور قابل توجهی حرکت کند.

برای جلوگیری از این موارد، می توانید از فونت استفاده کنید: مقادیر نمایش (Display) مانند auto، swap، block، fallback و optional. برای دستیابی به نتیجه بهتر، می توانید فایل های فونت را با استفاده از <link rel=preload> برای فونت های کلیدی preload کنید، به این ترتیب آن ها به عنوان یک اولویت دانلود می شوند.

استفاده از عناصر عرض و ارتفاع برای فیلم ها و تصاویر

در گذشته توسعه دهندگان وب عناصر عرض و ارتفاع را در همه جای سایت ها قرار می دادند. به نظر می رسید به این شکل است: <img src=”example.jpg” width=”800″ height=”300″ alt=”Example Image”>

این کار با استقبال از طراحی وب responsive، کمتر محبوب بود. با توجه به این رویکرد جدید، توسعه دهندگان از CSS برای تغییر اندازه تصاویر استفاده کردند. برای آن ها خوب بود، اما برای کاربران تحت تأثیر CLS، اینگونه نبود. با استفاده از این روش فقط پس از شروع دانلو تصویر توسط مرورگر، فضا به آن اختصاص می یابد. بعد از نمایش تمام تصاویر، لی اوت حرکت می کند و باعث تغییر مکان های غیر ضروری می شود.

راه حل بسیار بهتر برای تغییر اندازه تصاویر استفاده از نسبت ابعاد است. منظور نسبت عرض به ارتفاع است (به عنوان مثال 16: 9). استفاده از نسبت ابعاد به مرورگر امکان می دهد فضای مورد نیاز برای نمایش تصویر را محاسبه کند و از این طریق خطر تغییر لی اوت را کاهش می دهد.

اگر با تصاویر responsive سروکار دارید، می توانید از ویژگی srcset استفاده کنید. به شما و مرورگر امکان می دهد چندین اندازه عکس را برای نمایش بهترین اندازه ممکن تنظیم کنید.