Mengoptimalkan performa situs dan aplikasi eBay untuk pengalaman pengguna yang lebih cepat.
Kecepatan adalah inisiatif seluruh perusahaan untuk eBay pada tahun 2019, dengan banyak tim bertekad untuk membuat situs dan aplikasi secepat mungkin bagi pengguna. Bahkan, untuk setiap peningkatan waktu pemuatan halaman penelusuran selama 100 milidetik, eBay mengalami peningkatan jumlah "Add to Cart" sebesar 0,5%.
100md
Peningkatan waktu pemuatan
0,5%
Peningkatan jumlah "Tambahkan ke Keranjang"
Melalui penerapan Anggaran Performa (yang diperoleh setelah melakukan studi kompetitif dengan Laporan Pengalaman Pengguna Chrome) dan berfokus pada metrik performa yang berfokus pada pengguna, eBay mampu meningkatkan kecepatan situs secara signifikan.
...dan data Laporan Pengalaman Pengguna Chrome juga menyoroti peningkatan ini.
Masih ada banyak pekerjaan yang tersisa, tapi eBay belajar sejauh ini dari segi pembelajaran.
"Pemotongan" Performa Web
Peningkatan yang dilakukan eBay dapat dilakukan karena pengurangan atau "pemotongan" (ukuran dan waktu) berbagai entity yang mengambil bagian dalam perjalanan pengguna. Postingan ini membahas topik yang relevan dengan komunitas developer web secara umum, bukan topik khusus eBay.
Mengurangi payload di semua resource teks
Salah satu cara untuk mempercepat situs adalah dengan memuat lebih sedikit kode. eBay mengurangi payload teks dengan memangkas semua respons JavaScript, CSS, HTML, dan JSON yang tidak digunakan dan tidak diperlukan kepada pengguna. Sebelumnya, dengan setiap fitur baru, eBay terus meningkatkan payload respons mereka, tanpa membersihkan yang tidak digunakan. Hal ini bertambah seiring waktu dan menjadi bottleneck performa. Tim biasanya menunda aktivitas pembersihan ini, tetapi Anda akan terkejut dengan penghematan yang diperoleh eBay.
"Potongan" di sini adalah byte yang terbuang dalam payload respons.
Pengoptimalan jalur penting untuk konten paruh atas
Tidak setiap piksel di layar sama pentingnya. Konten paruh atas lebih penting daripada konten paruh bawah. iOS/Android/desktop dan aplikasi web mengetahui hal ini, tetapi bagaimana dengan layanan? Arsitektur layanan eBay memiliki lapisan yang disebut Layanan Pengalaman, yang berkomunikasi dengan frontend (aplikasi khusus platform dan server web). Lapisan ini didesain secara khusus agar berbasis tampilan atau perangkat, bukan berbasis entity seperti item, pengguna, atau pesanan. eBay kemudian memperkenalkan konsep jalur penting untuk Layanan Pengalaman. Saat permintaan datang ke layanan ini, layanan tersebut berupaya mendapatkan data untuk konten paruh atas dengan segera, dengan memanggil layanan upstream lainnya secara paralel. Setelah data siap, data langsung dihapus. Data paruh bawah dikirim dalam potongan berikutnya atau dimuat dengan lambat. Hasilnya: pengguna dapat melihat konten paruh atas dengan lebih cepat.
"Pemotongan" di sini adalah waktu yang dihabiskan oleh layanan untuk menampilkan konten yang relevan.
Pengoptimalan gambar
Gambar adalah salah satu kontributor terbesar terhadap penggelembungan halaman. Bahkan pengoptimalan kecil dapat berdampak besar. eBay melakukan dua pengoptimalan untuk gambar.
Pertama, eBay menstandarkan format gambar WebP untuk hasil penelusuran di semua platform, termasuk iOS, Android, dan browser yang didukung. Halaman hasil penelusuran adalah halaman dengan banyak gambar di eBay, dan mereka sudah menggunakan WebP, tetapi tidak dalam pola yang konsisten.
Kedua, meskipun gambar listingan eBay sangat dioptimalkan (baik ukuran dan formatnya), ketelitian yang sama tidak berlaku untuk gambar pilihan (misalnya, modul teratas di halaman beranda). eBay memiliki banyak gambar yang diseleksi dengan tangan, yang diupload melalui berbagai alat. Sebelumnya, pengoptimalan bergantung pada uploader, tetapi kini eBay menerapkan aturan dalam alat tersebut, sehingga semua gambar yang diupload akan dioptimalkan dengan tepat.
"Potongan" di sini adalah jumlah byte gambar yang terbuang yang dikirim ke pengguna.
Pengambilan data prediktif aset statis
Sesi pengguna di eBay bukan hanya satu halaman. Ini adalah alur. Misalnya, alur dapat berupa navigasi dari halaman beranda ke halaman penelusuran hingga halaman item. Jadi mengapa laman-laman dalam alur tidak saling membantu? Hal ini adalah gagasan pengambilan data prediktif, di mana satu halaman mengambil data aset statis yang diperlukan untuk kemungkinan halaman berikutnya.
Dengan pengambilan data prediktif, saat pengguna membuka halaman yang diprediksi, aset sudah ada di cache browser. Hal ini dilakukan untuk aset CSS dan JavaScript, dengan URL yang dapat diambil terlebih dahulu. Satu hal yang perlu diperhatikan di sini adalah bahwa ini hanya membantu pada navigasi pertama kali. Pada navigasi berikutnya, aset statis sudah berada dalam cache.
Bagian yang "dipotong" di sini adalah waktu jaringan untuk aset statis CSS dan JavaScript di navigasi pertama.
Melakukan pra-pengambilan hasil penelusuran teratas
Saat pengguna menelusuri eBay, data analisis eBay menunjukkan bahwa kemungkinan besar pengguna akan membuka item dalam 10 teratas hasil penelusuran. Jadi, eBay sekarang mengambil data item dari penelusuran dan membuatnya siap saat pengguna melakukan navigasi. Pengambilan data terjadi di dua level.
Tingkat pertama terjadi di sisi server, tempat layanan item meng-cache 10 item teratas dalam hasil penelusuran. Saat pengguna membuka salah satu item tersebut, eBay kini menghemat waktu pemrosesan server. Cache sisi server dimanfaatkan oleh aplikasi khusus platform dan diluncurkan secara global.
Tingkat lainnya terjadi pada cache browser, yang tersedia di Australia. Pengambilan data item adalah pengoptimalan lanjutan karena sifat item yang dinamis. Selain itu, ada banyak perbedaan lainnya: tayangan halaman, kapasitas, item lelang, dan sebagainya. Anda dapat mempelajarinya lebih lanjut di presentasi Performance Engineering Meetup LinkedIn, atau nantikan postingan blog mendetail tentang topik ini dari para engineer eBay.
"Pemotongan" di sini dapat berupa waktu pemrosesan server atau waktu jaringan, bergantung pada tempat item di-cache.
Ingin mendownload gambar penelusuran
Di halaman hasil penelusuran, saat kueri dikeluarkan di tingkat yang tinggi, terjadi dua hal. Salah satunya adalah langkah penarikan/pemeringkatan, di mana item yang paling relevan dan cocok dengan kueri akan ditampilkan. Langkah kedua adalah melengkapi item yang ditarik dengan informasi tambahan terkait konteks pengguna, seperti biaya pengiriman. eBay kini segera mengirimkan 10 gambar item pertama ke browser dalam satu potongan bersama dengan header, sehingga download dapat dimulai sebelum sisa markup tiba. Oleh karena itu, gambar kini akan muncul dengan lebih cepat. Perubahan ini diluncurkan secara global untuk platform web.
"Pemotongan" di sini adalah waktu mulai download untuk gambar hasil penelusuran.
Edge caching untuk data saran otomatis
Saat pengguna mengetik huruf di kotak penelusuran, saran akan muncul. Saran ini tidak berubah untuk kombinasi huruf setidaknya selama satu hari. Solusi ini ideal untuk disimpan dalam cache dan dilayani dari CDN (selama maksimal 24 jam), bukan permintaan yang mengarah ke pusat data. Pasar internasional mendapatkan manfaat terutama dari penyimpanan cache CDN.
Namun, ada tangkapan layar. eBay memiliki beberapa elemen personalisasi dalam pop-up saran, yang tidak dapat disimpan dalam cache secara efisien. Untungnya, hal ini tidak menjadi masalah pada aplikasi khusus platform, karena antarmuka pengguna untuk personalisasi dan saran dapat dipisahkan. Untuk web, di pasar internasional, latensi lebih penting daripada manfaat kecil dari personalisasi. Dengan cara tersebut, eBay kini memiliki saran otomatis yang disajikan dari cache CDN secara global untuk aplikasi khusus platform dan pasar non-AS untuk eBay.com.
"Pemotongan" di sini adalah latensi jaringan dan waktu pemrosesan server untuk saran otomatis.
Edge caching untuk pengguna halaman beranda yang tidak dikenal
Untuk platform web, konten halaman beranda untuk pengguna yang tidak dikenal sama untuk region tertentu. Ini adalah pengguna yang menggunakan eBay untuk pertama kalinya atau memulai sesi baru, sehingga tidak ada personalisasi. Meskipun materi iklan beranda terus berubah sering kali, masih ada ruang untuk penyimpanan dalam cache.
eBay memutuskan untuk menyimpan konten pengguna yang tidak dikenal (HTML) ke dalam cache di jaringan edge (PoPs) mereka untuk sementara waktu. Pengguna yang baru pertama kali berlangganan kini bisa mendapatkan konten beranda yang disajikan dari server di dekat mereka, bukan dari pusat data yang jauh. eBay masih bereksperimen dengan hal ini di pasar internasional, yang akan memberikan dampak lebih besar.
"Pemotongan" di sini adalah latensi jaringan dan waktu pemrosesan server untuk pengguna yang tidak dikenal.
Pengoptimalan untuk platform lainnya
Peningkatan penguraian aplikasi iOS/Android
Aplikasi iOS/Android berkomunikasi dengan layanan backend yang format responsnya biasanya JSON. Payload JSON ini bisa berukuran besar. Sebagai ganti mengurai seluruh JSON untuk merender sesuatu di layar, eBay memperkenalkan algoritma penguraian efisien yang mengoptimalkan konten yang perlu segera ditampilkan.
Pengguna kini dapat melihat konten dengan lebih cepat. Selain itu, untuk aplikasi Android, eBay mulai melakukan inisialisasi pengontrol tampilan penelusuran segera setelah pengguna mulai mengetik di kotak penelusuran (iOS sudah memiliki pengoptimalan ini). Sebelumnya, hal ini terjadi hanya setelah pengguna menekan tombol penelusuran. Sekarang pengguna dapat menemukan hasil penelusuran mereka dengan lebih cepat. "Pemotongan" di sini adalah waktu yang dihabiskan perangkat untuk menampilkan konten yang relevan.
Peningkatan waktu startup aplikasi Android
Hal ini berlaku untuk pengoptimalan waktu cold start untuk aplikasi Android. Saat aplikasi cold start, banyak inisialisasi terjadi pada tingkat OS dan tingkat aplikasi. Mengurangi waktu inisialisasi di tingkat aplikasi akan membantu pengguna melihat layar utama dengan lebih cepat. eBay melakukan beberapa pembuatan profil dan melihat bahwa tidak semua inisialisasi diperlukan untuk menampilkan konten dan beberapa inisialisasi dapat dilakukan dengan lambat.
Lebih penting lagi, eBay mengamati bahwa ada pemblokiran panggilan analisis pihak ketiga yang menunda rendering di layar. Menghapus panggilan pemblokiran dan menjadikannya asinkron akan lebih membantu waktu cold start. "Pemotongan" di sini adalah waktu startup yang tidak perlu untuk aplikasi Android.
Kesimpulan
Semua "pemotongan" performa yang dilakukan eBay secara kolektif berkontribusi terhadap perubahan besar, dan itu terjadi dalam jangka waktu tertentu. Rilis dilakukan secara bertahap sepanjang tahun, dengan setiap rilis mengurangi puluhan milidetik, yang pada akhirnya mencapai titik di mana eBay sekarang:
Performa adalah fitur dan keunggulan kompetitif. Pengalaman yang dioptimalkan menghasilkan engagement pengguna, konversi, dan ROI yang lebih tinggi. Dalam kasus eBay, pengoptimalan ini bervariasi mulai dari hal yang tidak memerlukan banyak upaya hingga beberapa pengoptimalan yang canggih.
Lihat Speed by a seribu cut untuk mempelajari lebih lanjut dan nantikan artikel lebih mendetail dari engineer eBay tentang performa mereka dalam waktu dekat.