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.
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.
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.
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:
- Navigasi baki carousel horizontal.
- Navigasi baki carousel vertikal.
- Interaksi selama pemuatan halaman awal.
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:
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.
Gambar berikut adalah perbandingan performa yang diukur di panel performa Chrome DevTools sebelum dan sesudah implementasi carousel kami.
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.
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.
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.
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.
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.
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.