بهبود تعامل با رنگ بعدی (INP) در تلویزیون های هوشمند و دستگاه های ست تاپ باکس، به دلیل محدودیت های پشتیبانی محدود API و مشخصات متوسط سیستم، چالش های بسیار بیشتری را نسبت به مرورگرهای دسکتاپ ایجاد می کند. در این مطالعه موردی، خواهید فهمید که چگونه Disney+ Hotstar با موفقیت این موانع را برطرف کرد و در نتیجه مزایای تجاری قابل توجهی به دست آورد.
با افزایش پذیرش دستگاه‌های اتاق نشیمن، دیزنی+ هاتستار تشخیص داد که ارائه یک تجربه مرور یکپارچه در برنامه‌شان برای تلویزیون‌های هوشمند و جعبه‌های تنظیم، یک نیاز حیاتی کسب‌وکار است. با این حال، آنچه که رفع INP را برای چنین دستگاه‌هایی سخت‌تر می‌کند، این است که هر مدل تلویزیونی ممکن است از نسخه‌های مرورگر بسیار قدیمی استفاده کند - به عنوان مثال، تلویزیون LG 2020 از Chrome 68 استفاده می‌کند که در سال 2018 منتشر شد . برخی از این دستگاه‌ها را می‌توان به عنوان دستگاه‌های ارزان‌قیمت نیز دسته‌بندی کرد، به این معنی که نمی‌توانند به سرعت تبلت‌ها و لپ‌تاپ‌های پرچم‌دار به تعاملات پاسخ دهند.
شکل زیر زمان بارگذاری یک صفحه را بین لپ‌تاپ با شش بار کاهش سرعت پردازنده در Chrome DevTools و تلویزیون هوشمند مقایسه می‌کند. همانطور که مشاهده می شود، لپ تاپ هنوز هم بسیار سریعتر از یک تلویزیون هوشمند اخیراً تولید شده است.
در حالی که این آزمایش‌ها داده‌های آزمایشگاهی را به دست می‌آورد، دیزنی + Hotstar شروع به جمع‌آوری داده‌های میدانی برای Interaction to Next Paint (INP) از کاربران واقعی برنامه خود با استفاده از کتابخانه web-vitals کرد و مشاهده کرد که 75٪ از کاربران برنامه INP 675 میلی‌ثانیه‌ای را در این مدت تجربه کردند. فیلد، که با توجه به آستانه های INP یک تجربه کاربری "ضعیف" در نظر گرفته می شود.
این مطالعه موردی نشان می‌دهد که چگونه Disney+ Hotstar پاسخ‌دهی را در برنامه‌های پخش جریانی خود، به‌ویژه در دستگاه‌های رده پایین، بهبود بخشیده است. آنها با پایین آوردن مقادیر INP به 272 میلی ثانیه به 61٪ بهبود دست یافتند - هنوز بالاتر از آستانه "خوب" توصیه شده 200 میلی ثانیه است، اما بهبود قابل توجهی نسبت به آن.
یافته ها
Disney+ Hotstar این برنامه را با استفاده از روش onINP از ساخت اسناد کتابخانه web-vitals ابزارسازی کرد. در مرحله اولیه، چالش های مختلفی به خصوص در شناسایی عنصر هدف دقیق مواجه شد. این مشکل به این دلیل به وجود آمد که همه مراجع به دلیل یک کتابخانه ناوبری فضایی شخص ثالث که با برخی سفارشی‌سازی‌ها در برنامه Disney+ Hotstar استفاده می‌شد، به بدنه اشاره می‌کردند. این کتابخانه صرفاً به رویدادهای روی بدنه سند گوش می دهد و متعاقباً عنصر متمرکز واقعی را تعیین می کند و تمرکز بعدی را بر اساس فشار دادن کلید از راه دور پیش بینی می کند.
Disney+ Hotstar ابتدا با حل مسئله انتساب شروع کرد تا بتوان تعاملات مسئول مقادیر بالای INP را به درستی شناسایی کرد. برای این کار، Disney+ Hotstar ویژگی focusKey را که از قبل در کتابخانه پیمایش فضایی برای عنصر متمرکز کنونی و همچنین نقشه همه عناصر قابل فوکوس روی صفحه وجود دارد، ثبت کرد، که مشابه هدف تعامل موجود در ساخت اسناد وب حیاتی است. .
focusKey ، همراه با مسیر عنصری که آن را راه‌اندازی می‌کند.اکنون با اندازه‌گیری و اسناد مناسب، یافته‌های حاصل از داده‌های میدانی، تعاملات زیر را به عنوان مشکل‌سازترین برای INP گزارش کردند:
- ناوبری سینی چرخ فلک افقی.
- ناوبری سینی چرخ فلک عمودی.
- تعاملات در طول بارگذاری اولیه صفحه.
پس از نمایه سازی این تعاملات با پانل عملکرد در ابزارهای توسعه دهنده کروم، متوجه شد که کتابخانه پیمایش فضایی موقعیت همه عناصر قابل تمرکز را خوانده و یک درخت جدید ساخته است. این یک عملیات گران قیمت است که در هر فعل و انفعال، مانند حرکت از یک عنصر به عنصر دیگر، به هم زدن طرح‌بندی منجر می‌شود.
برای صفحه اصلی، یک درخت توسط کتابخانه ناوبری فضایی به شرح زیر تولید شد:
این بدان معنی است که اگر برنامه 10 سینی را نمایش دهد و هر سینی دارای 7 کارت باشد، 70 عنصر قابل فوکوس برای ظرف سینی، از جمله موارد ناوبری، وجود خواهد داشت. این تعداد زیادی از عناصر تعاملی است. همچنین از یک کتابخانه چرخ و فلک شخص ثالث استفاده شد که ابعاد هر کارت را در حین پیمایش افقی برای ترجمه ظرف می خواند و تأخیر تعامل بیشتری را اضافه می کرد.
رفع مشکلات
چندین مشکل مختلف وجود داشت که همه آنها باید به طور جداگانه حل می شدند تا مشکلات پاسخگویی کلی برنامه حل شود.
بهبود ناوبری سینی افقی
Disney+ Hotstar کتابخانه چرخ و فلک داخلی خود را ساخته است که با استفاده از انیمیشن های ترکیبی و خواندن ابعاد یک بار در هر سینی، نه یک بار در هر کارت، باعث ایجاد thrashing طرح نمی شود.
ناوبری فضایی فقط روی ریشه چرخ و فلک متمرکز است و برای پیمایش افقی بیشتر، چرخ فلک سفارشی ما وارد تصویر می شود. با این رویکرد، Disney+ Hotstar وابستگی ناوبری فضایی و کتابخانه چرخ و فلک قدیمی را که ابعاد را در هر مسیریابی می خواند، حذف کرد.
درخت ناوبری فضایی اینگونه به این بهینه سازی ها نگاه می کرد.
تصاویر زیر مقایسه عملکردی است که در پانل عملکرد Chrome DevTools قبل و بعد از اجرای چرخ فلک ما اندازه گیری شده است.
در نتیجه این کار، Disney+ Hotstar شاهد کاهش قابل توجهی در INP برنامه خود در این زمینه بود. آنها همچنین توانستند با حذف کتابخانه شخص ثالث، حدود 35 کیلوبایت (فشرده شده) ذخیره کنند. به عنوان یک امتیاز، این بهبودها همچنین به Disney+ Hotstar اجازه داد تا مدت زمان معیار سفارشی خود را که برای اندازه‌گیری کل زمان رندر صفحه اصلی استفاده می‌کند، کاهش دهد، زیرا به دلیل کاهش گره‌های ناوبری فضایی، طرح‌بندی‌ها کمتر فعال می‌شوند.
بهبود ناوبری سینی عمودی
Disney+ Hotstar همچنین عملکرد ناوبری سینی عمودی را با بارگذاری تنبل سینی‌ها به جای بارگیری همه آنها از جلو، بهبود بخشید. بنابراین هنگام بارگذاری صفحه، به جای بارگیری 10 نمونه از سینی - که در داخل هر کدام یک جزء چرخ فلک و تعدادی تصویر دارند - برنامه فقط دو سینی را که در نمای نمای قابل مشاهده هستند، به اضافه یک سینی اضافی در بالا و پایین بارگذاری می کند. رندر همچنین با استفاده از استراتژی بازده setTimeout() به وظایف متعدد تقسیم شد تا رشته اصلی فرصت بیشتری برای مدیریت تعاملات کاربر داشته باشد.
تعاملات در طول بارگذاری اولیه صفحه
INP برای برنامه هایی که تعداد زیادی از اسکریپت ها را در طول راه اندازی برنامه پردازش می کنند، بالا خواهد بود. این به این دلیل است که مرورگر باید آن اسکریپت ها را دانلود، تجزیه و ارزیابی کند. در حالی که همه اینها اتفاق می افتد، موضوع اصلی برای مدت زمان طولانی اشغال خواهد شد و قادر به پاسخگویی سریع به تعاملات کاربر نیست.
Disney+ Hotstar متوجه شد که در حال پردازش اسکریپت‌های بیشتری از آنچه واقعاً در هنگام شروع برنامه (زمان پخش صفحه نمایش) لازم بود، دارند تا سرعت بارگذاری صفحات آینده را سریعتر کنند. این کار وظایف ارزیابی اسکریپت اضافی را متحمل شد، که همچنین پتانسیل تأثیر منفی بر INP را داشت.
برای رفع این مشکل، Disney+ Hotstar بارگذاری پویا اکثر دارایی‌ها را در نظر گرفت تا در زمان راه‌اندازی برنامه صرفه‌جویی کنند. با این حال، انجام این کار باعث افزایش زمان بارگذاری برای پیمایش به صفحات آینده می شود، زیرا جاوا اسکریپت دیگر با این تغییر از قبل بارگیری نمی شود. برای مقابله با این موضوع، Disney+ Hotstar یک کتابخانه پیش‌بارگذاری دارایی داخلی ایجاد کرد که تعیین می‌کند کدام صفحه ممکن است در سفر کاربر بعدی بیاید و دارایی‌ها را برای آن صفحه از پیش بارگذاری می‌کند. مثلا:
- هنگامی که کاربر در صفحه ورود است، کتابخانه پیش بارگذاری دارایی دارایی ها را برای صفحه انتخاب نمایه بارگذاری می کند.
- در صفحه انتخاب نمایه، دارایی های صفحه اصلی بارگیری می شوند.
- در صفحه اصلی، دارایی های صفحه جزئیات بارگیری می شوند.
- در نهایت، دارایی های صفحه تماشا در صفحه جزئیات بارگذاری می شوند.
بهینه‌سازی بارگذاری دارایی به دیزنی + Hotstar در دو چیز کمک کرد: کاهش INP برنامه (زیرا رشته اصلی اکنون برای اجرای تعاملات کاربر نسبتاً رایگان بود)، و همچنین کاهش استفاده از حافظه در دستگاه‌های سطح پایین.
این تغییرات منجر به کاهش 32 درصدی شماره INP گزارش شده از میدان شد همانطور که در تصویر زیر مشاهده می شود.
سایر پیشرفت ها
Disney+ Hotstar همچنین متوجه شد که کارهای طولانی روی چند رویداد کاربر وجود دارد که می‌توان آنها را با تسلیم شدن به رشته اصلی تقسیم کرد. اجرا.
به عنوان مثال، هنگامی که کاربر از طریق چندین کارت در سینی حرکت می کند، موارد زیر رخ می دهد:
- کارت بعدی متمرکز است.
- کارت در صورت نیاز ترجمه می شود.
- Spotlight به روز می شود.
- تریلر - در صورت وجود - واکشی شده و پخش آغاز می شود.
- رویدادهای Analytics برای این اقدام فعال می شوند.
اگر در طول این فرآیند، کاربر روی کارت بعدی تمرکز کند، بقیه مراحل نیازی به اجرا ندارند. به عنوان مثال، اگر کاربر به کارت بعدی رفته باشد، واکشی تریلر و مقداردهی اولیه بازیکن برای یک عنوان خاص دیگر مورد نیاز نخواهد بود. از این رو، آن وظایف را می توان لغو کرد تا موضوع اصلی آزاد شود.
ابزار تولید وظیفه Disney+ Hotstar تابعی را می‌پذیرد که یک وظیفه است، و وقتی کار دیگری در وسط قرار می‌گیرد، وظیفه قبلی متوقف می‌شود و در اجرای کار غیر ضروری ما صرفه‌جویی می‌شود و به سرعت بر روی کار ضروری عمل می‌کنیم.
نتایج
به طور کلی، INP برنامه Disney+ Hotstar از 675 میلی‌ثانیه به 272 میلی‌ثانیه کاهش یافت که نشان‌دهنده بهبودی نزدیک به 60 درصد است! علاوه بر این، تاخیرهای تعامل سینی به طور خاص از حدود 400 میلی ثانیه به حدود 100 میلی ثانیه کاهش یافت.
تاثیر کسب و کار: بازدیدهای هفتگی کارت از 111 به 226 برای هر کاربر افزایش یافته است! این یک افزایش 100 درصدی است و نشان می‌دهد که یک رابط سریعتر و پاسخ‌گوتر احتمالاً کاربران را برای مدت زمان طولانی‌تری درگیر می‌کند.
این تازه شروع است، و Disney+ Hotstar تنها سطح بهبود عملکرد رندر و تعامل را با معیار INP به‌عنوان راهنمای خود خراش داده است، و تیم آنها هیجان‌زده هستند که در آینده نزدیک، Disney+ Hotstar را به تجربه‌ای نرم برای مشتریان خود تبدیل کنند.
با تشکر از Ayush، Ajay، Kiran، Milan و Richa از Disney+ Hotstar برای تلاش‌هایشان برای تغییر روند.
تشکر ویژه از Ankeet Maini ، مدیر مهندسی Disney+ Hotstar، و Rahul Krishnan P ، رئیس تجربه مشتری Disney+ Hotstar برای حمایت از این کار نوآورانه، و از Jeremy Wagner، Gilberto، Barry Pollard، و Brendan Kenny از Google برای بررسی و کمک به انتشار این مطالعه موردی.