Ele.me là công ty đặt hàng và giao đồ ăn lớn nhất ở Trung Quốc đại lục. Nền tảng này phục vụ 260 triệu người dùng đã đăng ký từ hơn 200 thành phố trên khắp Trung Quốc và có hơn 1, 3 triệu trang thông tin nhà hàng. Với 99% người dùng đặt món ăn trên thiết bị di động, Ele.me đã đặt mục tiêu cải thiện trải nghiệm web dành cho thiết bị di động, giúp trang web trở nên nhanh hơn và đáng tin cậy hơn trong việc kết nối không ổn định, đồng thời dựa vào mô hình kỹ thuật cốt lõi của một ứng dụng nhiều trang để đáp ứng nhu cầu vận hành của họ.
- Thời gian tải đã giảm 11,6% trên tất cả các trang được lưu trước trong bộ nhớ đệm
- Thời gian tải trên tất cả các trang đã giảm trung bình 6,35%.
- Thời gian để tương tác một cách nhất quán giảm xuống còn 4,93 giây trên mạng 3G trong lần tải đầu tiên
Sau khi chúng tôi phát hành PWA ele.me, thời gian tải của chúng tôi đã giảm đáng kể, giúp trải nghiệm web dành cho thiết bị di động của chúng tôi trở thành một trong những trang web đặt đồ ăn nhanh nhất ở Trung Quốc.
Spencer Dương, Nhà quản lý sản phẩm cho PWA Ele.me
Chọn giữa ứng dụng nhiều trang và ứng dụng một trang
Trong một ứng dụng nhiều trang (MPA), mỗi tuyến mà người dùng di chuyển sẽ kích hoạt yêu cầu đầy đủ của trang, cùng với các tập lệnh và kiểu được liên kết cần thiết, đến máy chủ. Điều này trái ngược với mô hình ứng dụng một trang (SPA), trong đó mọi thao tác điều hướng tuyến đường sẽ kích hoạt quá trình tìm nạp chỉ cho nội dung và dữ liệu liên quan đến tuyến đó, sau đó, giao diện người dùng được tạo bằng mã JavaScript chạy trên ứng dụng khách.
Sự phát triển mạnh mẽ của Ele.me trong những năm gần đây đã dẫn đến sự phát triển của các đơn vị kinh doanh riêng biệt trong công ty, mỗi đơn vị chịu trách nhiệm điều hành dịch vụ vi mô của mình trong miền https://ele.me chính. Nhóm Ele.me kết luận rằng việc phân tách các dịch vụ riêng lẻ này sẽ hoạt động hiệu quả nhất bằng mô hình ứng dụng nhiều trang (MPA), trong đó mỗi nhóm vận hành và duy trì dịch vụ riêng.
Áp dụng PRPL cho MPA
Mẫu PRPL (Tải trước các tài nguyên quan trọng, tuyến ban đầu Kết xuất, các tuyến còn lại Tải trước vào bộ nhớ đệm, các tuyến còn lại Tải từng phần) cung cấp cho nhà phát triển web một tập hợp dải điều hướng để hướng dẫn cấu trúc của PWA, đặc biệt chú trọng vào thời gian tương tác nhanh chóng và tối đa hoá việc lưu vào bộ nhớ đệm để giảm các lượt truyền vòng qua mạng. Mặc dù PRPL đã được thử nghiệm kỹ lưỡng trên SPA, nhưng cách thức thực sự áp dụng trên MPA vẫn chưa rõ ràng. Ele.me quyết định áp dụng tư duy PRPL khi nghĩ đến việc
xây dựng lại MPA của họ dưới dạng PWA. Để làm điều đó, chúng đảm bảo rằng khi người dùng
di chuyển đến một trang, họ sẽ tải trước các tài nguyên quan trọng cho
trang đó bằng cách bao gồm <link rel="preload"> nếu cần hoặc hiển thị các tập lệnh đó ở cấp đủ nông để trình tải trước của trình duyệt có thể thực hiện công việc
mà không cần thêm gợi ý. Họ cũng tăng cường dần PWA bằng cách cài đặt một trình chạy dịch vụ bất cứ khi nào được trình duyệt hỗ trợ. Sau đó, trình chạy sẽ sử dụng các trình chạy này để tìm nạp và lưu vào bộ nhớ đệm các tuyến điều hướng cấp cao nhất khác nhằm giúp người dùng có trải nghiệm tải và kết xuất nhanh hơn khi nhấp vào PWA. Mỗi trang trong MPA là một tuyến riêng, vì vậy, việc tăng tốc kết xuất tuyến ban đầu tương đương với việc triển khai các phương pháp hay nhất để tối ưu hoá đường dẫn kết xuất quan trọng cho mỗi tuyến. Với những thay đổi này, thời gian tải tổng thể đã giảm trung bình 6,35% trên tất cả các trang.
Cung cấp màn hình khung chuyển đổi sớm nhất có thể
Ele.me muốn áp dụng ý tưởng màn hình bộ xương vào trải nghiệm người dùng. Đây là một cách để đảm bảo rằng mỗi khi người dùng nhấn vào bất kỳ nút hoặc đường liên kết nào, trang sẽ phản ứng sớm nhất có thể bằng cách chuyển người dùng sang trang mới đó, sau đó tải nội dung cho trang đó khi nội dung hiện có; đây cũng là chìa khoá để cải thiện hiệu suất cảm nhận của PWA. Tuy nhiên, vì mỗi trang trong một MPA là tuyến ban đầu riêng, nên mỗi lần điều hướng đều phải thực hiện lại mọi công việc tải, phân tích cú pháp và đánh giá cần thiết mỗi lần.
Để giải quyết vấn đề này, Ele.me đã tạo màn hình khung làm thành phần giao diện người dùng thực tế, sau đó sử dụng Ngăn xếp hiển thị phía máy chủ của Vue.js để tạo và sau đó kết xuất trước các thành phần Vue vào chuỗi trước khi đưa chúng vào mẫu HTML. Điều này cho phép họ hiển thị trực tiếp màn hình khung và có được quá trình chuyển đổi linh hoạt hơn khi di chuyển giữa các trang.
|
|
Lưu các tài nguyên được chia sẻ vào bộ nhớ đệm với trình chạy dịch vụ
Nhiều tuyến sẽ được tải khi người dùng duyệt qua PWA và việc tải những tuyến này nhiều lần từ mạng sẽ rất lãng phí. Để giải quyết vấn đề này, Ele.me đã phân tích các tuyến quan trọng mà người dùng quan tâm nhất, tạo một trình bổ trợ gói web để thu thập phần phụ thuộc của các tuyến quan trọng này, sau đó lưu trước các tuyến này vào bộ nhớ đệm khi cài đặt một trình chạy dịch vụ trên trình duyệt ứng dụng của người dùng. Các tuyến quan trọng này bao gồm JavaScript, CSS và hình ảnh tạo thành giao diện người dùng điển hình của PWA.
Các tuyến đường được coi là quan trọng nhưng không quan trọng sẽ được worker dịch vụ lưu vào bộ nhớ đệm dần dần trong thời gian chạy khi người dùng tiếp tục di chuyển qua PWA. Việc này cho phép Ele.me phân phát PWA trực tiếp cho người dùng từ bộ nhớ đệm trong mọi điều kiện mạng. Kết quả: thời gian tải giảm 11,6% trên tất cả các trang đã được lưu trước vào bộ nhớ đệm.