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

آنچه در این مطلب می‌خوانید:

1. CLS چیست؟
2. چه امتیازی یک امتیاز CLS خوب محسوب می‌شود؟
3. تغییرات چیدمان قابل انتظار در برابر غیرمنتظره
4. چگونه CLS را اندازه‌گیری کنیم؟
5. اندازه‌گیری CLS در جاوا اسکریپت
6. تفاوت‌های بین معیار و API
7. گزارش تغییرات

CLS چیست؟

CLS، مجموعه تمام امتیازهای تغییر چیدمان مجزا برای هر تغییر چیدمان غیرمنتظره که در طول عمر کلی صفحه رخ می‌دهند را اندازه‌گیری می‌کند.

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

جابه‌جایی غیرمنتظره‌ی محتوای یک صفحه معمولا به این دلیل رخ می‌دهد که منابع به صورت همزمان با هم بارگذاری نمی‌شوند. یا این که المان‌های DOM به صورت پویا به قسمت بالایی محتوای موجود اضافه می‌شوند. مقصر اصلی می‌تواند یک تصویر، یک ویدئو با ابعاد نامشخص، فونتی بزرگ‌تر یا کوچک‌تر از نسخه‌ی پشتیبان صفحه یا تبلیغات Third-Party یا ویجتی باشد که به صورت پویا اندازه‌ی خود را تغییر می‌دهد.

آنچه این مسئله را مشکل‌ سازتر می‌کند این است که نحوه‌ی عملکرد یک سایت در حین توسعه معمولا با آنچه کاربران تجربه می‌کنند تفاوت دارد. محتوای شخصی‌سازی شده یا Third-Party اغلب رفتار یکسانی در توسعه و تولید ندارد.

 تصاویر تست اغلب در کَش مرورگر توسعه‌دهنده وجود دارند و تماس‌ها با API به صورت محلی اجرا می‌شوند و اغلب به اندازه‌ای سریع هستند که می‌توان تاخیر آن‌ها را ناچیز در نظر گرفت.

معیار تغییر چیدمان تجمعی (CLS) به شما کمک می‌کند تا با سنجش و اندازه‌گیری تعداد دفعات تکرار این مشکل برای کاربران واقعی، آن را برطرف کنید.

بیشتر بخوانید:

• راهنمای جامع core web vitals و توصیه‌هایی برای بهبود معیارها
• معیارهای اصلی web vitals کدامند؟

چه امتیازی یک امتیاز CLS خوب محسوب می‌شود؟

به منظور فراهم کردن یک تجربه‌ی کاربری خوب، سایت‌ها باید سعی کنند تا امتیاز CLS 1/0 یا کمتر داشته باشد. برای اطمینان از دستیابی به این هدف در قبال بیشتر کاربران، آستانه‌ی اندازه‌گیری خوب به صورت 75 درصد از بارگذاری صفحات بر روی گوشی‌های موبایل و دستگاه‌های دسکتاپ در نظر گرفته می‌شود.

جزئیات تغییر چیدمان

تغییرات چیدمان توسط API ناپایداری چیدمان تعریف می‌شوند. به این صورت که هر وقت یک المان قابل رویت در نمایشگر موقعیت مکانی خود را (به عنوان مثال، قرارگیری در بالا یا پایین در حالت نوشتاری پیشفرض) بین دو فریم تغییر دهد، گزارش ورودی تغییر چیدمان ثبت می‌شود. چنین المان‌هایی را المان‌های ناپایدار در نظر می‌گیرند.

توجه داشته باشید که تغییرات چیدمان تنها وقتی رخ می‌دهند که المان‌های موجود موقعیت مکانی خود را تغییر دهند، اگر یک المان جدید به DOM اضافه شود یا اندازه‌ی یک المان موجود تغییر کند، به عنوان تغییر چیدمان محسوب نمی‌شود. به عبارت دیگر، تا وقتی که یک تغییر موجب تغییر در موقعیت مکانی سایر المان‌ها نشود، تغییر چیدمان به حساب نمی‌آید.

امتیاز تغییر چیدمان

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

امتیاز تغییر چیدمان= ضریب تاثیر × ضریب فاصله

ضریب تاثیر

ضریب تاثیر چگونگی تاثیرگذاری المان‌های ناپایدار بر فضای نمایشگر بین دو فریم را اندازه‌گیری می‌کند. پیوند فضاهای قابل رویت از تمامی المان‌های ناپایدار برای فریم پیشین و فریم کنونی به عنوان ضریبی از کل فضای نمایشگر ضریب تاثیر برای فریم کنونی است.

در تصویر بالا، المانی وجود دارد که نیمی از فضای کلی نمایشگر در یک فریم را به خود اختصاص داده است. سپس، در فریم بعدی، این المان به اندازه‌ی 25% از ارتفاع نمایشگر به سمت پایین حرکت می‌کند. مستطیلی که با خط‌چین قرمز ترسیم شده است نمایانگر پیوند فضای قابل رویت المان در هر دو فریم است که در این مورد برابر با 75% از کل نمایشگر را شامل می‌شود. بنابراین، ضریب تاثیر 75/0 است.

ضریب فاصله

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

در مثال بالا، بزرگ‌ترین بُعد نمایشگر ارتفاع است و المان ناپایدار به اندازه‌ی 25% از ارتفاع نمایشگر حرکت کرده است. در نتیجه ضریب فاصله برابر با 25/0 می‌شود.

بنابراین، در این مثال ضریب تاثیر 75/0 و ضریب فاصله 25/0 است. از این رو، امتیاز تغییر چیدمان به صورت 75/0× 25/0=1875/0 به دست می‌آید.

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

مثال بعدی نشان می‌دهد که چگونه افزودن محتوا به یک المان موجود بر امتیاز تغییر چیدمان تاثیر می‌گذارد.

دکمه‌ی "Click Me" به قسمت پایین باکس خاکستری با متن مشکی ضمیمه شده است که باکس سبز رنگ با متن سفید را به سمت پایین هل می‌دهد (و قسمتی از آن از نمایشگر خارج می‌شود).

در این مثال، باکس خاکستری تغییر اندازه می‌دهد اما موقعیت مکانی آن‌ها تغییر نمی‌کند، از این رو یک المان ناپایدار نیست.

دکمه‌ی "Click Me" قبل از این در DOM نبود. از این رو، موقعیت مکانی اولیه آن تغییر نمی‌کند.

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

پیوند فضاهای قابل رویت برای باکس سبز در هر دو فریم (با مستطیل خط‌چین قرمز رنگ به تصویر کشیده شده است) برابر با فضای باکس سبز در فریم اولیه است؛ یعنی 50% از نمایشگر. ضریب تاثیر 5/0 است.

ضریب فاصله با پیکان بنفش نشان داده شده است. باکس سبز در حدود 14% از نمایشگر به پایین حرکت کرده است، بنابراین ضریب فاصله برابر با 14/0 است.

امتیاز تغییر چیدمان برابر است با 5/0 × 14/0 = 07/0

مثال آخر چند المان ناپایدار را به تصویر می‌کشد:

در فریم اول در تصویر بالا چهار درخواست API برای حیوانات دیده می‌شود که به ترتیب حروف الفبا قرار گرفته‌اند. در فریم دوم، نتایج بیشتری به فهرست مرتب شده اضافه شده‌اند.

مورد اول در فهرست (Cat) دستخوش تغییر موقعیت بین فریم‌ها نمی‌شود. بنابراین، یک المان پایدار است. به طور مشابه، موارد جدید اضافه شده به فهرست نیز قبلا در DOM حضور نداشتند، بنابراین موقعیت اولیه‌ی آن‌ها تغییر نکرده است. اما موقعیت مکانی مواردی با برچسب "Dog"، "Horse" و "Zebra" همگی تغییر کرده است. در نتیجه همه آن‌ها المان‌های ناپایدار هستند.

یکبار دیگر، مستطیل‌های خط‌چین قرمز رنگ نمایانگر پیوند این سه المان ناپایدار در فضاهای قبل و بعد از تغییر چیدمان هستند که در این مورد حدود 38% از فضای نمایشگر را شامل می‌شود (ضریب تاثیر برابر با 38/0 است).

پیکان‌ها نشانگر فواصلی هستند که المان‌های ناپایدار از موقعیت‌های اولیه‌ی خود حرکت کرده‌اند. المان "Zebra"  که با پیکان آبی رنگ نشان داده شده است، بیشترین جابجایی را داشته است یعنی حدود 30% از ارتفاع نمایشگر. همین موجب می‌شود تا ضریب فاصله این مثال برابر با 3/0 شود.

امتیاز تغییر چیدمان برای این مثال برابر است با 38/0 × 3/0 = 1172/0

تغییرات چیدمان قابل انتظار در برابر غیرمنتظره

همه تغییرات چیدمان نامطلوب نیستند. در واقع، بسیاری از اپلیکیشن‌های پویای وب به طور پیوسته از تغییر موقعیت المان‌های موجود در صفحه استفاده می‌کنند.

تغییرات چیدمان اعمال شده توسط کاربر

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

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

تغییرات چیدمانی که در 500 میلی ثانیه بعد از ورودی کاربر رخ می‌دهند، پرچم hadRecentInput خواهند داشت. بنابراین، می‌توان آن‌ها را از محاسبات خارج کرد.

پرچم hadRecentInput تنها برای ورودی‌های گسسته مانند ضربه زدن یا کلیک کردن درست است. تعاملات پیوسته مانند پیمایش، کشیدن، زوم کردن و غیره به عنوان ورودی‌های جدید در نظر گرفته نمی‌شوند. برای جزئیات بیشتر به  Layout Instability Spec رجوع کنید. 

 انیمیشن‌ها و اسلایدها (Animations and transitions)

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

ویژگی CSS transform به شما این امکان را می‌دهد تا بدون تغییر چیدمان، المان‌ها را متحرک کرده و به حرکت درآورید.

به جای تغییر ویژگی‌های height و width، از transform: scale استفاده کنید.

به منظور حرکت دادن المان‌ها از تغییر ویژگی‌های top، right، bottom و left اجتناب کنید و به جای آن از transform: translate استفاده کنید.

چگونه CLS را اندازه‌گیری کنیم؟

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

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

ابزارهای میدانی

Chrome User Experience Report

PageSpeed Insights

Search Console (Core Web Vitals report)

web-vitals JavaScript library

ابزارهای آزمایشگاهی

Chrome DevTools

Lighthouse

WebPageTest

اندازه‌گیری CLS در جاوا اسکریپت

به منظور اندازه‌گیری CLS در جاوا اسکریپت، شما می‌توانید از API ناپایداری چیدمان استفاده کنید. مثال ارائه شده نشان می‌دهد که چگونه می‌توانید یک PerformanceObserver ایجاد کنید که به دنبال ورودی‌های غیر منتظره‌ی layout-shif می‌گردد، آن‌ها را با هم جمع کرده و وارد کنسول می‌کند:

توجه: این کد نشان می‌دهد که چگونه ورودی‌های غیر منتظره‌ی layout-shif را جمع و وارد کنسول کنید. با این وجود، اندازه‌گیری CLS در جاوا اسکریپت بسیار پیچیده‌تر است. برای اطلاعات بیشتر ادامه مطلب را بخوانید.

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

در بخش بعدی، تفاوت‌های بین گزارش‌‌های API و چگونگی محاسبه‌ی معیار را بیان می‌کنیم.

تفاوت‌های بین معیار و API

اگر صفحه‌ای در کل عمر کاری خود در پس زمینه قرار دارد، نباید هیچ مقدار CLS را برای آن گزارش کرد.

اگر صفحه‌ای در حافظه‌ی نهان back/forward ذخیره شده است، مقدار CLS آن باید صفر تنظیم شود زیرا کاربران آن را به عنوان یک تجربه‌ی متمایز در نظر می‌گیرند.

API ورودی‌های تغییر چیدمان برای تغییراتی که در iframes رخ می‌دهند را گزارش نمی‌دهد، اما برای اندازه‌گیری درست CLS باید آن‌ها را در نظر بگیرید. فریم‌های فرعی می‌توانند با استفاده از API ورودی‌های تغییر چیدمان خود را برای تجمیع با فریم والد گزارش دهند.

علاوه بر این موارد استثنا، CLS به دلیل اندازه‌گیری کل طول عمر یک صفحه از پیچیدگی‌های بیشتری برخوردار است:

این امکان وجود دارد که کاربران یک زبانه را برای یک مدت زمان طولانی مثلا چند روز، چند هفته و حتی چند ماه باز نگه دارند. در واقع، ممکن است کاربر هرگز یک زبانه را نبندد.

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

به منظور مدیریت چنین مواردی، CLS باید هر وقت صفحه‌ای در پس زمینه است گزارش شود، علاوه بر هر زمانی که خالی شد (visibilitychange هر دو این سناریوها را پوشش می‌دهد). سپس، سیستم‌های تحلیلی دریافت‌کننده‌ی این داده‌ها باید مقدار نهایی CLS را محاسبه کنند.

به جای این که خودتان را با این مسائل درگیر کنید و بخواهید آن‌ها را به خاطر بسپارید، توسعه‌دهندگان می‌توانند از کتابخانه‌ی web-vitals جاوا اسکریپت برای محاسبه‌ی CLS استفاده کنند که همه‌ی موارد مذکور را شامل می‌شود:

برای مطالعه‌ی یک مثال کامل از چگونگی محاسبه‌ی CLS در جاوا اسکریپت می‌توانید به کد منبع getCLS مراجعه کنید.

در برخی موارد (مانند iframes متقاطع)، اندازه‌گیری CLS در جاوا اسکریپت امکان‌پذیر نیست. برای جزئیات بیشتر به بخش محدودیت‌ها در کتابخانه‌ی web-vitals رجوع کنید.

چگونه CLS را بهبود دهیم؟

برای بیشتر وبسایت‌ها، شما می‌توانید با پیروی از چند دستورالعمل و اصل اساسی، از تمام تغییرات چیدمان غیرمنتظره اجتناب کنید:

همیشه ویژگی‌های اندازه را بر روی المان‌های تصاویر و ویدئویی قرار دهید. یا در غیر این صورت، فضای مورد نیاز خود را با چیزی مانند باکس‌های نسبت ابعاد CSS کنار بگذارید. این رویکرد تضمین می‌کند که مرورگر می‌تواند در هنگام بارگذاری تصویر مقدار فضای کافی را در سند تخصیص دهد. توجه داشته باشید که شما می‌توانید از سیاست ویژگی رسانه‌ی بدون بعد استفاده کنید تا این روند را برای مرورگرهایی که از سیاست ویژگی پشتیبانی می‌کنند، اعمال کنید.

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

انیمیشن‌های اسلایدی را به انیمیشن‌هایی که موجب تغییر چیدمان می‌شوند، ترجیح دهید. اسلایدها را به گونه‌ای متحرک سازید که زمینه و پیوستگی لازم از یک حالت به حالت دیگر فراهم شود.

به منظور کسب اطلاعات بیشتر در مورد چگونگی بهینه کردن CLS به لینک‌های  Optimize CLS  و  Debug layout shifts مراجعه کنید.

گزارش تغییرات

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

به منظور کمک به شما در مدیریت این امر،‌ همه‌ی تغییرات چه در پیاده‌سازی و چه در تعاریف این معیارها در بخش CHANGELOG نوشته خواهند شد.

اگر به مطالعه در زمینه‌ی جدیدترین معیار بهبود سئو سایت علاقه‌مندید، پیشنهاد می‌کنیم از مجموعه مقالات core web vitals منتوریکس دیدن کنید. همچنین شما می‌توانید برای بررسی کسب‌وکار خود از این منظر، با منتوریکس تماس بگیرید و از مشاوره دیجیتال مارکتینگ  و خدمات سئو مجموعه ما برای بهبود عملکرد سایت‌تان بهره‌مند شوید.

تحریریه منتوریکس

این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.

انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وب‌سایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.