Mengoptimalkan interaktivitas halaman detail produk untuk pengurangan Max Potential FID di Lighthouse sebesar 90% dan peningkatan FID sebesar 9% di Laporan Pengalaman Pengguna Chrome.
Mercado Libre adalah ekosistem e-commerce dan pembayaran terbesar di Amerika Latin. Solusi ini tersedia di 18 negara dan merupakan pemimpin pasar di Brasil, Meksiko, dan Argentina (berdasarkan pengunjung unik dan kunjungan halaman).
Performa web telah menjadi fokus perusahaan sejak lama, tetapi mereka baru-baru ini 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 Core Web Vitals: First Input Delay (FID) dan proxy lab-nya, Total Blocking Time (TBT).
90%
Penurunan Max Potential FID di Lighthouse
9%
Lebih banyak pengguna menganggap FID sebagai "Cepat" di CrUX
Tugas panjang, Penundaan Input Pertama, dan Total Waktu Pemblokiran
Menjalankan kode JavaScript yang mahal dapat menyebabkan tugas panjang, yaitu 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 mengeksekusi kode JavaScript yang mahal kemungkinan akan memiliki beberapa tugas yang panjang, yang akan berdampak negatif pada FID.
Untuk memberikan pengalaman pengguna yang baik, situs harus berusaha memiliki Penundaan Input Pertama 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 sasarannya adalah pengoptimalan interaktivitas, tanpa mengganggu fungsi yang berharga.
Mengukur interaktivitas halaman detail produk
FID memerlukan pengguna sungguhan sehingga tidak dapat diukur di lab. Namun, metrik Total Waktu Pemblokiran (TBT) dapat diukur oleh lab, memiliki korelasi yang baik dengan FID di lapangan, dan juga menangkap masalah yang memengaruhi interaktivitas.
Misalnya, dalam trace berikut, meskipun total waktu yang dihabiskan untuk menjalankan tugas di thread utama adalah 560 milidetik, hanya 345 milidetik dari waktu tersebut yang dianggap sebagai total waktu pemblokiran (jumlah bagian dari setiap tugas yang melebihi 50 milidetik):
Mercado Libre menggunakan TBT sebagai metrik proxy di lab, untuk mengukur dan meningkatkan interaktivitas halaman detail produk di dunia nyata.
Berikut pendekatan umum yang mereka lakukan:
- Gunakan WebPageTest untuk menentukan secara pasti skrip mana yang membuat thread utama tetap sibuk di perangkat sungguhan.
- Gunakan Lighthouse untuk menentukan dampak perubahan pada Max Potential First Input Penundaan (FID Maks Potensial).
Menggunakan WebPageTest untuk memvisualisasikan tugas yang panjang
WebPageTest (WPT) adalah alat performa web yang memungkinkan Anda menjalankan pengujian pada perangkat sungguhan di berbagai lokasi di seluruh dunia.
Mercado Libre menggunakan WPT untuk mereproduksi pengalaman pengguna mereka dengan memilih jenis perangkat dan lokasi yang mirip dengan pengguna nyata. Secara khusus, mereka memilih perangkat Moto 4G dan Dulles, Virginia, karena ingin memperkirakan pengalaman pengguna Mercado Libre di Meksiko. Dengan mengamati thread view utama WPT, Mercado Libre menemukan bahwa ada beberapa tugas panjang berturut-turut yang memblokir thread utama selama 2 detik:
Setelah menganalisis waterfall yang sesuai, mereka menemukan bahwa sebagian besar dari dua detik tersebut berasal dari modul analisis. Ukuran paket utama aplikasi ini besar (950 KB) dan membutuhkan waktu lama untuk mengurai, mengompilasi, dan mengeksekusi.
Menggunakan Lighthouse untuk menentukan FID Potensi Maksimal
Lighthouse tidak memungkinkan Anda memilih antara perangkat dan lokasi yang berbeda, tetapi ini adalah alat yang sangat berguna untuk mendiagnosis situs dan mendapatkan rekomendasi performa.
Saat menjalankan Lighthouse pada halaman detail produk, Mercado Libre menemukan bahwa Max Potential FID adalah satu-satunya metrik yang ditandai dengan warna merah, dengan nilai 1.710 md.
Berdasarkan hal ini, Mercado Libre menetapkan sasaran untuk meningkatkan skor FID Potensi Maksimal mereka di alat laboratorium seperti Lighthouse dan WebPageTest, dengan asumsi bahwa peningkatan ini akan memengaruhi pengguna mereka yang sebenarnya, sehingga akan muncul di alat pemantauan pengguna yang sebenarnya seperti Laporan Pengalaman Pengguna Chrome.
Mengoptimalkan tugas yang berjalan 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 begitu penting agar modul dapat 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 memerlukan modul Lodash lengkap. Ini diganti dengan memerlukan per-metode untuk hanya memuat subset Lodash, bukan seluruh library, dan digunakan bersama dengan lodash-webpack-plugin untuk menyusutkan Lodash lebih jauh.
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, untuk menghapus file konfigurasi besar di dalam paket utama.
- Menambahkan babel-plugin-transform-react-remove-prop-types untuk menghemat beberapa byte tambahan dengan menghapus jenis prop.
Sebagai hasil dari pengoptimalan ini, ukuran paket diperkecil sekitar 16%.
Mengukur dampak
Perubahan ini mengurangi tugas berdurasi panjang berturut-turut Mercado Libre dari dua detik menjadi satu detik:
Lighthouse menunjukkan pengurangan 57% dalam Max Potential First Input Delay:
Iterasi kedua
Tim tersebut terus menggali tugas-tugas panjang untuk menemukan peningkatan berikutnya.
Berdasarkan informasi tersebut, mereka memutuskan untuk menerapkan perubahan berikut:
- Terus kurangi ukuran paket utama untuk mengoptimalkan waktu kompilasi dan penguraian (misalnya, dengan menghapus dependensi duplikat di seluruh modul yang berbeda).
- Terapkan pemisahan kode di tingkat komponen, untuk membagi JavaScript dalam potongan yang lebih kecil dan memungkinkan pemuatan yang lebih cerdas dari komponen yang berbeda.
- Tunda hidrasi komponen agar penggunaan thread utama lebih cerdas. Teknik ini biasanya disebut sebagai hidrasi sebagian.
Mengukur dampak
Jejak WebPageTest yang dihasilkan menunjukkan bahkan potongan eksekusi JS yang lebih kecil:
Dan waktu Max Potential FID mereka di Lighthouse berkurang sebesar 60%lagi:
Memvisualisasikan progres untuk pengguna nyata
Meskipun alat pengujian laboratorium seperti WebPageTest dan Lighthouse sangat cocok untuk melakukan iterasi pada solusi selama pengembangan, tujuan sebenarnya adalah meningkatkan pengalaman pengguna sungguhan.
Laporan Pengalaman Pengguna Chrome memberikan metrik pengalaman pengguna tentang cara pengguna Chrome di dunia nyata merasakan 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 bukanlah tugas yang bersifat selesai, dan Mercado Libre memahami nilai pengoptimalan ini bagi pengguna mereka. Meskipun terus menerapkan beberapa pengoptimalan di seluruh situs, termasuk pengambilan data di halaman listingan produk, pengoptimalan gambar, dan lainnya, mereka terus menambahkan peningkatan pada halaman listingan produk untuk mengurangi Total Blocking Time (TBT), dan dengan FID proxy, bahkan lebih. Pengoptimalan ini mencakup:
- Iterasi pada solusi pemisahan kode.
- Meningkatkan eksekusi skrip pihak ketiga.
- Melanjutkan peningkatan pada pemaketan aset di level pemaket (webpack).
Mercado Libre memiliki pandangan menyeluruh tentang performa, sehingga meskipun mereka terus mengoptimalkan interaktivitas di situs, mereka juga mulai menilai peluang untuk peningkatan pada dua Data Web Inti lainnya saat ini: LCP (Largest Contentful Paint) dan CLS (Cumulative Layout Shift) lebih banyak lagi.