Tối ưu hoá hiệu suất của các trang web và ứng dụng của eBay để mang lại trải nghiệm nhanh hơn cho người dùng.
Tốc độ là một sáng kiến trên toàn công ty của eBay trong năm 2019, với nhiều nhóm quyết tâm làm cho trang web và ứng dụng nhanh nhất có thể cho người dùng. Trên thực tế, cứ mỗi lần thời gian tải trang tìm kiếm cải thiện 100 mili giây, eBay nhận thấy số lượt "Thêm vào giỏ hàng" tăng thêm 0,5%.
100ms
Cải thiện thời gian tải
0,5%
Tăng số lượt "Thêm vào giỏ hàng"
Thông qua việc sử dụng Ngân sách hiệu suất (được lấy từ một nghiên cứu cạnh tranh bằng Báo cáo trải nghiệm người dùng của Chrome) và tập trung vào các chỉ số hiệu suất tập trung vào người dùng chính, eBay đã có thể cải thiện đáng kể tốc độ trang web.
…và dữ liệu trong Báo cáo trải nghiệm người dùng trên Chrome cũng cho thấy những điểm cải tiến này.
Chúng tôi vẫn còn nhiều việc phải làm, nhưng sau đây là những điều eBay đã rút ra được cho đến thời điểm này.
"Cắt" hiệu suất web
eBay có thể cải thiện nhờ việc giảm hoặc "cắt" (theo kích thước và thời gian) nhiều thực thể tham gia vào hành trình của người dùng. Bài đăng này đề cập đến các chủ đề liên quan đến cộng đồng nhà phát triển web nói chung, thay vì các chủ đề dành riêng cho eBay.
Giảm tải trọng trên tất cả tài nguyên văn bản
Một cách để làm cho trang web nhanh hơn là chỉ cần tải ít mã hơn. eBay đã giảm tải trọng văn bản bằng cách cắt bớt tất cả các byte không dùng đến và không cần thiết của các phản hồi JavaScript, CSS, HTML và JSON được phân phát cho người dùng. Trước đây, với mỗi tính năng mới, eBay liên tục tăng tải trọng của các phản hồi mà không dọn dẹp những gì không dùng đến. Điều này tích luỹ theo thời gian và trở thành nút thắt cổ chai về hiệu suất. Các nhóm thường trì hoãn việc dọn dẹp này, nhưng bạn sẽ ngạc nhiên khi biết eBay đã tiết kiệm được bao nhiêu.
"Cut" (cắt) ở đây là số byte bị lãng phí trong tải trọng phản hồi.
Tối ưu hoá đường dẫn quan trọng cho nội dung ở đầu trang
Không phải mọi pixel trên màn hình đều quan trọng như nhau. Nội dung ở đầu màn hình quan trọng hơn so với nội dung ở cuối màn hình. Các ứng dụng iOS/Android/máy tính và web đều nhận biết được điều này, nhưng còn các dịch vụ thì sao? Cấu trúc dịch vụ của eBay có một lớp có tên là Dịch vụ trải nghiệm, nơi giao tiếp với các giao diện người dùng (ứng dụng và máy chủ web dành riêng cho nền tảng). Lớp này được thiết kế riêng để dựa trên chế độ xem hoặc thiết bị, thay vì dựa trên thực thể như mặt hàng, người dùng hoặc đơn đặt hàng. Sau đó, eBay đã giới thiệu khái niệm về đường dẫn quan trọng cho Dịch vụ trải nghiệm. Khi nhận được yêu cầu, các dịch vụ này sẽ xử lý để lấy dữ liệu cho nội dung trên đầu trang ngay lập tức bằng cách gọi song song các dịch vụ thượng nguồn khác. Sau khi dữ liệu sẵn sàng, dữ liệu sẽ được xoá ngay lập tức. Dữ liệu bên dưới đường ranh giới màn hình sẽ được gửi trong một phần sau hoặc tải lười. Kết quả: người dùng có thể xem nội dung trên đầu trang nhanh hơn.
"Khoảng cắt" ở đây là thời gian các dịch vụ dành để hiển thị nội dung liên quan.
Tối ưu hoá hình ảnh
Hình ảnh là một trong những yếu tố lớn nhất gây ra tình trạng trang web bị đầy ứ. Ngay cả những biện pháp tối ưu hoá nhỏ cũng có thể mang lại hiệu quả lớn. eBay đã thực hiện hai biện pháp tối ưu hoá cho hình ảnh.
Trước tiên, eBay đã chuẩn hoá định dạng hình ảnh WebP cho kết quả tìm kiếm trên tất cả các nền tảng, bao gồm cả iOS, Android và các trình duyệt được hỗ trợ. Trang kết quả tìm kiếm là trang có nhiều hình ảnh nhất trên eBay và họ đã sử dụng WebP, nhưng không theo một mẫu nhất quán.
Thứ hai, mặc dù hình ảnh trang thông tin của eBay được tối ưu hoá rất nhiều (cả về kích thước và định dạng), nhưng mức độ nghiêm ngặt này không áp dụng cho hình ảnh được tuyển chọn (ví dụ: mô-đun trên cùng trên trang chủ). eBay có rất nhiều hình ảnh được tuyển chọn thủ công và được tải lên thông qua nhiều công cụ. Trước đây, việc tối ưu hoá là do người tải lên quyết định, nhưng giờ đây, eBay sẽ thực thi các quy tắc trong các công cụ này để tất cả hình ảnh được tải lên đều được tối ưu hoá một cách phù hợp.
"Cut" (cắt) ở đây là số byte hình ảnh bị lãng phí được gửi đến người dùng.
Tải trước dự đoán của các thành phần tĩnh
Một phiên hoạt động của người dùng trên eBay không chỉ là một trang. Đó là một flow. Ví dụ: luồng có thể là một thao tác điều hướng từ trang chủ đến trang tìm kiếm rồi đến trang mặt hàng. Vậy tại sao các trang trong luồng không giúp đỡ lẫn nhau? Đó là ý tưởng của tính năng tìm nạp trước dự đoán, trong đó một trang tìm nạp trước các thành phần tĩnh cần thiết cho trang tiếp theo có thể xảy ra.
Với tính năng tải trước dự đoán, khi người dùng chuyển đến trang được dự đoán, các thành phần đã có trong bộ nhớ đệm của trình duyệt. Việc này được thực hiện cho các thành phần CSS và JavaScript, trong đó URL có thể được truy xuất trước. Xin lưu ý rằng tính năng này chỉ giúp ích cho lần điều hướng đầu tiên. Trong các lần điều hướng tiếp theo, các thành phần tĩnh sẽ đã có trong bộ nhớ đệm.
"Cut" (Cắt) ở đây là thời gian mạng cho các thành phần tĩnh CSS và JavaScript trên thao tác điều hướng đầu tiên.
Tìm nạp trước kết quả tìm kiếm hàng đầu
Khi người dùng tìm kiếm trên eBay, dữ liệu phân tích của eBay cho thấy rằng rất có thể người dùng sẽ chuyển đến một mặt hàng trong 10 kết quả hàng đầu. Vì vậy, eBay hiện sẽ tải trước các mục từ kết quả tìm kiếm và sẵn sàng cho khi người dùng điều hướng. Quá trình tải trước diễn ra ở hai cấp.
Cấp đầu tiên diễn ra phía máy chủ, trong đó dịch vụ mặt hàng lưu 10 mặt hàng hàng đầu trong kết quả tìm kiếm vào bộ nhớ đệm. Khi người dùng truy cập vào một trong những mặt hàng đó, eBay hiện sẽ tiết kiệm thời gian xử lý của máy chủ. Các ứng dụng dành riêng cho nền tảng tận dụng tính năng lưu vào bộ nhớ đệm phía máy chủ và được triển khai trên toàn cầu.
Cấp độ còn lại xảy ra trong bộ nhớ đệm của trình duyệt, có sẵn tại Úc. Tìm nạp trước mục là một tính năng tối ưu hoá nâng cao do bản chất linh động của các mục. Ngoài ra, còn có nhiều điểm khác biệt: số lượt hiển thị trang, dung lượng, mặt hàng đấu giá, v.v. Bạn có thể tìm hiểu thêm về chủ đề này trong bản trình bày về buổi gặp gỡ Kỹ thuật hiệu suất của LinkedIn hoặc theo dõi bài đăng chi tiết trên blog của các kỹ sư eBay về chủ đề này.
"Mức cắt" ở đây có thể là thời gian xử lý của máy chủ hoặc thời gian mạng, tuỳ thuộc vào vị trí lưu mục vào bộ nhớ đệm.
Tải hình ảnh tìm kiếm xuống ngay lập tức
Trên trang kết quả tìm kiếm, khi một truy vấn được đưa ra ở cấp cao, hai điều sẽ xảy ra. Một bước là bước gợi nhắc/xếp hạng, trong đó các mục có liên quan nhất khớp với cụm từ tìm kiếm sẽ được trả về. Bước thứ hai là bổ sung các mặt hàng được gọi lại bằng thông tin bổ sung liên quan đến bối cảnh người dùng, chẳng hạn như phí vận chuyển. Giờ đây, eBay sẽ gửi ngay 10 hình ảnh mặt hàng đầu tiên đến trình duyệt theo một khối cùng với tiêu đề, vì vậy, quá trình tải xuống có thể bắt đầu trước khi phần đánh dấu còn lại đến. Do đó, hình ảnh sẽ xuất hiện nhanh hơn. Thay đổi này được triển khai trên toàn cầu cho nền tảng web.
"Đoạn cắt" ở đây là thời gian bắt đầu tải hình ảnh kết quả tìm kiếm xuống.
Lưu vào bộ nhớ đệm Edge cho dữ liệu đề xuất tự động
Khi người dùng nhập các chữ cái vào hộp tìm kiếm, các đề xuất sẽ bật lên. Những đề xuất này không thay đổi đối với các tổ hợp chữ cái trong ít nhất một ngày. Đây là những nội dung lý tưởng để lưu vào bộ nhớ đệm và phân phát từ CDN (trong tối đa 24 giờ), thay vì các yêu cầu phải chuyển đến trung tâm dữ liệu. Các thị trường quốc tế đặc biệt hưởng lợi từ việc lưu vào bộ nhớ đệm CDN.
Tuy nhiên, có một điểm cần lưu ý. eBay có một số thành phần cá nhân hoá trong cửa sổ bật lên đề xuất, nhưng không thể lưu vào bộ nhớ đệm một cách hiệu quả. May mắn là điều này không phải là vấn đề trong các ứng dụng dành riêng cho nền tảng, vì giao diện người dùng để cá nhân hoá và đề xuất có thể được tách biệt. Đối với web, ở các thị trường quốc tế, độ trễ quan trọng hơn lợi ích nhỏ của tính năng cá nhân hoá. Giờ đây, eBay đã phân phát nội dung đề xuất tự động từ bộ nhớ đệm CDN trên toàn cầu cho các ứng dụng dành riêng cho nền tảng và các thị trường không phải ở Hoa Kỳ cho eBay.com.
"Khoảng cắt" ở đây là độ trễ mạng và thời gian xử lý của máy chủ đối với tính năng gợi ý tự động.
Lưu vào bộ nhớ đệm Edge cho người dùng trang chủ không được nhận dạng
Đối với nền tảng web, nội dung trang chủ cho người dùng không được nhận dạng sẽ giống với nội dung cho một khu vực cụ thể. Đây là những người dùng sử dụng eBay lần đầu hoặc bắt đầu một phiên mới, do đó không có hoạt động cá nhân hoá. Mặc dù mẫu quảng cáo trên trang chủ liên tục thay đổi, nhưng vẫn có không gian để lưu vào bộ nhớ đệm.
eBay quyết định lưu nội dung người dùng không được nhận dạng (HTML) vào bộ nhớ đệm trên mạng biên (PoPs) trong một thời gian ngắn. Giờ đây, người dùng mới có thể nhận nội dung trang chủ từ một máy chủ gần họ, thay vì từ một trung tâm dữ liệu ở xa. eBay vẫn đang thử nghiệm tính năng này ở các thị trường quốc tế, nơi nó sẽ có tác động lớn hơn.
"Mức cắt" ở đây lại là cả độ trễ mạng và thời gian xử lý máy chủ cho người dùng không được nhận dạng.
Tối ưu hoá cho các nền tảng khác
Cải tiến tính năng phân tích cú pháp ứng dụng iOS/Android
Các ứng dụng iOS/Android giao tiếp với các dịch vụ phụ trợ có định dạng phản hồi thường là JSON. Các tải trọng JSON này có thể lớn. Thay vì phân tích cú pháp toàn bộ JSON để hiển thị nội dung trên màn hình, eBay đã giới thiệu một thuật toán phân tích cú pháp hiệu quả giúp tối ưu hoá nội dung cần hiển thị ngay lập tức.
Giờ đây, người dùng có thể xem nội dung nhanh hơn. Ngoài ra, đối với ứng dụng Android, eBay bắt đầu khởi chạy trình điều khiển chế độ xem tìm kiếm ngay khi người dùng bắt đầu nhập vào hộp tìm kiếm (iOS đã có tính năng tối ưu hoá này). Trước đây, việc này chỉ xảy ra sau khi người dùng nhấn nút tìm kiếm. Giờ đây, người dùng có thể truy cập vào kết quả tìm kiếm nhanh hơn. "Thời gian cắt" ở đây là thời gian thiết bị dành để hiển thị nội dung có liên quan.
Cải thiện thời gian khởi động ứng dụng Android
Điều này áp dụng cho việc tối ưu hoá thời gian khởi động nguội cho ứng dụng Android. Khi một ứng dụng khởi động nguội, nhiều hoạt động khởi chạy sẽ diễn ra ở cả cấp hệ điều hành và cấp ứng dụng. Việc giảm thời gian khởi chạy ở cấp ứng dụng giúp người dùng xem màn hình chính nhanh hơn. eBay đã thực hiện một số hoạt động phân tích và nhận thấy rằng không phải tất cả các hoạt động khởi chạy đều cần thiết để hiển thị nội dung và một số hoạt động có thể được thực hiện một cách lười biếng.
Quan trọng hơn, eBay nhận thấy có một lệnh gọi phân tích của bên thứ ba đang chặn, làm chậm quá trình kết xuất trên màn hình. Việc xoá lệnh gọi chặn và chuyển sang chế độ không đồng bộ đã giúp giảm thời gian khởi động nguội. "Cắt" ở đây là thời gian khởi động không cần thiết cho các ứng dụng Android.
Kết luận
Tất cả những "miếng cắt" hiệu suất mà eBay thực hiện đều góp phần làm tăng hiệu suất, và điều này đã diễn ra trong một khoảng thời gian. Các bản phát hành được triển khai theo giai đoạn trong suốt cả năm, mỗi bản phát hành giúp giảm vài chục mili giây, cuối cùng đạt đến điểm eBay đang ở:
Hiệu suất là một tính năng và là lợi thế cạnh tranh. Trải nghiệm được tối ưu hoá giúp tăng mức độ tương tác, số lượt chuyển đổi và ROI của người dùng. Trong trường hợp của eBay, các hoạt động tối ưu hoá này có nhiều cấp độ, từ những việc dễ dàng đến một số việc nâng cao.
Hãy xem bài viết Tăng tốc bằng hàng nghìn cách để tìm hiểu thêm và chú ý theo dõi các bài viết chi tiết hơn của các kỹ sư eBay về công việc cải thiện hiệu suất trong thời gian sắp tới.