Mengoptimalkan interaktivitas halaman detail produk untuk pengurangan FID Potensi Maksimal sebesar 90% di Lighthouse dan peningkatan FID sebesar 9% di Laporan Pengalaman Pengguna Chrome.
Mercado Libre adalah ekosistem e-commerce dan pembayaran terbesar di Amerika Latin. Aplikasi ini hadir di 18 negara dan merupakan pemimpin pasar di Brasil, Meksiko, dan Argentina (berdasarkan pengunjung unik dan tayangan halaman).
Performa web telah menjadi fokus perusahaan sejak lama, tetapi baru-baru ini mereka membentuk tim untuk memantau performa dan menerapkan pengoptimalan di berbagai bagian situs.
Artikel ini merangkum pekerjaan yang dilakukan oleh Guille Paz, Pablo Carminatti, dan Oleh Burkhay dari tim arsitektur frontend Mercado Libre untuk mengoptimalkan salah satu Data Web Inti: First Input Delay (FID) dan proxy lab-nya, Total Blocking Time (TBT).
90%
Pengurangan FID Potensi Maksimal di Lighthouse
9%
Lebih banyak pengguna yang menganggap FID sebagai "Cepat" di CrUX
Tugas yang lama, Penundaan Input Pertama, dan Total Blocking Time
Menjalankan kode JavaScript yang mahal dapat menyebabkan tugas panjang, yaitu tugas yang berjalan selama lebih dari 50 md di thread utama browser.
FID (Penundaan Input Pertama) mengukur waktu dari saat pengguna pertama kali berinteraksi dengan halaman (misalnya, saat mereka mengklik link) hingga saat browser benar-benar dapat mulai memproses pengendali peristiwa sebagai respons terhadap interaksi tersebut. Situs yang menjalankan kode JavaScript yang mahal kemungkinan akan memiliki beberapa tugas yang lama, yang pada akhirnya akan berdampak negatif pada FID.
Untuk memberikan pengalaman pengguna yang baik, situs harus mengusahakan agar First Input Delay kurang dari 100
milidetik:
Meskipun situs Mercado Libre berperforma baik di sebagian besar bagian, mereka menemukan di Laporan Pengalaman Pengguna Chrome bahwa halaman detail produk memiliki FID yang buruk. Berdasarkan informasi tersebut, mereka memutuskan untuk memfokuskan upaya mereka pada peningkatan interaktivitas untuk halaman produk di situs.
Halaman ini memungkinkan pengguna melakukan interaksi yang kompleks, sehingga tujuannya adalah pengoptimalan interaktif, tanpa mengganggu fungsi yang berharga.
Mengukur interaktivitas halaman detail produk
FID memerlukan pengguna sungguhan sehingga tidak dapat diukur di lab. Namun, metrik Total Blocking Time (TBT) dapat diukur di lab, berkorelasi dengan baik dengan FID di lapangan, dan juga menangkap masalah yang memengaruhi interaktivitas.
Misalnya, dalam rekaman aktivitas berikut, meskipun total waktu yang dihabiskan untuk menjalankan tugas di thread utama adalah 560 md, hanya 345 md dari waktu tersebut yang dianggap sebagai total waktu pemblokiran (jumlah bagian dari setiap tugas yang melebihi 50 md):
Mercado Libre menggunakan TBT sebagai metrik proxy di lab, untuk mengukur dan meningkatkan interaktif halaman detail produk di dunia nyata.
Berikut adalah pendekatan umum yang mereka lakukan:
- Gunakan WebPageTest untuk menentukan dengan tepat skrip mana yang membuat thread utama sibuk di perangkat sebenarnya.
- Gunakan Lighthouse untuk menentukan dampak perubahan pada Potensi Maksimal Penundaan Input Pertama (Potensi Maksimal FID).
Menggunakan WebPageTest untuk memvisualisasikan tugas yang lama
WebPageTest (WPT) adalah alat performa web yang memungkinkan Anda menjalankan pengujian di perangkat sebenarnya di berbagai lokasi di seluruh dunia.
Mercado Libre menggunakan WPT untuk mereproduksi pengalaman penggunanya dengan memilih jenis perangkat dan lokasi yang mirip dengan pengguna sebenarnya. Secara khusus, mereka memilih perangkat Moto 4G dan Dulles, Virginia, karena mereka ingin mendekati pengalaman pengguna Mercado Libre di Meksiko. Dengan mengamati tampilan thread utama WPT, Mercado Libre menemukan bahwa ada beberapa tugas panjang berturut-turut yang memblokir thread utama selama 2 detik:
Dengan menganalisis waterfall yang sesuai, mereka menemukan bahwa sebagian besar dari dua detik tersebut berasal dari modul analisis mereka. Ukuran paket utama aplikasi besar (950 KB) dan memerlukan waktu lama untuk mengurai, mengompilasi, dan mengeksekusi.
Menggunakan Lighthouse untuk menentukan FID Potensi Maksimal
Lighthouse tidak memungkinkan Anda memilih antara berbagai perangkat dan lokasi, tetapi ini adalah alat yang sangat berguna untuk mendiagnosis situs dan mendapatkan rekomendasi performa.
Saat menjalankan Lighthouse di halaman detail produk, Mercado Libre menemukan bahwa Max Potential FID adalah satu-satunya metrik yang ditandai dengan warna merah, dengan nilai 1710 md.
Berdasarkan hal ini, Mercado Libre menetapkan sasaran untuk meningkatkan skor FID Potensi Maksimal di alat laboratorium seperti Lighthouse dan WebPageTest, dengan asumsi bahwa peningkatan ini akan memengaruhi pengguna sebenarnya, sehingga muncul di alat pemantauan pengguna sebenarnya seperti Laporan Pengalaman Pengguna Chrome.
Mengoptimalkan tugas yang lama
Iterasi pertama
Berdasarkan trace thread utama, Mercado Libre menetapkan sasaran untuk mengoptimalkan dua modul yang menjalankan kode mahal.
Mereka mulai mengoptimalkan performa modul pelacakan internal. Modul ini berisi tugas berat CPU yang tidak penting bagi modul untuk berfungsi, sehingga dapat dihapus dengan aman. Hal ini menyebabkan pengurangan JavaScript sebesar 2% untuk seluruh situs.
Setelah itu, mereka mulai berupaya meningkatkan ukuran paket umum:
Mercado Libre menggunakan webpack-bundle-analyzer untuk mendeteksi peluang pengoptimalan:
- Awalnya, mereka mewajibkan modul Lodash lengkap. Ini diganti dengan require per metode untuk hanya memuat sebagian Lodash, bukan seluruh library, dan digunakan bersama dengan lodash-webpack-plugin untuk memperkecil Lodash lebih lanjut.
Mereka juga menerapkan pengoptimalan Babel berikut:
- Menggunakan @babel/plugin-transform-runtime untuk menggunakan kembali helper Babel di seluruh kode, dan mengurangi ukuran paket secara signifikan.
- Menggunakan babel-plugin-search-and-replace untuk mengganti token pada waktu build, guna menghapus file konfigurasi besar di dalam paket utama.
- Menambahkan babel-plugin-transform-react-remove-prop-types untuk menghemat beberapa byte tambahan dengan menghapus jenis properti.
Sebagai hasil dari pengoptimalan ini, ukuran paket dikurangi sekitar 16%.
Mengukur dampak
Perubahan ini menurunkan tugas panjang berturut-turut Mercado Libre dari dua detik menjadi satu detik:
Lighthouse menunjukkan pengurangan 57% pada Potensi Maksimal Penundaan Input Pertama:
Iterasi kedua
Tim terus mempelajari tugas yang lama untuk menemukan peningkatan berikutnya.
Berdasarkan informasi tersebut, mereka memutuskan untuk menerapkan perubahan berikut:
- Terus kurangi ukuran app bundle utama untuk mengoptimalkan waktu kompilasi dan penguraian (misalnya, dengan menghapus dependensi duplikat di seluruh modul yang berbeda).
- Terapkan pemisahan kode pada tingkat komponen, untuk membagi JavaScript dalam potongan yang lebih kecil dan memungkinkan pemuatan yang lebih cerdas dari berbagai komponen.
- Tunda hidrasi komponen untuk memungkinkan penggunaan thread utama yang lebih cerdas. Teknik ini biasanya disebut sebagai hidrasi sebagian.
Mengukur dampak
Rekaman aktivitas WebPageTest yang dihasilkan menunjukkan potongan eksekusi JS yang lebih kecil:
Selain itu, waktu FID Potensi Maksimal di Lighthouse-nya berkurang sebesar 60%:
Memvisualisasikan progres untuk pengguna yang sebenarnya
Meskipun alat pengujian laboratorium seperti WebPageTest dan Lighthouse sangat cocok untuk melakukan iterasi pada solusi selama pengembangan, sasaran sebenarnya adalah meningkatkan pengalaman bagi pengguna sebenarnya.
Laporan Pengalaman Pengguna Chrome memberikan metrik pengalaman pengguna terkait cara pengguna Chrome yang sebenarnya menjelajahi tujuan populer di web. Data dari laporan dapat diperoleh dengan menjalankan kueri di BigQuery, PageSpeedInsights, atau CrUX API.
Dasbor CrUX adalah cara mudah untuk memvisualisasikan progres metrik inti:
Langkah berikutnya
Performa web tidak pernah selesai, dan Mercado Libre memahami nilai yang dihasilkan pengoptimalan ini bagi penggunanya. Meskipun mereka terus menerapkan beberapa pengoptimalan di seluruh situs, termasuk prefetching di halaman listingan produk, pengoptimalan gambar, dan lainnya, mereka terus menambahkan peningkatan ke halaman listingan produk untuk mengurangi Total Blocking Time (TBT), dan bahkan lebih banyak lagi dengan FID proxy. Pengoptimalan ini meliputi:
- Melakukan iterasi pada solusi pemisahan kode.
- Meningkatkan eksekusi skrip pihak ketiga.
- Melanjutkan peningkatan dalam penggabungan aset di tingkat penggabungan (webpack).
Mercado Libre memiliki pandangan holistik tentang performa, sehingga meskipun mereka terus mengoptimalkan interaktivitas di situs, mereka juga mulai menilai peluang peningkatan pada dua Core Web Vitals lainnya saat ini: LCP (Largest Contentful Paint) dan CLS (Cumulative Layout Shift).