Vài lời của người dịch: Tối ưu hóa trang thương mại điện tử khó khăn hơn các trang báo điện tử thông thường. Nguyên nhân ở chỗ trang thương mại điện tử có thể có nhiều tính năng đa dạng, đòi hỏi cá nhân hóa, bảo mật, cũng như yêu cầu tính động cao hơn so với trang báo điện tử vốn có thể cache tĩnh phần lớn nội dung. Một nguyên nhân khác khiến người ta phải cẩn trọng hơn: sai lầm khi tiến hành tối ưu hóa trên trang thương mại điện tử có thể phải trả cái giá rất lớn, nhưng điều ngược lại cũng đúng, lợi ích từ việc làm chuẩn cũng không hề nhỏ! Trong khi tất cả những người đọc bài viết này có lẽ đều không sở hữu gian hàng hoặc khối tài sản bằng 1/1000 eBay, nhưng khoảng cách đó không ngăn cấm chúng ta muốn có được cái nhìn tổng quan về các biện pháp cải tiến tốc độ mà đại gia trực tuyến này thực hiện, cũng như nhận được ít nhiều lợi ích từ hiểu biết đó. eBay thực hiện các cải tiến vừa sâu vừa rộng, đánh hầu khắp các mặt trận, cả của ứng dụng web, lẫn ứng dụng trên điện thoại di động nền iOS và Android. Triết lý cho các biện pháp này đều dễ hiểu, nhưng chúng ta cũng biết rằng, triển khai nó trên thực tế, và đi vào chi tiết mới là điều khó khăn, tốn nhiều công sức… OK, đã đến lúc bắt đầu.
—
Tối ưu hóa hiệu suất, tốc độ ứng dụng và website của eBay với mục tiêu đem đến trải nghiệm người dùng nhanh hơn.
Tốc độ là sáng kiế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 website và ứng dụng nhanh nhất có thể cho người dùng. Trong thực tế, với mỗi 100 mili giây tải cải thiện được trong tốc độ tải trang tìm kiếm, eBay nhận thấy gia tăng 0,5% số lượng thao tác “Add to Cart / Thêm vào Giỏ hàng”. Nói nhanh cho vuông: tăng tốc giúp họ kiếm được nhiều tiền hơn.
Thông qua việc áp dụng đầu tư vào hiệu suất (xuất phát sau một nghiên cứu cạnh tranh với Chrome User Experience Report) và nhấn mạnh vào các chỉ số hiệu suất, tốc độ tập trung vào người dùng, eBay đã tạo ra được các cải tiến đáng kể về mặt tốc độ website.
…và dữ liệu Chrome User Experience Report của họ cũng làm nổi bật những cải thiện này.
Vẫn còn nhiều việc phải làm nữa, nhưng đây là các bài học đáng giá mà eBay rút ra được.
Cắt giảm để tăng hiệu suất, tốc độ web
Các cải thiện của eBay có được là nhờ giảm hoặc “cắt” (về khía cạnh kích cỡ và thời gian) của nhiều thành phần tham gia vào hành trình của người dùng. Bài viết này bao trùm các chủ để mà có liên quan đến cộng đồng lập trình web nói chung, thay vì chỉ đơn thuần là các chủ đề của riêng eBay (điều này đặc biệt đúng nếu trang của bạn cũng là trang thương mại điện tử giống eBay).
Giảm tải trên tất cả các tài nguyên văn bản
Một cách đơn giản để giúp trang web tải nhanh hơn là tải ít mã đi (load less code). eBay giảm tải mã văn bản của họ bằng cách loại bỏ tất cả các dòng mã không sử dụng hoặc không cần thiết, bao gồm các file JavaScript, CSS, HTML, và các phản hồi JSON phục vụ người dùng. Trước đây, mỗi khi tính năng mới ra đời, eBay lại làm gia tăng thời gian phản hồi, và không dọn dẹp những cái không còn sử dụng nữa. Điều này làm tăng thêm thời gian và có nguy cơ trở thành vấn đề tắc nghẽn thắt cổ chai về hiệu suất (performance bottleneck). Các đội thường trì hoãn hoạt động dọn dẹp, nhưng bạn sẽ thấy ngạc nhiên khi biết eBay đã tiết kiệm nhiều thời gian như thế nào sau khi quyết tâm thực hiện việc đó.
Từ “cắt” ở đây có nghĩa là các byte lãng phí trong đáp ứng tải của người dùng.
Đường dẫn quan trọng để tối ưu hóa cho nội dung thuộc màn hình đầu tiên
Không phải tất cả các pixel trên màn hình đều có mức độ quan trọng như nhau. Nội dung nằm trên màn hình đầu tiên quan trọng hơn so với những nội dung khác nằm bên dưới (below-the-fold). Các ứng dụng gốc và web nhận thức được điều đó, nhưng các dịch vụ của họ thực tế làm thế nào? Kiến trúc dịch vụ của eBay có một lớp gọi là Dịch vụ Trải nghiệm (Experience Services), mà các frontend (ứng dụng gốc và dịch vụ web) giao tiếp với. Layer này được thiết kế đặc biệt cho lượt xem hoặc dựa trên thiết bị (device-based), hơn là dựa trên thực thể (entity-based) như là sản phẩm, người dùng hoặc đơn đặt hàng. eBay sau đó giới thiệu ý tưởng về đường dẫn quan trọng (critical path) cho Experience Services. Khi một yêu cầu hướng đến các dịch vụ của họ, họ tiến hành lấy dữ liệu nội dung nằm trên màn hình đầu tiên (above-the-fold) ngay lập tức, bằng cách gọi các dịch vụ upstream khác song song. Một khi dữ liệu đã sẵn sàng, nó sẽ được đẩy ra ngay lập tức. Dữ liệu nằm dưới màn hình đầu tiên sẽ được gửi đi trong các đoạn mã sau đó hoặc được lazy-load. Kết quả: người dùng thấy nội dung nằm trên màn hình đầu tiên nhanh hơn.
“Cắt” ở đây có nghĩa là thời gian tiêu tốn bởi các dịch vụ để hiển thị nội dung liên quan.
Tối ưu hóa hình ảnh
Hình ảnh là một trong các yếu tố lớn nhất góp phần làm dung lượng trang phình to (page bloat). Thậm chí các tối ưu hóa nhỏ thôi cũng giúp ích rất nhiều. eBay thực hiện hai tối ưu hóa cho ảnh.
Đầu tiên, eBay chuẩn hóa định dạng ảnh WebP cho các kết quả tìm kiếm trên tất cả các nền tảng, bao gồm iOS, Android, và các trình duyệt hỗ trợ (định dạng ảnh WebP). Trang kết quả tìm kiếm là trang nặng về hình ảnh nhất trên eBay, và họ cũng đã sử dụng ảnh WebP, nhưng chuyện này không diễn ra trong một mô hình nhất quán.
Thứ hai, mặc dù các ảnh nằm trong phần danh mục sản phẩm của eBay được tối ưu hóa rất nhiều (thông qua cả kích cỡ lẫn định dạng), sự nghiêm ngặt tương tự không áp dụng cho các hình ảnh tuyển chọn / curated image (ví dụ, các module nằm trên cùng của trang chủ). eBay có rất nhiều hình ảnh tuyển chọn, được tải thông qua nhiều công cụ. Trước đây việc tối ưu hóa cho các ảnh này phụ thuộc hoàn toàn vào người tải lên (uploader), nhưng giờ đây eBay áp dụng bắt buộc các luật tối ưu hóa vào trong công cụ, vì thế tất cả các ảnh tải lên sẽ được tối ưu hóa một cách thích hợp.
“Cắt” ở đây có nghĩa là dữ liệu ảnh gửi đến cho người dùng.
Dự đoán tìm nạp trước (prefetch) các tài nguyên tĩnh
Phiên làm việc của người dùng (user session) trên eBay không chỉ nằm trên một trang. Người dùng thường di chuyển từ trang này sang trang khác. Lấy ví dụ, sự di chuyển có thể điều hướng từ trang chủ sang trang tìm kiếm rồi tới trang mô tả sản phẩm (item page). Vậy tại sao các trang trong luồng dịch chuyển không giúp đỡ lẫn nhau? Đó là ý tưởng cho ra đời mô hình dự đoán prefetch, khi mà một trang có thể tìm nạp trước các tài nguyên tĩnh được yêu cầu trong trang kế tiếp (mà người dùng có khả năng sẽ truy cập đến).
Với việc dự đoán prefetch, khi người dùng điều hướng đến trang được dự đoán, các tài nguyên đã được trình duyệt cache sẵn rồi. Điều này áp dụng cho các tài nguyên như CSS và JavaScript, khi mà URL của nó có thể được lấy trước thời hạn. Một điều cần phải lưu ý ở đây là nó chỉ giúp ích cho lần điều hướng đầu tiên. Các lần điều hướng tiếp theo, các tài nguyên tĩnh đã có mặt trong cache rồi.
“Cắt” ở đây có nghĩa là giảm thời gian tải CSS và JavaScript (cũng như các tài nguyên tĩnh khác nếu có) trong lần điều hướng đầu tiên (của truy cập kế tiếp). Link Prefetch được eBay dựa trên học máy và phân tích trang để đem lại hiệu quả cao hơn (ví dụ chỉ prefetch các nội dung có xác suất được truy cập cao, thay vì prefetch dàn trải tất cả).
Prefetch các kết quả tìm kiếm đầu tiên
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 có khả năng cao người dùng sẽ điều hướng đến sản phẩm nằm trong top 10 các kết quả tìm kiếm. Vì thế eBay sẽ tìm nạp trước các sản phẩm từ khu vực tìm kiếm và giữ chúng sẵn sàng khi người dùng thực sự điều hướng đến. Prefetch được thực hiện ở hai cấp độ.
Cấp độ đầu tiên diễn ra ở phía máy chủ (server side), khi dịch vụ item lưu trữ top 10 sản phẩm trong các kết quả tìm kiếm. Khi người dùng đi đến một trong các sản phẩm này, eBay tiết kiệm được thời gian xử lý của máy chủ. Cache phía máy chủ được tận dụng cả trên các ứng dụng gốc và được triển khai trên toàn cầu.
Cấp độ khác diễn ra trong cache phía trình duyệt, nó hiện được cung cấp ở Úc. Sản phẩm được prefetch là một tối ưu hóa nâng cao do tính chất động tự nhiên của các mục. Cũng có nhiều sắc thái cho nó: số lần hiển thị trang, sản phẩm đấu giá, vân vân.
“Cắt” ở đây có nghĩa là giảm cả thời gian xử lý phía máy chủ và thời gian tải qua mạng, phụ thuộc vào sản phẩm nào được cache.
Thúc đẩy tải trong tìm kiếm hình ảnh
Trong trang kết quả tìm kiếm, khi một truy vấn được đưa ra ở cấp độ cao, có hai điều xảy ra. Bước một là triệu hồi / xếp hạng, khi mà các sản phẩm liên quan nhất đến truy vấn được trả về. Bước thứ hai là tăng cường thông tin cho các sản phẩm đó với các thông tin liên quan trong bối cảnh người dùng (user-context) chẳng hạn như chi phí giao hàng. eBay giờ gửi ngay lập tức 10 ảnh sản phẩm đầu tiên tới trình duyệt trong một đoạn mã cùng với tiêu đề, vì thế việc tải có thể bắt đầu trước khi phần còn lại của mã đánh dấu đến nơi. Và hệ quả là các ảnh sẻ hiển thị nhanh hơn. Thay đổi này được triển khai trên toàn cầu cho ứng dụng web.
“Cắt” ở đây có nghĩa là giảm thời gian bắt đầu tải các hình ảnh trong kết quả tìm kiếm.
Thúc đẩy caching cho dữ liệu gợi ý tự động (autosuggestion)
Khi người dùng gõ các ký tự trong ô tìm kiếm (search box), các gợi ý sẽ bật ra. Các gợi ý này không thay đổi cho các kết hợp ký tự trong ít nhất một ngày. Chúng là các ứng cử viên lý tưởng cho cache và được phục vụ từ CDN (tối đa 24 giờ), thay vì các yêu cầu gửi đến trung tâm dữ liệu (cái sẽ chậm hơn). Thị trường quốc tế đặc biệt nhận được nhiều lợi ích từ caching CDN (xem thêm CDN là gì).
Mặc dù có bẫy nhất định. eBay có một số yếu tố cá nhân hóa trong gợi ý bật lên (pop-up), cái không thể được cache hiệu quả. May mắn, nó không phải là vấn đề trong ứng dụng gốc, vì giao diện người dùng để cá nhân hóa và các gợi ý đề xuất có thể được tách ra. Trong thế giới web, ở thị trường quốc tế, độ trễ là một vấn đề quan trọng hơn so với lợi ích nhỏ của cá nhân hóa. Với cách làm đó, eBay giờ tự động gợi ý từ cache CDN toàn cầu cho ứng dụng gốc và thị trường không phải Hoa Kỳ cho eBay.com.
“Cắt” ở đây là giảm độ trễ mạng và thời gian xử lý máy chủ cho vấn đề tự động gợi ý (autosuggestions).
Thúc đẩy cache cho trang chủ của người dùng chưa được nhận diện (những ai chưa đăng nhập)
Với nền tảng web, nội dung trang chủ cho người dùng không được nhận diện là giống nhau cho khu vực cụ thể. Đây là những người dùng lần đầu tiên sử dụng eBay hoặc bắt đầu làm mới session, do đó không phải cá nhân hóa. Mặc dù trang chủ có các thay đổi thường xuyên nhưng vẫn có chỗ cho caching.
eBay quyết định cache nội dung cho người dùng không được nhận diện (HTML) trên mạng máy chủ biên (PoPs) trong một khoảng thời gian ngắn. Người dùng truy cập lần đầu tiên giờ có thể có được nội dung trang chủ từ máy chủ gần họ, thay vì từ trung tâm dữ liệu xa. eBay vẫn đang thử nghiệm điều này cho thị trường quốc tế, nơi mà nó sẽ có ảnh hưởng lợi ích lớn hơn.
“Cắt” ở đây một lần nữa là giảm độ trễ mạng (network latency) và thời gian xử lý máy chủ (server processing time) cho người dùng chưa được nhận diện.
Tối ưu hóa cho các nền tảng khác
Cải thiện phân tích cho ứng dụng gốc
Ứng dụng gốc (iOS và Android) giao tiếp với các dịch vụ backend-những cái 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 và render một số cái trên màn hình, eBay giới thiệu thuật toán phân tích cú pháp hiệu quả hơn tối ưu hóa cho nội dung cần hiển thị ngay lập tức.
Người dùng giờ đây có thể thấy nội dung hiển thị nhanh hơn. Thêm vào đó, với ứng dụng Android, eBay bắt đầu khởi tạo bộ điều khiển tìm kiếm sớm nhất có thể khi người dùng bắt đầu gõ vào ô tìm kiếm (iOS đã có sẵn tính năng tối ưu hóa này). Trước đó, điều này chỉ xảy ra khi người sử dụng nhấn vào nút tìm kiếm. Giờ đây người dùng có thể nhận được kết quả tìm kiếm nhanh hơn. “Cắt” ở đây có nghĩa là giảm thời gian mà thiết bị cần để hiển thị nội dung liên quan.
Cải thiện thời gian khởi động của ứng dụng gốc
Điều này được áp dụng cho vấn đề tối ưu hóa thời gian khởi động nguội cho ứng dụng gốc, cụ thể ở đây là Android. Khi ứng dụng (app) khởi động nguội, có rất nhiều khởi tạo xảy ra cả ở cấp độ OS (hệ điều hành) và cấp độ ứng dụng (application level). Giảm thời gian khởi tạo ở cấp độ ứng dụng giúp người dùng thấy màn hình chính (home screen) nhanh hơn. eBay đã thực hiện một số thử nghiệm và nhận thấy rằng không phải tất cả các khởi tạo ban đầu đều cần để hiển thị nội dung và một số có thể được trì hoãn.
Điều quan trọng hơn, eBay quan sát thấy có các mã phân tích của bên thứ ba chặn hiển thị làm trì hoãn việc render trên màn hình. Loại bỏ các lời gọi chặn này và làm nó tải không hơn nữa giúp cải thiện thời gian khởi động nguội. “Cắt” ở đây có nghĩa là giảm bớt thời gian khởi động không cần thiết cho ứng dụng gốc.
Kết luận
Tất cả các điều chỉnh hiệu suất trên eBay đóng góp vào việc tạo ra sự thay đổi tích cực về tốc độ, và nó diễn ra không phải ngay lập tức mà trong một khoảng thời gian. Các bản phát hành được thực hiện trong suốt cả năm, với từng bản phát hành tiết kiệm vài chục mili giây, cuối cùng giúp eBay đạt đến điểm số như bây giờ:
Hiệu suất là một tính năng và là một lợi thế cạnh tranh. Tối ưu hóa trải nghiệm dẫn đến khả năng tương tác người dùng, chuyển đổi và ROI cao hơn. Trong trường hợp của eBay, các tối ưu hóa này thay đổi từ các nỗ lực đơn giản cho đến một số cái nâng cao.
(Dịch từ bài viết Shopping for speed on eBay.com, tác giả: Addy Osmani, website: web[.]dev)
