Mua sắm tốc độ trên eBay.com

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 người dùng nhanh hơn.

Vào năm 2019, tốc độ là một sáng kiến được áp dụng trên toàn công ty trên eBay, với nhiều nhóm đã xác định sẽ giúp trang web và ứng dụng hoạt động nhanh nhất có thể cho người dùng. Trên thực tế, mỗi cải thiện 100 mili giây về thời gian tải trang tìm kiếm, eBay nhận thấy số lượng "Thêm vào giỏ hàng" tăng 0,5%.

Thông qua việc áp dụng Ngân sách hiệu suất (được rút ra sau khi thực hiện nghiên cứu cạnh tranh với Báo cáo trải nghiệm người dùng trên Chrome) và tập trung vào các chỉ số chính về hiệu suất tập trung vào người dùng, 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 nêu bật những cải tiến này.

Vẫn còn nhiều việc phải làm trước nhưng sau đây là những bài học của eBay cho đến nay.

"Cắt" Hiệu suất web

eBay có thể cải thiện được nhờ việc giảm hoặc "cắt" (về kích thước và thời gian) của 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ủ đề riêng của eBay.

Giảm tải trọng trên mọi tài nguyên văn bản

Một cách để tăng tốc độ trang web là chỉ cần tải ít mã hơn. eBay đã giảm tải văn bản của họ bằng cách cắt bỏ mọi byte không sử dụng và không cần thiết của 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 tải phản hồi mà không dọn dẹp những dữ liệu không sử dụng. Điều này tăng lên theo thời gian và trở thành điểm tắc nghẽn hiệu suất. Các nhóm thường trì hoãn hoạt động dọn dẹp này, nhưng bạn sẽ ngạc nhiên với số tiền mà eBay tiết kiệm được.

Giá trị "cắt" ở đây là các byte bị lãng phí trong tải trọng phản hồi.

Tối ưu hoá lộ trình tối quan trọng cho nội dung trong màn hình đầu tiên

Không phải mọi pixel trên màn hình đều quan trọng như nhau. Nội dung trong màn hình đầu tiên quan trọng hơn nội dung dưới màn hình đầu tiên. Các ứng dụng iOS/Android/máy tính và web và các ứng dụng web đều biết đến điều này, nhưng còn các dịch vụ thì sao? Kiến trúc dịch vụ của eBay có một lớp được gọi là Dịch vụ trải nghiệm mà giao diện người dùng (ứng dụng và máy chủ web dành riêng cho nền tảng) trò chuyện. Lớp này được thiết kế đặc biệt để 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 dành cho Dịch vụ trải nghiệm. Khi có yêu cầu đến các dịch vụ này, chúng sẽ xử lý ngay lập tức dữ liệu cho nội dung trong màn hình đầu tiên bằng cách gọi song song các dịch vụ tải lên khác. Sau khi sẵn sàng, dữ liệu sẽ được đẩy về ngay lập tức. Dữ liệu dưới màn hình đầu tiên sẽ được gửi dưới dạng một đoạn sau hoặc tải từng phần. Kết quả: người dùng sẽ xem nội dung trong màn hình đầu tiên nhanh hơn.

"Phần cắt" ở đây là thời gian mà các dịch vụ dành cho việc hiển thị nội dung có liên quan.

Tối ưu hoá hình ảnh

Hình ảnh là một trong những yếu tố góp phần lớn nhất vào việc mở rộng trang. Ngay cả những cách tối ưu hoá nhỏ cũng có hiệu quả lâu dài. eBay đã thực hiện hai cách 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 nhiều hình ảnh nhất tại eBay và đang sử dụng WebP nhưng không theo một quy luật 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ả kích thước và định dạng), nhưng chúng tôi không áp dụng quy định nghiêm ngặt như vậy 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, được tải lên bằng nhiều công cụ. Trước đây, việc tối ưu hoá là tuỳ thuộc vào người tải lên nhưng giờ đây eBay thực thi các quy tắc trong công cụ, vì vậy, tất cả hình ảnh đã tải lên sẽ được tối ưu hoá một cách phù hợp.

"Phần cắt" ở đây là số byte hình ảnh lãng phí được gửi đến người dùng.

Tìm nạp trước dự đoán các thành phần tĩnh

Phiên người dùng trên eBay không chỉ là một trang. Đó là một luồng. Ví dụ: luồng có thể là điều hướng từ trang chủ đến trang tìm kiếm đến trang mục. Vậy tại sao các trang trong luồng không hỗ trợ lẫn nhau? Đây là ý tưởng về tính năng tìm nạp trước dự đoán, trong đó một trang tìm nạp trước những thành phần tĩnh cần thiết cho trang có khả năng tiếp theo.

Với tính năng tìm nạp 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 nội dung CSS và JavaScript, trong đó URL có thể được truy xuất trước. Một điều cần lưu ý ở đây là tính năng này chỉ hữu ích trong các thao tác điều hướng lần đầu. Trong các lần điều hướng tiếp theo, các nội dung tĩnh sẽ có trong bộ nhớ đệm.

"Cắt" ở đây là thời gian mạng cho các tài sản tĩnh CSS và JavaScript trong thanh điều hướng đầu tiên.

Tìm nạp trước cá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ó khả năng người dùng sẽ chuyển đến một mục trong 10 kết quả tìm kiếm hàng đầu. Vì vậy, eBay hiện tìm nạp trước các mục từ tìm kiếm và giữ cho các mục đó luôn sẵn sàng khi người dùng điều hướng. Quá trình tìm nạp trước diễn ra ở hai cấp.

Cấp độ đầu tiên diễn ra phía máy chủ, khi dịch vụ mặt hàng lưu 10 mục 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 các mục đó, eBay giờ đây giúp tiết kiệm thời gian xử lý máy chủ. Tính năng lưu vào bộ nhớ đệm phía máy chủ được các ứng dụng dành riêng cho nền tảng tận dụng và được triển khai trên toàn cầu.

Cấp độ thứ hai xảy ra trong bộ nhớ đệm của trình duyệt có tại Úc. Tính năng tìm nạp trước mục là một tính năng tối ưu hoá nâng cao do tính chất linh động của các mục. Vấn đề này cũng có nhiều điểm khác biệt: số lượt hiển thị trang, khả năng xử lý, các mục trong phiên đấu giá, v.v. Bạn có thể tìm hiểu thêm về chủ đề này trong bài thuyết trình về Buổi hội thảo kỹ thuật hiệu suất của LinkedIn hoặc theo dõi bài đăng chi tiết trên blog về chủ đề này từ các kỹ sư của eBay.

Giá trị "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.

Sẵn sàng tải hình ảnh tìm kiếm xuống

Trong trang kết quả tìm kiếm, có hai điều sẽ xảy ra khi một cụm từ tìm kiếm được đưa ra ở cấp độ cao. Một là bước gọi lại/xếp hạng, trong đó các mục có liên quan nhất khớp với truy vấn được trả về. Bước thứ hai là tăng cường các mục bị thu hồi bằng thông tin bổ sung liên quan đến ngữ cảnh người dùng, chẳng hạn như chi phí vận chuyển. Bay now ngay lập tức gửi 10 hình ảnh mặt hàng đầu tiên đến trình duyệt theo từng đoạn cùng với tiêu đề, để việc tải xuống có thể bắt đầu trước khi phần còn lại của đánh dấu đến. Nhờ vậy, 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.

"Cắt" ở đây là thời gian bắt đầu tải xuống của hình ảnh trong kết quả tìm kiếm.

Lưu vào bộ nhớ đệm ở cạnh đối với dữ liệu tự động đề xuất

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 gợi ý này không thay đổi cho các tổ hợp chữ cái trong ít nhất một ngày. Đây là những giải pháp lý tưởng để lưu vào bộ nhớ đệm và phân phát từ CDN (tối đa 24 giờ), thay vì yêu cầu đến tận trung tâm dữ liệu. Thị trường quốc tế đặc biệt được hưởng lợi từ việc lưu vào bộ nhớ đệm của CDN.

Mặc dù vậy, eBay có một số yếu tố cá nhân hoá trong cửa sổ bật lên đề xuất mà không thể lưu vào bộ nhớ đệm một cách hiệu quả. May mắn là đó 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 cho hoạt động cá nhân hoá và các đề xuất có thể được tách riêng. Đối với web, tại các thị trường quốc tế, độ trễ quan trọng hơn lợi ích nhỏ của hoạt động cá nhân hoá. Nhờ đó, eBay hiện đã tự động 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 cũng như các thị trường ngoài Hoa Kỳ cho eBay.com.

Phần "cắt" ở đây là độ trễ mạng và thời gian xử lý của máy chủ đối với các đề xuất tự động.

Lưu vào bộ nhớ đệm ở cạnh đối với người dùng không nhận dạng được trang chủ

Đối với nền tảng web, nội dung trên trang chủ dành cho người dùng không nhận dạng được sẽ giống nhau ở một khu vực cụ thể. Đây là những người dùng đang sử dụng eBay lần đầu tiên hoặc bắt đầu một phiên mới, do đó không được cá nhân hoá. Mặc dù các mẫu quảng cáo trên trang chủ liên tục thay đổi thường xuyên, vẫn còn khả năng để lưu vào bộ nhớ đệm.

eBay đã quyết định lưu vào bộ nhớ đệm nội dung người dùng không nhận dạng được (HTML) trên mạng cạnh của họ (PoPs) trong một thời gian ngắn. Những người dùng lần đầu hiện có thể nhận nội dung trang chủ được phân phối 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 việc này tại các thị trường quốc tế, nơi sẽ có tác động lớn hơn.

"Cắt" ở đây lại là cả độ trễ mạng và thời gian xử lý của máy chủ đối với người dùng không nhận dạng được.

Tối ưu hoá cho các nền tảng khác

Cải thiện quá trình 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 nào đó 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 hóa cho nội dung cần hiển thị ngay lập tức.

Người dùng hiện 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 các bộ điều khiển khung hiển thị 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, điều 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 kết quả tìm kiếm nhanh hơn. "Phần cắt" ở đây là thời gian mà các thiết bị dành cho việc hiển thị nội dung có liên quan.

Cải thiện thời gian khởi động ứng dụng Android

Quy định này áp dụng cho tính năng tối ưu hoá thời gian khởi động nguội cho các ứng dụng Android. Khi một ứng dụng khởi động nguội, rất nhiều hoạt động khởi chạy 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 đã lập hồ sơ và nhận thấy rằng không phải tất cả khởi chạy đều bắt buộc để hiển thị nội dung và một số có thể được thực hiện từng phần.

Quan trọng hơn, eBay nhận thấy rằng có một lệnh gọi phân tích chặn của bên thứ ba 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à đặt lệnh gọi đó không đồng bộ sẽ giúp tăng thê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 đối với các ứng dụng Android.

Kết luận

Tất cả các hành động "cắt" hiệu quả mà eBay đã đóng góp chung để thúc đẩy sự chuyển biến và điều này đã diễn ra trong một khoảng thời gian. Các bản phát hành này được tiến hành theo từng giai đoạn trong suốt cả năm, trong đó mỗi bản phát hành giảm hàng chục mili giây, cuối cùng đạt đến đỉnh điểm mà eBay hiện nay:

Hiệu suất vừa là một tính năng vừa 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 của người dùng, số lượt chuyển đổi và lợi tức đầu tư (ROI). Trong trường hợp của eBay, các biện pháp tối ưu hoá này rất đa dạng, từ một số việc ít nỗ lực cho đến một số tiên tiến.

Khám phá Speed by a nghìn Cuts (Tốc độ qua hàng nghìn bản cắt) để tìm hiểu thêm và theo dõi các bài viết chi tiết hơn của các kỹ sư của eBay về hoạt động hiệu suất của họ trong tương lai gần.