تکامل متریک CLS

برنامه‌هایی برای بهبود معیار CLS به منظور منصفانه‌تر بودن نسبت به صفحات با عمر طولانی.

Annie Sullivan

Hongbo Song

تاریخ انتشار: 7 آوریل 2021

ما (تیم سنجش سرعت Chrome) اخیراً تحقیقات اولیه خود را در مورد گزینه هایی برای عادلانه تر کردن معیار CLS برای صفحاتی که برای مدت طولانی باز هستند، تشریح کردیم. ما بازخوردهای بسیار مفیدی دریافت کرده‌ایم و پس از تکمیل تجزیه و تحلیل در مقیاس بزرگ، تغییری را که می‌خواهیم در متریک ایجاد کنیم نهایی کرده‌ایم: حداکثر پنجره جلسه با فاصله 1 ثانیه، محدود به 5 ثانیه .

برای جزئیات بیشتر بخوانید!

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

ما همه بازخوردهای دریافتی از جامعه توسعه‌دهنده را بررسی کردیم و آن‌ها را در نظر گرفتیم.

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

• همه گزینه ها همبستگی بین زمان صرف شده در صفحه و نمره تغییر طرح را کاهش دادند.
• هیچ یک از گزینه ها به امتیاز بدتری برای هیچ صفحه ای منجر نشد. بنابراین نیازی به نگرانی نیست که این تغییر باعث بدتر شدن امتیاز سایت شما می شود.

نقاط تصمیم گیری

چرا پنجره جلسه؟

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

برای بررسی پنجره های جلسه، یک مثال در اینجا آمده است:

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

بر اساس تحقیقات اولیه ، ما یک شکاف 1 ثانیه ای را بین پنجره های جلسه انتخاب کردیم و این شکاف در تجزیه و تحلیل در مقیاس بزرگ ما به خوبی عمل کرد. بنابراین "Session Gap" نشان داده شده در مثال بالا 1 ثانیه است.

چرا پنجره حداکثر جلسه؟

ما در تحقیق اولیه خود استراتژی های خلاصه سازی را به دو گزینه محدود کردیم:

• میانگین امتیاز تمام پنجره‌های جلسه، برای پنجره‌های جلسه بسیار بزرگ (پنجره‌های بدون پوشش با فاصله ۵ ثانیه بین آنها).
• حداکثر امتیاز تمام پنجره‌های جلسه، برای پنجره‌های جلسات کوچک‌تر (حدود ۵ ثانیه، با فاصله ۱ ثانیه بین آنها).

پس از تحقیقات اولیه، ما هر معیار را به کروم اضافه کردیم تا بتوانیم تجزیه و تحلیلی در مقیاس بزرگ روی میلیون‌ها URL انجام دهیم. در تجزیه و تحلیل در مقیاس بزرگ، URL های زیادی با الگوهای تغییر طرح مانند این پیدا کردیم:

در سمت راست پایین، می‌توانید ببینید که تنها یک تغییر طرح‌بندی کوچک در Session Window 2 وجود دارد که به آن امتیاز بسیار پایینی می‌دهد. این بدان معناست که میانگین نمره بسیار پایین است. اما اگر توسعه دهنده آن تغییر طرح کوچک را برطرف کند، چه؟ سپس امتیاز فقط در پنجره 1 جلسه محاسبه می شود، به این معنی که امتیاز صفحه تقریبا دو برابر می شود . برای توسعه دهندگان واقعاً گیج کننده و دلسرد کننده خواهد بود که تغییرات طرح بندی خود را بهبود بخشند و متوجه شوند که امتیاز بدتر شده است. و حذف این تغییر چیدمان کوچک بدیهی است که برای تجربه کاربر کمی بهتر است، بنابراین نباید امتیاز را بدتر کند.

به دلیل این مشکل با میانگین ها، ما تصمیم گرفتیم با پنجره های کوچکتر، درپوش و حداکثر جلو برویم. بنابراین در مثال بالا، Session Window 2 نادیده گرفته می‌شود و تنها مجموع تغییرات طرح‌بندی در Session Window 1 گزارش می‌شود.

چرا 5 ثانیه؟

ما چندین اندازه پنجره را ارزیابی کردیم و دو چیز پیدا کردیم:

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

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

این چگونه بر امتیاز CLS صفحه من تأثیر می گذارد؟

از آنجایی که این به روز رسانی CLS یک صفحه را محدود می کند، هیچ صفحه ای در نتیجه این تغییر امتیاز بدتری نخواهد داشت .

و بر اساس تجزیه و تحلیل ما، 55٪ از منشاء هیچ تغییری در CLS در صدک 75 مشاهده نخواهند کرد . این به این دلیل است که صفحات آنها یا در حال حاضر هیچ تغییر طرح بندی ندارند یا تغییراتی که دارند قبلاً به یک پنجره واحد محدود شده اند.

بقیه مبداها با این تغییر نمرات بهبود یافته در صدک 75 را خواهند دید. اکثر آنها فقط بهبود جزئی را مشاهده می کنند، اما حدود 3٪ نمرات خود را از داشتن رتبه "نیاز به بهبود" یا "ضعیف" به داشتن رتبه "خوب" بهبود می بخشند. همانطور که در پست قبلی ما توضیح داده شد، این صفحات تمایل دارند از اسکرول های بی نهایت استفاده کنند یا به روز رسانی های آهسته UI دارند.

چگونه می توانم آن را امتحان کنم؟

به زودی ابزارهای خود را برای استفاده از تعریف متریک جدید به روز خواهیم کرد! تا آن زمان، می‌توانید نسخه به‌روزشده CLS را در هر سایتی با استفاده از نمونه‌های پیاده‌سازی جاوا اسکریپت یا فورک افزونه Web Vitals امتحان کنید.

با تشکر از همه کسانی که وقت گذاشتند و پست قبلی را مطالعه کردند و نظرات خود را ارائه کردند.