درباره برنامه‌های ما برای بهبود معیار تغییر چیدمان تجمعی اطلاعات کسب کنید و به ما بازخورد بدهید.
تغییر چیدمان تجمعی (CLS) معیاری است که ثبات بصری یک صفحه وب را اندازه گیری می کند. این متریک تغییر چیدمان تجمعی نامیده می شود زیرا امتیاز هر جابجایی فردی در طول عمر صفحه جمع می شود.
در حالی که همه جابجایی‌های چیدمان تجربه‌های کاربری ضعیفی هستند، اما در صفحاتی که طولانی‌تر باز هستند، بیشتر می‌شوند. به همین دلیل است که تیم سنجش سرعت کروم تصمیم گرفت معیار CLS را بهبود بخشد تا نسبت به زمان صرف شده در یک صفحه خنثی‌تر باشد.
مهم است که این معیار بر روی تجربه کاربر در طول عمر کامل صفحه تمرکز کند، زیرا متوجه شده‌ایم که کاربران اغلب پس از بارگیری، هنگام پیمایش یا پیمایش در صفحات، تجربیات منفی دارند. اما ما نگرانی هایی در مورد اینکه چگونه این کار بر صفحات با عمر طولانی تاثیر می گذارد شنیده ایم - صفحاتی که کاربر معمولاً برای مدت طولانی باز است. انواع مختلفی از صفحات وجود دارد که تمایل دارند مدت بیشتری باز بمانند. برخی از رایج ترین برنامه های رسانه های اجتماعی با برنامه های اسکرول بی نهایت و تک صفحه ای هستند.
تجزیه و تحلیل داخلی صفحات با عمر طولانی با امتیاز CLS بالا نشان داد که بیشتر مشکلات ناشی از الگوهای زیر است:
- اسکرول‌های نامتناهی که محتوا را با پیمایش کاربر تغییر می‌دهند .
- کنترل‌کننده‌های ورودی بیش از 500 میلی‌ثانیه طول می‌کشد تا رابط کاربری را در پاسخ به تعامل کاربر، بدون هیچ نوع مکان یا الگوی اسکلتی، به‌روزرسانی کنند.
در حالی که ما توسعه‌دهندگان را تشویق می‌کنیم تا این تجربیات کاربر را بهبود بخشند، ما همچنین در جهت بهبود معیارها و جستجوی بازخورد در مورد رویکردهای احتمالی کار می‌کنیم.
چگونه می توانیم تصمیم بگیریم که یک معیار جدید بهتر است؟
قبل از فرو رفتن در طراحی متریک، می‌خواستیم اطمینان حاصل کنیم که ایده‌های خود را در طیف گسترده‌ای از صفحات وب و موارد استفاده واقعی در دنیای واقعی ارزیابی کرده‌ایم. برای شروع، ما یک مطالعه کاربر کوچک طراحی کردیم.
ابتدا، ویدیوها و ردپای کروم از 34 سفر کاربر را از طریق وب سایت های مختلف ضبط کردیم. در انتخاب سفرهای کاربر، ما چند چیز را هدف قرار دادیم:
- انواع مختلف سایت ها مانند سایت های خبری و خرید.
- انواع سفرهای کاربر، مانند بارگذاری اولیه صفحه، پیمایش، پیمایش برنامه های تک صفحه ای و تعاملات کاربر.
- تنوعی از تعداد و شدت تغییرات چیدمان فردی در سایت‌ها.
- تجربیات منفی کمی در سایت‌ها به غیر از تغییرات طرح‌بندی.
ما از 41 نفر از همکارانمان خواستیم که دو ویدیو را در یک زمان تماشا کنند و رتبه بندی کنند که کدام یک از این جفت ها از نظر تغییر چیدمان بهتر است. از این رتبه‌بندی‌ها، یک ترتیب رتبه‌بندی ایده‌آل از سایت‌ها ایجاد کردیم. نتایج رتبه‌بندی کاربران، سوء ظن ما را تأیید کرد که همکاران ما، مانند اکثر کاربران، واقعاً از تغییر طرح‌بندی پس از بارگذاری، به‌ویژه در حین پیمایش و پیمایش‌های تک صفحه‌ای برنامه، ناامید شده‌اند. دیدیم که برخی از سایت ها در طول این فعالیت ها تجربه کاربری بسیار بهتری نسبت به سایرین دارند.
از آنجایی که ما ردپای کروم را همراه با ویدیوها ضبط کردیم، همه جزئیات تغییرات طرح‌بندی فردی در هر سفر کاربر را داشتیم. ما از آنها برای محاسبه مقادیر متریک برای هر ایده برای هر سفر کاربر استفاده کردیم. این به ما امکان داد تا ببینیم که هر گونه متریک چگونه سفرهای کاربر را رتبه بندی می کند و هر کدام چقدر با رتبه ایده آل متفاوت است.
چه ایده های متریکی را آزمایش کردیم؟
استراتژی های پنجره
اغلب صفحات دارای چندین تغییر چیدمان هستند که نزدیک به هم جمع شده اند، زیرا عناصر می توانند چندین بار جابه جا شوند که محتوای جدید تکه تکه شود. این ما را بر آن داشت تا تکنیک هایی را برای گروه بندی شیفت ها با هم امتحان کنیم. برای انجام این کار، ما به سه رویکرد پنجره‌سازی نگاه کردیم:
- پنجره های در حال چرخش
- پنجره های کشویی
- پنجره های جلسه
در هر یک از این مثال‌ها، صفحه دارای تغییرات طرح‌بندی با شدت متفاوت در طول زمان است. هر نوار آبی نشان دهنده یک تغییر چیدمان است و طول آن نشان دهنده امتیاز آن تغییر است. تصاویر روش‌هایی را نشان می‌دهند که استراتژی‌های پنجره‌سازی مختلف، تغییرات طرح‌بندی را در طول زمان گروه‌بندی می‌کنند.
پنجره های در حال چرخش
ساده ترین روش این است که صفحه را به پنجره هایی با اندازه های مساوی تقسیم کنید. به آنها پنجره های غلتشی می گویند. در بالا متوجه خواهید شد که نوار چهارم واقعاً به نظر می رسد که باید در دومین پنجره غلتشی گروه بندی شود، اما به دلیل اینکه اندازه پنجره ها همه ثابت است، به جای آن در پنجره اول قرار دارد. اگر تفاوت‌های جزئی در زمان‌بندی بارگذاری یا تعامل کاربر در صفحه وجود داشته باشد، ممکن است تغییرات طرح‌بندی یکسان در طرف‌های مختلف مرزهای پنجره درحال سقوط رخ دهد.
پنجره های کشویی
رویکردی که به ما امکان می‌دهد گروه‌بندی‌های احتمالی بیشتری را با طول یکسان ببینیم، به‌روزرسانی مداوم پنجره بالقوه در طول زمان است. تصویر بالا یک پنجره کشویی را در یک زمان نشان می دهد، اما ما می توانیم تمام پنجره های کشویی ممکن یا زیر مجموعه ای از آنها را برای ایجاد یک متریک نگاه کنیم.
پنجره های جلسه
اگر می‌خواستیم روی شناسایی نواحی صفحه با تغییرات چیدمان انبوه تمرکز کنیم، می‌توانیم هر پنجره را با یک شیفت شروع کنیم و به رشد آن ادامه دهیم تا زمانی که با فاصله‌ای با اندازه معین بین تغییرات طرح‌بندی مواجه شویم. این رویکرد تغییرات طرح‌بندی را با هم گروه‌بندی می‌کند و بیشتر تجربه کاربر بدون تغییر را نادیده می‌گیرد. یک مشکل بالقوه این است که اگر هیچ شکافی در تغییرات طرح‌بندی وجود نداشته باشد، یک متریک مبتنی بر پنجره‌های جلسه می‌تواند مانند متریک فعلی CLS بدون محدودیت رشد کند. بنابراین ما این را با حداکثر اندازه پنجره نیز امتحان کردیم.
اندازه های پنجره
معیار ممکن است بسته به اندازه واقعی پنجره ها نتایج بسیار متفاوتی ارائه دهد، بنابراین ما چندین اندازه مختلف پنجره را امتحان کردیم:
- هر شیفت به عنوان پنجره خودش (بدون پنجره)
- 100 میلی‌ثانیه
- 300 میلی‌ثانیه
- 1 ثانیه
- 5 ثانیه
خلاصه سازی
ما راه های زیادی را برای خلاصه کردن پنجره های مختلف امتحان کردیم.
صدک ها
ما به حداکثر مقدار پنجره و همچنین صدک 95، صدک 75 و میانه نگاه کردیم.
میانگین
ما به میانگین مقدار پنجره نگاه کردیم.
بودجه ها
ما تعجب کردیم که آیا ممکن است حداقل امتیاز تغییر طرح وجود داشته باشد که کاربران متوجه آن نشوند، و ما فقط می‌توانیم تغییرات طرح‌بندی را روی آن «بودجه» در امتیاز حساب کنیم. بنابراین برای مقادیر مختلف «بودجه» بالقوه، درصد جابه‌جایی بیش از بودجه و نمره کل تغییر نسبت به بودجه را بررسی کردیم.
استراتژی های دیگر
ما همچنین به بسیاری از استراتژی‌ها نگاه کردیم که شامل ویندوز نمی‌شدند، مانند کل تغییر چیدمان تقسیم بر زمان در صفحه، و میانگین بدترین N جابجایی فردی.
نتایج اولیه
به طور کلی، ما 145 تعریف مختلف متریک را بر اساس جایگشت ایده های بالا آزمایش کردیم. برای هر معیار، ما تمام سفرهای کاربر را بر اساس امتیاز آنها در متریک رتبه‌بندی کردیم و سپس معیارها را بر اساس میزان نزدیک بودن آنها به رتبه‌بندی ایده‌آل رتبه‌بندی کردیم.
برای به دست آوردن یک پایه، ما همچنین همه سایت ها را بر اساس امتیاز CLS فعلی آنها رتبه بندی کردیم. CLS در رده 32 قرار گرفت و با 13 استراتژی دیگر مساوی بود، بنابراین بهتر از بسیاری از جابجایی های استراتژی های بالا بود. برای اطمینان از معنی دار بودن نتایج، ما همچنین در سه ترتیب تصادفی اضافه کردیم. همانطور که انتظار می رفت، ترتیب های تصادفی بدتر از هر استراتژی آزمایش شده بود.
برای درک اینکه آیا ممکن است برای مجموعه داده ها بیش از حد مناسب باشیم، پس از تجزیه و تحلیل خود، چند ویدیو و ردیابی تغییر چیدمان جدید را ضبط کردیم، آن ها را به صورت دستی رتبه بندی کردیم و دیدیم که رتبه بندی های متریک برای مجموعه داده های جدید و اصلی بسیار مشابه است.
چند استراتژی مختلف در رتبه بندی برجسته بودند.
بهترین استراتژی ها
وقتی استراتژی ها را رتبه بندی کردیم، متوجه شدیم که سه نوع استراتژی در صدر فهرست قرار دارند. هر کدام تقریباً عملکرد یکسانی داشتند، بنابراین ما قصد داریم با تجزیه و تحلیل عمیق تر در مورد هر سه به جلو حرکت کنیم. ما همچنین می‌خواهیم بازخورد توسعه‌دهندگان را بشنویم تا بفهمیم آیا عواملی خارج از تجربه کاربر وجود دارد که باید هنگام تصمیم‌گیری بین آنها در نظر بگیریم. (برای نحوه ارائه بازخورد به زیر مراجعه کنید.)
صدک بالای پنجره های بلند
چند استراتژی پنجره‌سازی با اندازه‌های پنجره بلند به خوبی کار می‌کردند:
- پنجره های کشویی 1 ثانیه
- پنجره های جلسه 5 ثانیه با فاصله 1 ثانیه محدود می شود
- پنجره‌های جلسه با فاصله 1 ثانیه‌ای بدون پوشش
همه اینها در هر دو صدک 95 و حداکثر رتبه بسیار خوبی داشتند.
اما برای چنین اندازه‌های پنجره‌ای بزرگ، ما نگران استفاده از صدک 95 بودیم - اغلب ما فقط به 4-6 پنجره نگاه می‌کردیم، و گرفتن صدک 95 آن مقدار زیادی درون یابی است. مشخص نیست که درون یابی از نظر مقدار متریک چه می کند. حداکثر مقدار بسیار واضح تر است، بنابراین تصمیم گرفتیم با بررسی حداکثر به جلو حرکت کنیم.
میانگین پنجره های جلسه با شکاف های طولانی
میانگین نمرات تمام پنجره های جلسه بدون پوشش با فاصله 5 ثانیه بین آنها بسیار خوب عمل کرد. این استراتژی چند ویژگی جالب دارد:
- اگر صفحه بین جابجایی‌های طرح‌بندی فاصله نداشته باشد، در نهایت یک پنجره طولانی جلسه با همان امتیاز CLS فعلی است.
- این معیار زمان بیکاری را مستقیماً در نظر نمی گرفت. فقط به جابجایی‌هایی که در صفحه اتفاق می‌افتد نگاه می‌کرد، و نه در زمان‌هایی که صفحه تغییر نمی‌کرد.
صدک بالای پنجره های کوتاه
حداکثر 300 میلی‌ثانیه پنجره کشویی رتبه بسیار بالایی دارد، و همچنین صدک 95. برای اندازه پنجره کوتاه‌تر، درون‌یابی صدک کمتری نسبت به اندازه‌های پنجره بزرگتر وجود دارد، اما ما همچنین نگران پنجره‌های کشویی "تکرار" بودیم - اگر مجموعه‌ای از تغییرات چیدمان در دو فریم اتفاق بیفتد، چندین پنجره 300 میلی‌ثانیه وجود دارد که شامل آنها می‌شود. گرفتن حداکثر بسیار واضح تر و ساده تر از گرفتن صدک 95 است. بنابراین دوباره تصمیم گرفتیم با بررسی حداکثری به جلو برویم.
استراتژی هایی که به نتیجه نرسیدند
استراتژی‌هایی که سعی داشتند به تجربه «متوسط» زمان صرف شده هم بدون تغییر چیدمان و هم با تغییر چیدمان نگاه کنند، عملکرد بسیار ضعیفی داشتند. هیچ یک از خلاصه های میانه یا صدک 75 هر استراتژی پنجره سازی، سایت ها را به خوبی رتبه بندی نکرد. همچنین مجموع طرح‌بندی با گذشت زمان تغییر نکرد.
ما تعدادی "بودجه" مختلف را برای تغییرات قابل قبول طرح ارزیابی کردیم:
- درصد تغییر چیدمان بالاتر از مقداری بودجه. برای بودجه های مختلف، همه اینها رتبه بسیار ضعیفی داشتند.
- میانگین تغییر چیدمان بالاتر از مقداری مازاد. اکثر تغییرات در این استراتژی عملکرد ضعیفی داشتند، اما میانگین مازاد بر یک جلسه طولانی با شکاف بزرگ تقریباً به همان اندازه میانگین پنجره های جلسه با شکاف طولانی بود. ما تصمیم گرفتیم فقط با دومی جلو برویم زیرا ساده تر است.
مراحل بعدی
تجزیه و تحلیل در مقیاس بزرگتر
ما استراتژی‌های برتر فهرست‌شده در بالا را در Chrome پیاده‌سازی کرده‌ایم تا بتوانیم داده‌هایی در مورد استفاده در دنیای واقعی برای مجموعه بسیار بزرگ‌تری از وب‌سایت‌ها دریافت کنیم. ما قصد داریم از رویکرد مشابهی در رتبه بندی سایت ها بر اساس امتیازات متریک آنها برای انجام تجزیه و تحلیل در مقیاس بزرگتر استفاده کنیم:
- همه سایت ها را بر اساس CLS، و بر اساس هر نامزد جدید معیار رتبه بندی کنید.
- کدام سایت‌ها توسط CLS و هر نامزد متفاوت‌تر رتبه‌بندی می‌شوند؟ آیا وقتی به این سایت ها نگاه می کنیم چیز غیر منتظره ای پیدا می کنیم؟
- بزرگترین تفاوت بین نامزدهای متریک جدید چیست؟ آیا هیچ یک از تفاوت ها به عنوان مزایا یا معایب یک نامزد خاص برجسته می شود؟
- تجزیه و تحلیل بالا را تکرار کنید، اما زمان صرف شده برای هر بارگذاری صفحه را تعیین کنید. آیا ما شاهد بهبود مورد انتظار برای بارگذاری صفحات طولانی مدت با تغییر طرح بندی قابل قبول هستیم؟ آیا نتایج غیرمنتظره ای برای صفحات کوتاه مدت می بینیم؟
بازخورد در مورد رویکرد ما
ما دوست داریم در مورد این رویکردها از توسعه دهندگان وب بازخورد دریافت کنیم. برخی از مواردی که باید هنگام بررسی رویکردهای جدید در نظر داشته باشید:
چیزی که تغییر نمی کند
ما می خواهیم روشن کنیم که بسیاری از چیزها با یک رویکرد جدید تغییر نخواهند کرد:
- هیچ یک از ایده‌های متریک ما نحوه محاسبه امتیازات تغییر طرح‌بندی برای فریم‌های جداگانه را تغییر نمی‌دهد، فقط روشی که چندین فریم را خلاصه می‌کنیم. این بدان معناست که جاوا اسکریپت API برای تغییرات طرح‌بندی ثابت می‌ماند و رویدادهای اساسی در ردیابی‌های کروم که ابزارهای توسعه‌دهنده استفاده می‌کنند نیز ثابت می‌مانند، بنابراین تغییر طرح‌بندی در ابزارهایی مانند WebPageTest و Chrome DevTools به همان روش ادامه می‌دهد.
- ما به سختی به کار روی آسان کردن معیارها برای توسعه دهندگان ادامه خواهیم داد، از جمله آنها در کتابخانه web-vitals ، مستندسازی در web.dev ، و گزارش آنها در ابزارهای توسعه دهنده خود مانند Lighthouse.
معاوضه بین معیارها
یکی از استراتژی‌های برتر، پنجره‌های تغییر چیدمان را به صورت میانگین خلاصه می‌کند و بقیه حداکثر پنجره را گزارش می‌کنند. برای صفحاتی که برای مدت طولانی باز هستند، میانگین احتمالاً مقدار معرف بیشتری را گزارش می‌کند، اما به طور کلی احتمالاً برای توسعه‌دهندگان آسان‌تر خواهد بود که روی یک پنجره واحد عمل کنند—آنها می‌توانند در صورت وقوع، عناصری که جابه‌جا شده‌اند، ثبت نام کنند، و به زودی. ما دوست داریم در مورد اینکه کدام یک برای توسعه دهندگان مهمتر است بازخورد داشته باشیم.
آیا متوجه می شوید که پنجره های کشویی یا جلسه راحت تر قابل درک هستند؟ آیا تفاوت ها برای شما مهم است؟
نحوه ارائه بازخورد
می‌توانید معیارهای تغییر طرح‌بندی جدید را در هر سایتی با استفاده از نمونه‌های پیاده‌سازی جاوا اسکریپت یا فورک افزونه Core Web Vitals امتحان کنید.
لطفاً بازخورد خود را به گروه Google web-vitals-feedback ما ایمیل کنید، با "[Layout Shift Metrics]" در خط موضوع. ما واقعا مشتاقانه منتظر شنیدن نظر شما هستیم!