Cara Mercado Libre mengoptimalkan Data Web (TBT/FID)

Mengoptimalkan interaktivitas halaman detail produk untuk pengurangan Max Potential FID di Lighthouse sebesar 90% dan peningkatan FID sebesar 9% di Laporan Pengalaman Pengguna Chrome.

Carlos Aranha

Demián Renzulli

Joan Baca

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.

Versi seluler dan Desktop halaman detail produk Mercado Libre.

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).

Catatan: Selama project ini, Mercado Libre menggunakan Max Potential FID di Lighthouse karena merupakan metrik utama alat ini untuk mengukur interaktivitas pada saat itu. Lighthouse sekarang merekomendasikan penggunaan Total Blocking Time.

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:

Tampilan thread utama halaman detail produk Mercado Libre.

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.

Tampilan waterfall halaman detail produk Mercado Libre.

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:

Di waterfall teratas WPT, terdapat kotak merah panjang (di baris Page is Interactive) antara detik 3 dan 5. Di waterfall bawah, batang dipecah menjadi bagian-bagian yang lebih kecil, menempati thread utama untuk jangka waktu yang lebih singkat.

Lighthouse menunjukkan pengurangan 57% dalam Max Potential First Input Delay:

Iterasi kedua

Tim tersebut terus menggali tugas-tugas panjang untuk menemukan peningkatan berikutnya.

Waterfall (tidak digambarkan) membantu Mercado Libre mengidentifikasi library mana yang banyak menggunakan thread utama (baris Thread Utama Browser) dan baris Page is Interactive dengan jelas menunjukkan bahwa aktivitas thread utama ini memblokir interaktivitas.

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:

Progres FID Mercado Libre antara Januari 2020 dan April 2020. Sebelum proyek pengoptimalan, 82% pengguna memahami FID sebagai cepat (di bawah 100 md). Setelah itu, lebih dari 91% pengguna memahami metrik tersebut dengan cepat.

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.