بهبود تعامل با رنگ بعدی (INP) در تلویزیون های هوشمند و دستگاه های ست تاپ باکس، به دلیل محدودیت های پشتیبانی محدود API و مشخصات متوسط سیستم، چالش های بسیار بیشتری را نسبت به مرورگرهای دسکتاپ ایجاد می کند. در این مطالعه موردی، خواهید فهمید که چگونه Disney+ Hotstar با موفقیت این موانع را برطرف کرد و در نتیجه مزایای تجاری قابل توجهی به دست آورد.
با افزایش پذیرش دستگاههای اتاق نشیمن، دیزنی+ هاتستار تشخیص داد که ارائه یک تجربه مرور یکپارچه در برنامهشان برای تلویزیونهای هوشمند و جعبههای تنظیم، یک نیاز حیاتی کسبوکار است. با این حال، آنچه که رفع INP را برای چنین دستگاههایی سختتر میکند، این است که هر مدل تلویزیونی ممکن است از نسخههای مرورگر بسیار قدیمی استفاده کند - به عنوان مثال، تلویزیون LG 2020 از Chrome 68 استفاده میکند که در سال 2018 منتشر شد . برخی از این دستگاهها را میتوان به عنوان دستگاههای ارزانقیمت نیز دستهبندی کرد، به این معنی که نمیتوانند به سرعت تبلتها و لپتاپهای پرچمدار به تعاملات پاسخ دهند.
شکل زیر زمان بارگذاری یک صفحه را بین لپتاپ با شش بار کاهش سرعت پردازنده در Chrome DevTools و تلویزیون هوشمند مقایسه میکند. همانطور که مشاهده می شود، لپ تاپ هنوز هم بسیار سریعتر از یک تلویزیون هوشمند اخیراً تولید شده است.
![تصویری از نمایهساز عملکرد در Chrome DevTools که عملکرد بارگیری برنامه Disney+ HotStar را در لپتاپ نمایه میکند. یک معیار سفارشی به نام PAGE_RENDER_TIME در 1.39 ثانیه وارد میشود.](https://web.dev/static/case-studies/hotstar-inp/image/fig-1.png?authuser=2&hl=fa)
![تصویری از نمایهساز عملکرد در Chrome DevTools که عملکرد بارگیری برنامه Disney+ HotStar را در یک دستگاه تلویزیون هوشمند واقعی نمایه میکند. یک معیار سفارشی به نام PAGE_RENDER_TIME در 6.47 ثانیه وارد میشود.](https://web.dev/static/case-studies/hotstar-inp/image/fig-2.png?authuser=2&hl=fa)
در حالی که این آزمایشها دادههای آزمایشگاهی را به دست میآورد، دیزنی + 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 آنها، همراه با تأخیر تعامل برای هر یک.](https://web.dev/static/case-studies/hotstar-inp/image/fig-3.png?authuser=2&hl=fa)
focusKey
، همراه با مسیر عنصری که آن را راهاندازی میکند.اکنون با اندازهگیری و اسناد مناسب، یافتههای حاصل از دادههای میدانی، تعاملات زیر را به عنوان مشکلسازترین برای INP گزارش کردند:
- ناوبری سینی چرخ فلک افقی.
- ناوبری سینی چرخ فلک عمودی.
- تعاملات در طول بارگذاری اولیه صفحه.
![تصویری از عنصری که برای پیمایش چرخ فلک سینی توسط کلید فوکوس آن مسئول است.](https://web.dev/static/case-studies/hotstar-inp/image/fig-4.png?authuser=2&hl=fa)
پس از نمایه سازی این تعاملات با پانل عملکرد در ابزارهای توسعه دهنده کروم، متوجه شد که کتابخانه پیمایش فضایی موقعیت همه عناصر قابل تمرکز را خوانده و یک درخت جدید ساخته است. این یک عملیات گران قیمت است که در هر فعل و انفعال، مانند حرکت از یک عنصر به عنصر دیگر، به هم زدن طرحبندی منجر میشود.
برای صفحه اصلی، یک درخت توسط کتابخانه ناوبری فضایی به شرح زیر تولید شد:
![یک درخت نمونه تولید شده توسط کتابخانه ناوبری فضایی. در زیر ریشه گره های Navbar و Tray Container قرار دارند. به طور خاص، گره Tray Container شامل سه گره کارت است که هر کدام دارای زیرگره های متعددی هستند که به اندازه بزرگ DOM کمک می کنند.](https://web.dev/static/case-studies/hotstar-inp/image/fig-5.png?authuser=2&hl=fa)
این بدان معنی است که اگر برنامه 10 سینی را نمایش دهد و هر سینی دارای 7 کارت باشد، 70 عنصر قابل فوکوس برای ظرف سینی، از جمله موارد ناوبری، وجود خواهد داشت. این تعداد زیادی از عناصر تعاملی است. همچنین از یک کتابخانه چرخ و فلک شخص ثالث استفاده شد که ابعاد هر کارت را در حین پیمایش افقی برای ترجمه ظرف می خواند و تأخیر تعامل بیشتری را اضافه می کرد.
رفع مشکلات
چندین مشکل مختلف وجود داشت که همه آنها باید به طور جداگانه حل می شدند تا مشکلات پاسخگویی کلی برنامه حل شود.
بهبود ناوبری سینی افقی
Disney+ Hotstar کتابخانه چرخ و فلک داخلی خود را ساخته است که با استفاده از انیمیشن های ترکیبی و خواندن ابعاد یک بار در هر سینی، نه یک بار در هر کارت، باعث ایجاد thrashing طرح نمی شود.
ناوبری فضایی فقط روی ریشه چرخ و فلک متمرکز است و برای پیمایش افقی بیشتر، چرخ فلک سفارشی ما وارد تصویر می شود. با این رویکرد، Disney+ Hotstar وابستگی ناوبری فضایی و کتابخانه چرخ و فلک قدیمی را که ابعاد را در هر مسیریابی می خواند، حذف کرد.
درخت ناوبری فضایی اینگونه به این بهینه سازی ها نگاه می کرد.
![یک نمونه درخت بهینه شده تولید شده توسط کتابخانه ناوبری فضایی، که به طور قابل توجهی نسبت به نسخه قبلی بهینه شده است و شامل گره های بسیار کمتری است.](https://web.dev/static/case-studies/hotstar-inp/image/fig-6.png?authuser=2&hl=fa)
تصاویر زیر مقایسه عملکردی است که در پانل عملکرد Chrome DevTools قبل و بعد از اجرای چرخ فلک ما اندازه گیری شده است.
![تصویری از پانل عملکرد در Chrome DevTools برای کارهایی که چرخ فلک شخص ثالث شروع میکند. کارهای طولانی متعددی وجود دارد که تعامل را به تاخیر می اندازد.](https://web.dev/static/case-studies/hotstar-inp/image/fig-7.png?authuser=2&hl=fa)
![تصویری از پانل عملکرد در Chrome DevTools برای کارهایی که چرخ فلک داخلی شروع میکند. در مقایسه با چرخ و فلک شخص ثالث، وظایف طولانی بسیار کمتری وجود دارد که به تعاملات اجازه می دهد سریعتر رخ دهد.](https://web.dev/static/case-studies/hotstar-inp/image/fig-8.png?authuser=2&hl=fa)
در نتیجه این کار، Disney+ Hotstar شاهد کاهش قابل توجهی در INP برنامه خود در این زمینه بود. آنها همچنین توانستند با حذف کتابخانه شخص ثالث، حدود 35 کیلوبایت (فشرده شده) ذخیره کنند. به عنوان یک امتیاز، این بهبودها همچنین به Disney+ Hotstar اجازه داد تا مدت زمان معیار سفارشی خود را که برای اندازهگیری کل زمان رندر صفحه اصلی استفاده میکند، کاهش دهد، زیرا به دلیل کاهش گرههای ناوبری فضایی، طرحبندیها کمتر فعال میشوند.
![یک سری زمانی از معیارهای سفارشی زمان رندر صفحه برای tizentv و webos که از 13 مارس تا 19 مارس به ترتیب 31% و 25.2% کاهش یافت.](https://web.dev/static/case-studies/hotstar-inp/image/fig-9.png?authuser=2&hl=fa)
بهبود ناوبری سینی عمودی
Disney+ Hotstar همچنین عملکرد ناوبری سینی عمودی را با بارگذاری تنبل سینیها به جای بارگیری همه آنها از جلو، بهبود بخشید. بنابراین هنگام بارگذاری صفحه، به جای بارگیری 10 نمونه از سینی - که در داخل هر کدام یک جزء چرخ فلک و تعدادی تصویر دارند - برنامه فقط دو سینی را که در نمای نمای قابل مشاهده هستند، به اضافه یک سینی اضافی در بالا و پایین بارگذاری می کند. رندر همچنین با استفاده از استراتژی بازده setTimeout()
به وظایف متعدد تقسیم شد تا رشته اصلی فرصت بیشتری برای مدیریت تعاملات کاربر داشته باشد.
![تجسم تلطیف شده از وظایف برای اجرای کنترل کننده رویداد و ارائه به روز رسانی. بهروزرسانیهای رندر پس از یک کار طولانی به تعویق میافتند.](https://web.dev/static/case-studies/hotstar-inp/image/fig-10.png?authuser=2&hl=fa)
![تجسم دیگری از همان فعالیت شکل قبلی، اما وظایف به دلیل تسلیم شدن شکسته می شوند، که اجازه می دهد رندر زودتر اتفاق بیفتد.](https://web.dev/static/case-studies/hotstar-inp/image/fig-11.png?authuser=2&hl=fa)
تعاملات در طول بارگذاری اولیه صفحه
INP برای برنامه هایی که تعداد زیادی از اسکریپت ها را در طول راه اندازی برنامه پردازش می کنند، بالا خواهد بود. این به این دلیل است که مرورگر باید آن اسکریپت ها را دانلود، تجزیه و ارزیابی کند. در حالی که همه اینها اتفاق می افتد، موضوع اصلی برای مدت زمان طولانی اشغال خواهد شد و قادر به پاسخگویی سریع به تعاملات کاربر نیست.
Disney+ Hotstar متوجه شد که در حال پردازش اسکریپتهای بیشتری از آنچه واقعاً در هنگام شروع برنامه (زمان پخش صفحه نمایش) لازم بود، دارند تا سرعت بارگذاری صفحات آینده را سریعتر کنند. این کار وظایف ارزیابی اسکریپت اضافی را متحمل شد، که همچنین پتانسیل تأثیر منفی بر INP را داشت.
برای رفع این مشکل، Disney+ Hotstar بارگذاری پویا اکثر داراییها را در نظر گرفت تا در زمان راهاندازی برنامه صرفهجویی کنند. با این حال، انجام این کار باعث افزایش زمان بارگذاری برای پیمایش به صفحات آینده می شود، زیرا جاوا اسکریپت دیگر با این تغییر از قبل بارگیری نمی شود. برای مقابله با این موضوع، Disney+ Hotstar یک کتابخانه پیشبارگذاری دارایی داخلی ایجاد کرد که تعیین میکند کدام صفحه ممکن است در سفر کاربر بعدی بیاید و داراییها را برای آن صفحه از پیش بارگذاری میکند. مثلا:
- هنگامی که کاربر در صفحه ورود است، کتابخانه پیش بارگذاری دارایی دارایی ها را برای صفحه انتخاب نمایه بارگذاری می کند.
- در صفحه انتخاب نمایه، دارایی های صفحه اصلی بارگیری می شوند.
- در صفحه اصلی، دارایی های صفحه جزئیات بارگیری می شوند.
- در نهایت، دارایی های صفحه تماشا در صفحه جزئیات بارگذاری می شوند.
بهینهسازی بارگذاری دارایی به دیزنی + Hotstar در دو چیز کمک کرد: کاهش INP برنامه (زیرا رشته اصلی اکنون برای اجرای تعاملات کاربر نسبتاً رایگان بود)، و همچنین کاهش استفاده از حافظه در دستگاههای سطح پایین.
این تغییرات منجر به کاهش 32 درصدی شماره INP گزارش شده از میدان شد همانطور که در تصویر زیر مشاهده می شود.
![یک سری زمانی از مقادیر INP که از 13 آگوست و 11 سپتامبر شروع می شود. در این مدت، 32 درصد کاهش در INP نشان داده شده است.](https://web.dev/static/case-studies/hotstar-inp/image/fig-12.png?authuser=2&hl=fa)
سایر پیشرفت ها
Disney+ Hotstar همچنین متوجه شد که کارهای طولانی روی چند رویداد کاربر وجود دارد که میتوان آنها را با تسلیم شدن به رشته اصلی تقسیم کرد. اجرا.
به عنوان مثال، هنگامی که کاربر از طریق چندین کارت در سینی حرکت می کند، موارد زیر رخ می دهد:
- کارت بعدی متمرکز است.
- کارت در صورت نیاز ترجمه می شود.
- Spotlight به روز می شود.
- تریلر - در صورت وجود - واکشی شده و پخش آغاز می شود.
- رویدادهای Analytics برای این اقدام فعال می شوند.
اگر در طول این فرآیند، کاربر روی کارت بعدی تمرکز کند، بقیه مراحل نیازی به اجرا ندارند. به عنوان مثال، اگر کاربر به کارت بعدی رفته باشد، واکشی تریلر و مقداردهی اولیه بازیکن برای یک عنوان خاص دیگر مورد نیاز نخواهد بود. از این رو، آن وظایف را می توان لغو کرد تا موضوع اصلی آزاد شود.
ابزار تولید وظیفه Disney+ Hotstar تابعی را میپذیرد که یک وظیفه است، و وقتی کار دیگری در وسط قرار میگیرد، وظیفه قبلی متوقف میشود و در اجرای کار غیر ضروری ما صرفهجویی میشود و به سرعت بر روی کار ضروری عمل میکنیم.
نتایج
به طور کلی، INP برنامه Disney+ Hotstar از 675 میلیثانیه به 272 میلیثانیه کاهش یافت که نشاندهنده بهبودی نزدیک به 60 درصد است! علاوه بر این، تاخیرهای تعامل سینی به طور خاص از حدود 400 میلی ثانیه به حدود 100 میلی ثانیه کاهش یافت.
![مقدار INP یک سری زمانی از 23 اوت تا 21 سپتامبر شروع می شود. کاهش 61 درصدی INP در این بازه زمانی محقق شد.](https://web.dev/static/case-studies/hotstar-inp/image/fig-13.png?authuser=2&hl=fa)
تاثیر کسب و کار: بازدیدهای هفتگی کارت از 111 به 226 برای هر کاربر افزایش یافته است! این یک افزایش 100 درصدی است و نشان میدهد که یک رابط سریعتر و پاسخگوتر احتمالاً کاربران را برای مدت زمان طولانیتری درگیر میکند.
![تصویری از یک سری زمانی که 100٪ افزایش بازدیدهای هفتگی کارت را در برنامه Disney+ HotStar برای tizentv و webos نشان میدهد. این افزایش پس از 4 آوریل 2004 بسیار شدید رخ می دهد.](https://web.dev/static/case-studies/hotstar-inp/image/fig-14.png?authuser=2&hl=fa)
این تازه شروع است، و 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 برای بررسی و کمک به انتشار این مطالعه موردی.