Studi kasus tentang perubahan yang dilakukan tim Web YouTube untuk meningkatkan performa, meningkatkan rasio kelulusan Data Web Inti, dan meningkatkan metrik bisnis utama.
Tim Chrome sering berbicara tentang "membuat web yang lebih baik", tetapi apa arti dari hal tersebut? Pengalaman web harus cepat, dapat diakses, dan menggunakan kemampuan perangkat pada saat pengguna sangat membutuhkannya. Dogfood adalah bagian dari budaya Google. Oleh karena itu, tim Chrome telah berpartner dengan YouTube untuk berbagi pelajaran selama proses berlangsungnya serial baru yang disebut, "Building a better web". Bagian pertama seri ini akan membahas cara YouTube membangun pengalaman web yang lebih cepat.
Membangun web yang lebih cepat
Di YouTube, performa berkaitan dengan seberapa cepat video dan konten lainnya—seperti rekomendasi dan komentar—saat dimuat di halaman web. Performa juga diukur berdasarkan seberapa cepat YouTube merespons interaksi pengguna seperti penelusuran, kontrol pemain, suka, dan berbagi.
Pasar negara berkembang yang terus berkembang, seperti Brasil, India, dan Indonesia penting untuk web seluler YouTube. Karena banyak pengguna di wilayah ini memiliki perangkat dengan perangkat yang lebih lambat dan bandwidth jaringan yang terbatas, memastikan pengalaman yang cepat dan lancar adalah tujuan yang sangat penting.
Untuk memberikan pengalaman yang inklusif bagi semua pengguna, YouTube berupaya meningkatkan metrik performa seperti Data Web Inti melalui pemuatan lambat dan modernisasi kode.
Meningkatkan Data Web Inti
Untuk mengidentifikasi area peningkatan, tim YouTube menggunakan Laporan Pengalaman Pengguna (CrUX) Chrome untuk melihat pengalaman pengguna sungguhan pada halaman hasil penelusuran dan tontonan video di perangkat seluler di bidang ini. Mereka menyadari bahwa metrik Core Web Vitals memiliki banyak ruang untuk ditingkatkan, dengan metrik Largest Contentful Paint (LCP) yang mencapai waktu 4-6 detik dalam beberapa kasus. Jumlah ini jauh lebih tinggi dari target mereka, yaitu 2,5 detik.
Untuk mengidentifikasi area yang perlu ditingkatkan, mereka beralih ke Lighthouse untuk mengaudit halaman tonton YouTube, yang menampilkan skor Lighthouse (lab) yang rendah dengan First Contentful Paint (FCP) sebesar 3,5 detik dan LCP sebesar 8,5 detik.
Untuk mengoptimalkan FCP dan LCP, tim YouTube melakukan beberapa eksperimen, sehingga menghasilkan dua penemuan besar.
Penemuan pertama adalah bahwa mereka dapat meningkatkan kinerja dengan memindahkan HTML untuk Pemutar Video di atas skrip yang membuat Pemutar Video menjadi interaktif. Pengujian lab menunjukkan bahwa tindakan ini dapat meningkatkan FCP dan LCP dari 4,4 detik menjadi 1,1 detik.
Penemuan kedua adalah bahwa LCP hanya mempertimbangkan gambar poster elemen
<video>, bukan frame dari streaming video itu sendiri. Secara tradisional, YouTube telah melakukan pengoptimalan untuk mencapai waktu tercepat hingga video mulai diputar. Jadi, untuk meningkatkan LCP, tim juga mulai mengoptimalkan seberapa cepat mereka dapat mengirimkan gambar poster. Mereka bereksperimen dengan beberapa variasi gambar poster dan memilih gambar yang mendapatkan skor terbaik dalam pengujian pengguna. Sebagai hasil dari pekerjaan ini, FCP dan LCP menunjukkan peningkatan yang nyata, dengan LCP kolom meningkat dari 4,6 detik menjadi 2,0 detik.
Meskipun pengoptimalan ini meningkatkan LCP, tim merasa bahwa definisi metrik LCP saat ini tidak sepenuhnya direkam, dari perspektif pengguna, saat "konten utama" halaman telah dimuat—yang merupakan sasaran LCP.
Untuk mengatasi masalah ini, anggota tim YouTube bermitra dengan anggota tim Chrome untuk mempelajari cara meningkatkan metrik LCP agar dapat menangani kasus penggunaan mereka. Setelah mempertimbangkan kelayakan dan dampak dari beberapa opsi, tim mendapatkan proposal untuk mempertimbangkan waktu proses menggambar frame pertama elemen video sebagai kandidat LCP.
Setelah perubahan ini diterapkan di Chrome, tim YouTube akan dengan senang hati melanjutkan pekerjaan mereka dalam mengoptimalkan LCP. Dan versi metrik yang diperbarui berarti pengoptimalan ini akan memiliki dampak yang lebih langsung pada pengalaman pengguna yang sebenarnya.
Modularisasi dengan pemuatan lambat
Halaman YouTube berisi banyak modul yang dimuat dengan segera. Untuk mengoptimalkan cara render 50+ komponen, tim membuat komponen untuk peta modul JS yang akan memberi tahu klien modul mana yang akan dimuat. Dengan menandai komponen sebagai lambat, modul JS akan dimuat nanti, sehingga mengurangi waktu pemuatan awal halaman dan jumlah JavaScript yang tidak digunakan yang dikirim ke klien.
Namun, setelah pemuatan lambat diterapkan, tim melihat efek waterfall bahwa komponen yang dimuat dengan lambat dan dependensinya akan dimuat pada waktu yang kurang optimal.
Untuk mengatasi masalah ini, tim menentukan kumpulan komponen minimal yang diperlukan dalam tampilan dan mengelompokkannya ke dalam satu permintaan jaringan. Hasilnya adalah peningkatan kecepatan halaman, pengurangan waktu penguraian JavaScript, dan, pada akhirnya, waktu rendering awal yang lebih baik.
Pengelolaan status di seluruh komponen
YouTube mengalami masalah performa karena kontrol pemutarnya, terutama pada perangkat lama. Analisis kode menunjukkan bahwa pemutar, yang memungkinkan pengguna mengontrol fitur seperti kecepatan dan progres pemutaran, telah mengalami komponen yang berlebihan dari waktu ke waktu.
Setiap peristiwa gerakan sentuh status progres memicu dua penghitungan ulang gaya tambahan dan memerlukan waktu 21,17 md selama menjalankan pengujian performa di lab. Seiring dengan penambahan kontrol baru seiring waktu, pola kontrol terdesentralisasi sering kali menyebabkan dependensi sirkular dan kebocoran memori, yang berdampak negatif pada performa halaman tonton.
Untuk memperbaiki masalah karena kontrol terdesentralisasi, tim mengupdate UI pemain untuk menyinkronkan semua update, yang pada dasarnya memfaktorkan ulang pemain ke satu komponen tingkat teratas yang akan meneruskan data ke turunannya. Hal ini memastikan hanya satu siklus update UI (render) untuk setiap perubahan status, sehingga menghilangkan update berantai. Peristiwa gerakkan sentuh status progres pemain yang baru tidak memiliki penghitungan ulang gaya selama eksekusi JavaScript dan sekarang hanya memerlukan 25% waktu pemain lama.
Modernisasi kode ini juga menghasilkan peningkatan performa tambahan seperti peningkatan waktu pemuatan tonton di perangkat lama, lebih sedikit pemutaran yang diabaikan, dan pengurangan jumlah error non-fatal.
Kesimpulan
Sebagai hasil dari investasi YouTube dalam hal performa, halaman tonton dimuat jauh lebih cepat dengan 76% URL situs seluler YouTube kini melampaui nilai minimum metrik Data Web Inti di lapangan. Di desktop, LCP lab untuk halaman tonton berkurang dari sekitar 4,6 detik menjadi 1,6 detik. Performa interaksi dan rendering situs, terutama pada pemutar video YouTube, menghabiskan waktu hingga 75% lebih sedikit dalam eksekusi JavaScript dibandingkan sebelumnya.
Peningkatan performa web YouTube selama setahun terakhir juga telah meningkatkan metrik bisnis, termasuk waktu tonton dan pengguna aktif harian. Berdasarkan keberhasilan upaya ini, kami berencana untuk terus mengeksplorasi lebih banyak cara untuk mengoptimalkannya pada masa mendatang.
Dalam bagian kedua dari seri ini, "Building an Accessibility Web", Anda akan membaca bagaimana YouTube membuat situs mereka lebih mudah diakses oleh pengguna pembaca layar.
Dengan ucapan terima kasih khusus kepada Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra, serta tim YouTube dan Chrome atas kontribusinya dalam karya ini.