Cara Disney+ Hotstar meningkatkan jumlah penayangan kartu mingguan sebesar 100% di perangkat ruang keluarga dengan mengurangi INP sebesar 61%

Meningkatkan Interaction to Next Paint (INP) di smart TV dan perangkat dekoder menghadirkan lebih banyak tantangan dibandingkan browser desktop, karena terbatasnya dukungan API dan spesifikasi sistem yang sederhana. Dalam studi kasus ini, Anda akan mengetahui bagaimana Disney+ Hotstar berhasil mengatasi hambatan tersebut, dan sebagai hasilnya memperoleh keuntungan bisnis yang signifikan.

Bhuvaneswaran Mohan
Bhuvaneswaran Mohan
Saurabh Rajpal
Saurabh Rajpal

Dengan meningkatnya penggunaan perangkat ruang keluarga, Disney+ Hotstar menyadari bahwa menyediakan pengalaman penjelajahan yang lancar di aplikasi mereka untuk smart TV dan dekoder merupakan persyaratan bisnis yang penting. Namun, hal yang mempersulit perbaikan INP untuk perangkat tersebut adalah setiap model TV tertentu mungkin menggunakan versi browser yang sangat lama—misalnya, LG TV 2020 menggunakan Chrome 68 yang dirilis pada tahun 2018. Beberapa perangkat ini juga dapat dikategorikan sebagai perangkat kelas bawah, yang berarti bahwa mereka tidak dapat merespons interaksi secepat perangkat tablet dan laptop unggulan.

Gambar berikut membandingkan berapa lama waktu yang diperlukan untuk memuat halaman, antara laptop dengan CPU yang melambat sebanyak enam kali yang diterapkan di Chrome DevTools dan smart TV. Seperti yang terlihat, laptop masih jauh lebih cepat daripada smart TV yang baru saja diproduksi.

Screenshot profiler performa di Chrome DevTools yang memprofilkan performa pemuatan aplikasi Disney+ HotStar di laptop. Metrik kustom bernama PAGE_RENDER_TIME memiliki waktu 1,39 detik.
Profil (waktu render Halaman 1,3 dtk) dari laptop dengan pelambatan CPU 6x lipat untuk meniru konfigurasi browser TV. PAGE_RENDER_TIME adalah metrik khusus yang digunakan untuk mencatat waktu yang dibutuhkan antara menampilkan komponen pertama halaman dan penyelesaian penguraian HTML.
Screenshot profiler performa di Chrome DevTools yang memprofilkan performa pemuatan aplikasi Disney+ HotStar pada perangkat Smart TV yang sebenarnya. Metrik kustom bernama PAGE_RENDER_TIME tersedia dengan waktu 6,47 detik.
Profil (render halaman 6,47 detik) dari TV sebenarnya menggunakan proses debug jarak jauh dengan aplikasi TV yang berjalan di Chrome.

Meskipun pengujian ini menghasilkan data lab, Disney+ Hotstar mulai mengumpulkan data kolom untuk Interaction to Next Paint (INP) dari pengguna aplikasi mereka yang sebenarnya menggunakan library web-vitals, dan mengamati 75% pengguna aplikasi mengalami INP 675 milidetik di lapangan, yang dianggap sebagai pengalaman pengguna yang "buruk" menurut nilai minimum INP.

Studi kasus ini mencakup cara Disney+ Hotstar meningkatkan responsivitas dalam aplikasi streaming mereka, terutama pada perangkat kelas bawah. Mereka mencapai peningkatan 61% dengan menurunkan nilai INP menjadi 272 milidetik—masih di atas batas "baik" yang direkomendasikan, yaitu 200 milidetik, tetapi merupakan peningkatan substansial terhadap nilai tersebut.

Temuan

Disney+ Hotstar menginstrumentasikan aplikasi menggunakan metode onINP dari build atribusi library web-vitals. Selama fase awal, berbagai tantangan ditemukan, terutama dalam mengidentifikasi elemen target yang tepat. Masalah ini muncul karena semua referensi mengarah ke isi dokumen akibat library navigasi spasi pihak ketiga yang digunakan dengan beberapa penyesuaian di aplikasi Disney+ Hotstar. Library ini hanya memproses peristiwa pada isi dokumen, lalu menentukan elemen terfokus yang sebenarnya dan memprediksi fokus berikutnya berdasarkan penekanan tombol jarak jauh.

Disney+ Hotstar memulai dengan memecahkan masalah atribusi terlebih dahulu sehingga interaksi yang bertanggung jawab atas nilai INP yang tinggi dapat diidentifikasi dengan benar. Untuk itu, Disney+ Hotstar mencatat atribut focusKey yang sudah ada di library navigasi spasial untuk elemen yang saat ini difokuskan serta peta semua elemen yang dapat difokuskan di halaman, yang setara dengan target interaksi yang tersedia di build atribusi web-vitals.

Screenshot daftar elemen, sesuai dengan atribut focusKey-nya, beserta latensi interaksi untuk setiap elemen.
Menangkap focusKey, beserta jalur ke elemen yang memicunya.

Kini dengan pengukuran dan atribusi yang tepat, temuan dari data lapangan melaporkan interaksi berikut sebagai interaksi yang paling bermasalah untuk INP:

  1. Navigasi baki carousel horizontal.
  2. Navigasi baki carousel vertikal.
  3. Interaksi selama pemuatan halaman awal.
Screenshot elemen yang bertanggung jawab atas navigasi carousel baki dengan tombol fokusnya.
Entri dasbor yang menunjukkan kontribusi terhadap INP oleh navigasi carousel baki.

Setelah memprofilkan interaksi ini dengan panel performa di Chrome Dev Tools, diketahui bahwa library navigasi spasial membaca posisi semua elemen yang dapat difokuskan dan membangun pohon baru. Ini adalah operasi mahal yang memicu layout thrashing pada setiap interaksi, seperti berpindah dari satu elemen ke elemen lainnya.

Untuk halaman beranda, hierarki dibuat oleh library navigasi spasial sebagai berikut:

Contoh hierarki yang dihasilkan oleh library navigasi spasial. Di bawah root terdapat node Navbar dan Tray Container. Khususnya, node Penampung Baki berisi tiga node kartu, yang masing-masing memiliki banyak subnode yang berkontribusi pada ukuran DOM yang besar.
Hierarki navigasi spasial sebelumnya untuk halaman beranda.

Ini berarti bahwa, jika aplikasi menampilkan 10 baki, dan setiap baki memiliki 7 kartu, akan ada 70 elemen yang dapat difokuskan untuk penampung baki, termasuk item navigasi. Elemen ini memiliki jumlah yang tinggi. Library carousel pihak ketiga juga digunakan, yang membaca dimensi setiap kartu selama navigasi horizontal untuk menerjemahkan penampung, sehingga menambahkan lebih banyak latensi interaksi.

Memperbaiki masalah

Ada beberapa masalah berbeda yang semuanya harus ditangani secara terpisah untuk menyelesaikan masalah responsivitas aplikasi secara keseluruhan.

Peningkatan navigasi baki horizontal

Disney+ Hotstar membangun library carousel internalnya sendiri yang tidak memicu layout thrashing menggunakan animasi gabungan dan membaca dimensi satu kali per baki, bukan sekali per kartu.

Navigasi spasial hanya berfokus pada akar korsel, dan untuk navigasi horizontal lebih lanjut, korsel khusus akan muncul. Dengan pendekatan ini, Disney+ Hotstar menghilangkan ketergantungan pada navigasi spasial dan library carousel lama yang membaca dimensi pada setiap navigasi.

Berikut adalah tampilan struktur navigasi spasial setelah pengoptimalan ini.

Contoh hierarki yang dioptimalkan yang dihasilkan oleh library navigasi spasial, yang dioptimalkan secara signifikan dibandingkan versi sebelumnya, yang berisi node yang jauh lebih sedikit.
Hierarki navigasi spasial setelah pengoptimalan.

Gambar berikut adalah perbandingan performa yang diukur di panel performa Chrome DevTools sebelum dan sesudah implementasi carousel kami.

Screenshot panel performa di Chrome DevTools untuk tugas yang dimulai oleh carousel pihak ketiga. Ada banyak tugas panjang yang menunda interaktivitas.
Carousel pihak ketiga.
Screenshot panel performa di Chrome DevTools untuk tugas yang dimulai oleh carousel internal. Dibandingkan dengan carousel pihak ketiga, tugas yang panjang jauh lebih sedikit, sehingga memungkinkan interaksi terjadi lebih cepat.
Carousel internal.

Sebagai hasil dari upaya ini, Disney+ Hotstar melihat penurunan yang signifikan pada INP aplikasi mereka di lapangan. Mereka juga berhasil menghemat sekitar 35 KB (terkompresi) dengan menghapus library pihak ketiga. Sebagai bonus, peningkatan ini juga memungkinkan Disney+ Hotstar mengurangi durasi metrik kustom mereka yang digunakan untuk mengukur total waktu rendering untuk halaman beranda, karena tata letak lebih jarang dipicu akibat berkurangnya node navigasi spasial.

Deret waktu metrik kustom waktu render halaman untuk tizentv dan webos, yang menurun masing-masing 31% dan 25,2% mulai dari jangka waktu 13 Maret hingga 19 Maret.
Tren menurun untuk waktu render halaman menurut TV OS (Samsung-Tizen dan WebOS-LG).

Peningkatan navigasi baki vertikal

Disney+ Hotstar juga meningkatkan performa navigasi baki vertikal dengan memuat baki secara lambat, bukan memuat semuanya di awal. Jadi saat pemuatan halaman, bukannya memuat 10 instance baki—yang secara internal, masing-masing memiliki komponen carousel dan banyak gambar—aplikasi hanya memuat dua baki yang terlihat di area pandang, ditambah baki tambahan di atas dan di bawah. Rendering juga dibagi menjadi beberapa tugas menggunakan strategi hasil setTimeout() sehingga thread utama memiliki lebih banyak peluang untuk menangani interaksi pengguna.

Visualisasi bergaya dari tugas untuk menjalankan pengendali peristiwa dan update rendering. Pembaruan rendering ditunda setelah satu tugas yang panjang.
Satu tugas yang berjalan lama diikuti dengan rendering sebelum peningkatan baki vertikal.
Visualisasi lain dari aktivitas yang sama dengan gambar sebelumnya, tetapi tugas dibagi karena hasil, yang memungkinkan rendering terjadi lebih cepat.
Beberapa tugas terpisah setelah peningkatan baki vertikal, dengan peluang untuk rendering di antara tugas terpisah.

Interaksi selama pemuatan halaman awal

INP akan tinggi untuk aplikasi yang memproses sejumlah besar skrip selama peluncuran aplikasi. Hal ini karena browser harus mendownload, mengurai, dan mengevaluasi skrip tersebut. Ketika semua ini terjadi, thread utama akan digunakan untuk waktu yang mungkin lama, dan tidak dapat merespons interaksi pengguna dengan cepat.

Disney+ Hotstar menyadari bahwa mereka memproses skrip lebih banyak daripada yang sebenarnya diperlukan saat memulai aplikasi (waktu layar pembuka) agar pemuatan halaman di masa mendatang lebih cepat. Tindakan ini menimbulkan tugas evaluasi skrip tambahan, yang juga berpotensi berdampak negatif pada INP.

Untuk memperbaikinya, Disney+ Hotstar mempertimbangkan untuk memuat sebagian besar aset secara dinamis, sehingga akan menghemat waktu selama startup aplikasi. Namun, dengan demikian, waktu muat untuk navigasi ke halaman berikutnya akan bertambah, karena JavaScript tersebut tidak akan dimuat lagi terlebih dahulu dengan perubahan ini. Untuk mengatasi hal ini, Disney+ Hotstar mengembangkan koleksi preloader aset internal yang menentukan halaman mana yang mungkin muncul selanjutnya dalam perjalanan pengguna, dan akan melakukan pramuat aset untuk halaman tersebut. Contoh:

  • Saat pengguna berada di halaman login, library prapemuat aset akan melakukan pramuat aset untuk halaman pemilihan profil.
  • Di halaman pemilihan profil, aset halaman beranda akan dimuat.
  • Di halaman beranda, aset halaman detail akan dimuat.
  • Terakhir, aset halaman tonton dimuat di halaman detail.

Pengoptimalan pemuatan aset membantu Disney+ Hotstar melakukan dua hal: mengurangi INP aplikasi (karena thread utama sekarang relatif bebas untuk menjalankan interaksi pengguna), dan juga mengurangi penggunaan memori pada perangkat tingkat rendah.

Perubahan ini menyebabkan penurunan jumlah INP yang dilaporkan dari lapangan sebesar 32% seperti yang dapat dilihat pada screenshot berikut.

Deret waktu nilai INP yang dimulai 13 Agustus dan 11 September. Selama periode ini, ditampilkan pengurangan INP sebesar 32%.
Pengurangan INP untuk peningkatan baki.

Peningkatan lainnya

Disney+ Hotstar juga menemukan bahwa ada tugas panjang pada beberapa peristiwa pengguna yang dapat dipisah dengan sering-seringlah beralih ke thread utama, dan melangkah lebih jauh dengan membuat utilitas generator tugas yang akan memungkinkan pengguna membatalkan tugas di tengah eksekusi.

Misalnya, saat pengguna menavigasi beberapa kartu di baki, hal berikut akan terjadi:

  • Kartu berikutnya difokuskan.
  • Kartu diterjemahkan jika perlu.
  • Sorotan diperbarui.
  • Cuplikan—jika ada—diambil dan pemutaran dimulai.
  • Peristiwa Analytics akan diaktifkan untuk tindakan tersebut.

Jika, selama proses ini, pengguna berfokus pada kartu berikutnya, maka langkah selanjutnya tidak perlu dijalankan. Misalnya, pengambilan cuplikan dan inisialisasi pemutar untuk judul tertentu tidak lagi diperlukan jika pengguna telah beralih ke kartu berikutnya. Oleh karena itu, tugas tersebut dapat dibatalkan untuk membebaskan thread utama.

Utilitas generator tugas Disney+ Hotstar menerima fungsi yang merupakan tugas, dan ketika tugas lain muncul di tengah, tugas sebelumnya dibatalkan sehingga kita dapat mengeksekusi tugas yang tidak perlu dan segera bertindak sesuai tugas yang diperlukan.

Hasil

Secara keseluruhan, INP aplikasi Disney+ Hotstar turun dari 675 milidetik menjadi 272 milidetik, yang menunjukkan peningkatan hampir 60%. Selain itu, latensi interaksi baki secara khusus menurun dari sekitar 400 milidetik menjadi sekitar 100 milidetik.

Nilai INP deret waktu yang dimulai dari 23 Agustus hingga 21 September. Penurunan INP sebesar 61% direalisasikan dalam jangka waktu ini.

Dampak bisnis: jumlah tampilan kartu mingguan meningkat dari 111 menjadi 226 per pengguna. Itu adalah peningkatan 100%, yang menunjukkan bahwa antarmuka yang lebih cepat dan lebih responsif cenderung melibatkan pengguna untuk jangka waktu yang lebih lama.

Screenshot deret waktu yang menampilkan peningkatan 100% pada penayangan kartu mingguan di aplikasi Disney+ HotStar untuk tizentv dan webos. Peningkatan terjadi sangat tajam setelah 4 April 2004.

Ini baru permulaan, dan Disney+ Hotstar baru saja memulai peningkatan performa rendering dan interaksi dengan metrik INP sebagai panduan mereka. Tim mereka juga antusias untuk membuat Disney+ Hotstar memberikan pengalaman yang lancar bagi pelanggan mereka dalam waktu dekat.

Terima kasih kepada Ayush, Ajay, Kiran, Milan, dan Richa dari Disney+ Hotstar atas upaya mereka untuk membalikkan situasi.

Terima kasih banyak kepada Ankeet Maini, Engineering Head Disney+ Hotstar, dan Rahul Krishnan P, Head of Customer Experience Disney+ Hotstar untuk mendukung upaya inovasi ini, serta kepada Jeremy Wagner, Gilberto, Barry Pollard, dan Brendan Kenny dari Google yang telah meninjau dan membantu memublikasikan studi kasus ini.