Ele.me meningkatkan waktu muat performa dengan Progressive Web App multi-halaman

Ele.me adalah perusahaan pemesanan dan pengiriman makanan terbesar di China daratan. Perusahaan ini melayani 260 juta pengguna terdaftar di lebih dari 200 kota di seluruh China, dan memiliki lebih dari 1,3 juta listingan restoran. Dengan 99% penggunanya memesan makanan di perangkat seluler, Ele.me berupaya meningkatkan pengalaman web selulernya, sehingga lebih cepat dan lebih andal dalam koneksi yang tidak stabil, sekaligus mengandalkan model teknis inti dari aplikasi multi-halaman untuk mengakomodasi kebutuhan operasional mereka.

  • Waktu pemuatan menurun sebesar 11,6% di semua halaman pra-cache
  • Waktu pemuatan menurun rata-rata sebesar 6,35% di semua halaman.
  • Waktu ke interaktif secara konsisten turun menjadi 4,93 detik di jaringan 3G pada pemuatan pertama

Setelah kami merilis PWA ele.me, waktu pemuatan kami turun secara signifikan, yang mengubah pengalaman web seluler kami menjadi salah satu situs reservasi makanan tercepat di China.

Spencer Yang, Product Manager di PWA Ele.me

Memilih antara aplikasi multihalaman dan aplikasi web satu halaman

Di aplikasi multi-halaman (MPA), setiap rute yang dibuka pengguna akan memicu permintaan penuh halaman, bersama dengan skrip dan gaya terkait yang diperlukan, ke server. Hal ini berbeda dengan model aplikasi web satu halaman (SPA), yaitu setiap navigasi rute memicu pengambilan hanya untuk konten dan data yang relevan dengan rute tersebut, dan UI kemudian dibuat oleh kode JavaScript yang berjalan di aplikasi klien.

Pertumbuhan pesat Ele.me dalam beberapa tahun terakhir telah menyebabkan pertumbuhan unit bisnis yang berbeda di dalam perusahaan, yang masing-masing bertanggung jawab menjalankan layanan mikronya di domain https://ele.me utama. Tim Ele.me menyimpulkan bahwa pemisahan masing-masing layanan ini paling baik dilakukan dengan model aplikasi multi-halaman (MPA), dengan setiap tim berjalan dan mempertahankan layanannya sendiri.

Menerapkan PRPL ke KKP

Pola PRPL (Pramuat resource penting, Render rute awal, Pre-cache rute yang tersisa, Lazy-load rute yang tersisa) memberi developer web serangkaian kolom untuk memandu struktur PWA, dengan penekanan khusus pada waktu yang cepat untuk interaktivitas dan memaksimalkan cache untuk mengurangi perjalanan pulang pergi jaringan. Meskipun PRPL telah teruji dengan baik di SPA, kurang jelas bagaimana seseorang akan benar-benar menerapkannya di suatu KAP. Ele.me memutuskan untuk mengambil pola pikir PRPL saat memikirkan pembuatan ulang MPA mereka sebagai PWA. Untuk melakukannya, mereka memastikan bahwa saat pengguna membuka halaman, mereka melakukan pramuat resource penting untuk halaman tersebut dengan menyertakan <link rel="preload"> sesuai kebutuhan, atau menampilkan skrip tersebut pada level yang cukup dangkal sehingga prapemuat browser dapat melakukan tugasnya tanpa memerlukan petunjuk tambahan. Mereka juga secara bertahap meningkatkan PWA dengan menginstal pekerja layanan setiap kali didukung oleh browser, yang kemudian digunakan untuk mengambil dan melakukan pra-cache rute navigasi tingkat atas lainnya sehingga pengguna mendapatkan pengalaman pemuatan dan rendering yang lebih cepat saat mengklik PWA. Setiap halaman di MPA memiliki rutenya sendiri, sehingga mempercepat rendering rute awal sama dengan menerapkan praktik terbaik untuk mengoptimalkan jalur rendering penting untuk setiap rute. Dengan perubahan ini, waktu pemuatan keseluruhan menurun rata-rata sebesar 6,35% di semua halaman.

Menayangkan layar kerangka transisi sesegera mungkin

Ele.me ingin menerapkan ide tentang layar kerangka ke dalam UX, yang merupakan cara untuk memastikan bahwa setiap kali pengguna mengetuk tombol atau link, halaman akan bereaksi sesegera mungkin dengan mentransisikan pengguna ke halaman baru tersebut, kemudian memuat konten ke halaman tersebut saat konten tersedia; ini juga merupakan kunci untuk meningkatkan performa PWA yang dirasakan. Namun, karena setiap halaman dalam MPA adalah rute awalnya sendiri, setiap navigasi mengharuskan pengulangan semua tugas pemuatan, penguraian, dan evaluasi yang diperlukan setiap saat.

Untuk mengatasi hal ini, Ele.me mem-build layar kerangka sebagai komponen UI yang sebenarnya, lalu menggunakan stack Rendering Sisi Server dari Vue.js untuk mem-build, lalu merender komponen Vue terlebih dahulu ke string sebelum memasukkannya ke dalam template HTML. Hal ini memungkinkan pengguna merender layar kerangka secara langsung dan mencapai transisi yang lebih lancar saat menavigasi antar-halaman.


Layar kerangka selama transisi halaman
Layar kerangka selama transisi halaman
Halaman dirender sepenuhnya setelah transisi halaman
Halaman dirender sepenuhnya setelah transisi halaman

Menyimpan cache resource bersama dengan pekerja layanan

Rute yang berbeda dimuat saat pengguna menjelajahi PWA, dan akan sia-sia jika memuat rute ini dari jaringan berulang kali. Untuk mengatasi hal ini, Ele.me menganalisis rute penting yang paling penting bagi pengguna, membuat plugin webpack untuk mengumpulkan dependensi rute penting tersebut, lalu melakukan precache rute ini saat menginstal pekerja layanan di browser klien pengguna. Rute penting ini mencakup JavaScript, CSS, dan gambar yang membentuk shell UI standar PWA.

Rute yang dianggap penting, tetapi tidak penting, akan di-cache secara bertahap oleh pekerja layanan saat runtime saat pengguna terus bernavigasi melalui PWA. Hal ini memungkinkan Ele.me menayangkan PWA kepada pengguna langsung dari cache dalam semua kondisi jaringan. Hasilnya: waktu pemuatan menurun sebesar 11,6% di semua halaman yang di-cache.

Bacaan lebih lanjut