Tối ưu hoá tính tương tác của trang chi tiết sản phẩm để giảm 90% FID tiềm năng tối đa trong Lighthouse và cải thiện 9% FID trong Báo cáo trải nghiệm người dùng trên Chrome.
Mercado Libre là hệ sinh thái thanh toán và thương mại điện tử lớn nhất tại Mỹ Latinh. Công ty này hiện có mặt tại 18 quốc gia và dẫn đầu thị trường ở Brazil, Mexico và Argentina (dựa trên số lượng khách truy cập riêng biệt và số lượt xem trang).
Hiệu suất web đã là trọng tâm của công ty trong một thời gian dài, nhưng gần đây họ đã thành lập một nhóm để theo dõi hiệu suất và áp dụng các biện pháp tối ưu hoá trên nhiều phần của trang web.
Bài viết này tóm tắt công việc của Guille Paz, Pablo Carminatti và Oleh Burkhay thuộc nhóm kiến trúc giao diện người dùng của Mercado Libre nhằm tối ưu hoá một trong các Chỉ số quan trọng chính của trang web: Thời gian phản hồi lần tương tác đầu tiên (FID) và proxy phòng thí nghiệm Tổng thời gian chặn (TBT).
90%
Mức giảm FID tiềm năng tối đa trong Lighthouse
9%
Có thêm nhiều người dùng nhận thấy FID là "Nhanh" trong CrUX
Tác vụ dài, Độ trễ đầu vào đầu tiên và Tổng thời gian chặn
Việc chạy mã JavaScript tốn kém có thể dẫn đến các tác vụ dài, là những tác vụ chạy hơn 50 mili giây trong luồng chính của trình duyệt.
FID (Độ trễ đầu vào đầu tiên) đo lường thời gian từ khi người dùng tương tác với trang lần đầu tiên (ví dụ: khi họ nhấp vào một đường liên kết) đến khi trình duyệt thực sự có thể bắt đầu xử lý trình xử lý sự kiện để phản hồi lượt tương tác đó. Một trang web thực thi mã JavaScript tốn kém có thể sẽ phải thực hiện một số thao tác dài, khiến FID bị ảnh hưởng tiêu cực.
Để cung cấp trải nghiệm tốt cho người dùng, các trang web nên cố gắng đạt được Độ trễ đầu vào đầu tiên dưới 100 mili giây:
Mặc dù trang web của Mercado Libre hoạt động hiệu quả ở hầu hết các phần, nhưng họ nhận thấy trong Báo cáo trải nghiệm người dùng trên Chrome rằng các trang chi tiết sản phẩm có FID kém. Dựa trên thông tin đó, họ quyết định tập trung nỗ lực vào việc cải thiện khả năng tương tác cho các trang sản phẩm trên trang web.
Các trang này cho phép người dùng thực hiện các hoạt động tương tác phức tạp, vì vậy, mục tiêu là tối ưu hoá tính tương tác mà không can thiệp vào chức năng có giá trị.
Đo lường tính tương tác của trang chi tiết sản phẩm
FID cần có người dùng thực và do đó không thể đo được trong phòng thí nghiệm. Tuy nhiên, chỉ số Tổng thời gian chặn (TBT) có thể đo lường được trong phòng thí nghiệm, tương quan với FID tại trường và cũng nắm bắt được các vấn đề ảnh hưởng đến khả năng tương tác.
Ví dụ: trong dấu vết sau đây, mặc dù tổng thời gian dành cho việc chạy tác vụ trên luồng chính là 560 mili giây, nhưng chỉ 345 mili giây trong thời gian đó được coi là tổng thời gian chặn (tổng thời gian của các phần của mỗi tác vụ vượt quá 50 mili giây):
Mercado Libre lấy TBT làm chỉ số proxy trong phòng thí nghiệm để đo lường và cải thiện tính tương tác của các trang chi tiết sản phẩm trong thực tế.
Dưới đây là phương pháp chung mà họ đã áp dụng:
- Sử dụng WebPageTest để xác định chính xác những tập lệnh nào đang khiến luồng chính bận trên thiết bị thực.
- Sử dụng Lighthouse để xác định tác động của những thay đổi về Độ trễ đầu vào đầu tiên tối đa (FID tiềm năng tối đa).
Sử dụng WebPageTest để trực quan hoá các tác vụ dài
WebPageTest (WPT) là một công cụ hiệu suất web cho phép bạn chạy kiểm thử trên các thiết bị thực ở các vị trí khác nhau trên khắp thế giới.
Mercado Libre đã sử dụng WPT để tái tạo trải nghiệm của người dùng bằng cách chọn loại thiết bị và vị trí tương tự như người dùng thực. Cụ thể, họ đã chọn thiết bị Moto 4G và Dulles, Virginia vì muốn ước tính trải nghiệm của người dùng Mercado Libre ở Mexico. Bằng cách quan sát khung hiển thị luồng chính của WPT, Mercado Libre nhận thấy rằng có một số tác vụ dài liên tiếp chặn luồng chính trong 2 giây:
Khi phân tích thác nước tương ứng, họ nhận thấy rằng một phần đáng kể trong hai giây đó đến từ mô-đun phân tích. Kích thước gói chính của ứng dụng lớn (950KB) và mất nhiều thời gian để phân tích cú pháp, biên dịch và thực thi.
Dùng Lighthouse để xác định FID tiềm năng tối đa
Lighthouse không cho phép bạn chọn giữa các thiết bị và vị trí khác nhau, nhưng là một công cụ rất hữu ích trong việc chẩn đoán các trang web và nhận các đề xuất về hiệu suất.
Khi chạy Lighthouse trên trang chi tiết sản phẩm, Mercado Libre nhận thấy rằng FID tiềm năng tối đa là chỉ số duy nhất được đánh dấu bằng màu đỏ, với giá trị là 1710 mili giây.
Dựa trên điều này, Mercado Libre đặt ra mục tiêu cải thiện điểm FID tối đa tiềm năng trong một công cụ phòng thí nghiệm như Lighthouse và WebPageTest, với giả định rằng những cải tiến này sẽ ảnh hưởng đến người dùng thực và do đó, sẽ hiển thị trong các công cụ theo dõi người dùng thực như Báo cáo trải nghiệm người dùng Chrome.
Tối ưu hoá các tác vụ dài
Lặp lại đầu tiên
Dựa trên dấu vết luồng chính, Mercado Libre đặt mục tiêu tối ưu hoá 2 mô-đun đang chạy mã tốn kém.
Họ đã bắt đầu tối ưu hoá hiệu suất của mô-đun theo dõi nội bộ. Mô-đun này chứa một tác vụ tiêu tốn nhiều CPU nên không quan trọng để mô-đun hoạt động nên có thể được tháo một cách an toàn. Kết quả là lượng JavaScript trên toàn trang web giảm 2%.
Sau đó, họ bắt đầu tìm cách cải thiện kích thước gói chung:
Mercado Libre đã sử dụng webpack-bundle-embedr để phát hiện cơ hội tối ưu hoá:
- Ban đầu, họ yêu cầu mô-đun Lodash đầy đủ. Tính năng này được thay thế bằng yêu cầu cho mỗi phương thức để chỉ tải một tập hợp con của Lodash thay vì toàn bộ thư viện và được sử dụng kết hợp với lodash-webpack-plugin để thu gọn Lodash hơn nữa.
Họ cũng áp dụng các tính năng tối ưu hoá sau đây của Babel:
- Sử dụng @babel/plugin-transform-runtime để sử dụng lại các trình trợ giúp của Bumblebee xuyên suốt mã và giảm đáng kể kích thước gói.
- Sử dụng babel-plugin-search-and-replace để thay thế mã thông báo tại thời điểm xây dựng nhằm xoá tệp cấu hình lớn bên trong gói chính.
- Thêm babel-plugin-transform-react-remove-prop-types để tiết kiệm thêm một số byte bằng cách xoá các kiểu prop.
Nhờ những hoạt động tối ưu hoá này, kích thước gói đã giảm khoảng 16%.
Đo lường tác động
Những thay đổi này đã làm giảm các nhiệm vụ dài liên tiếp của Mercado Libre từ 2 giây xuống còn 1 giây:
Lighthouse đã cho thấy giảm 57% thời gian phản hồi lần tương tác đầu tiên tối đa:
Lặp lại thứ hai
Đội ngũ đã tiếp tục đào sâu vào các nhiệm vụ dài để tìm ra những điểm cải tiến tiếp theo.
Dựa trên thông tin đó, họ quyết định triển khai những thay đổi sau:
- Tiếp tục giảm kích thước gói chính để tối ưu hoá thời gian biên dịch và phân tích cú pháp (ví dụ: bằng cách xoá các phần phụ thuộc trùng lặp trong nhiều mô-đun).
- Áp dụng tính năng phân tách mã ở cấp thành phần để chia JavaScript thành các phần nhỏ hơn và cho phép tải các thành phần khác nhau thông minh hơn.
- Hoãn hydrat hoá thành phần để có thể sử dụng luồng chính một cách thông minh hơn. Kỹ thuật này thường được gọi là hydrat hoá một phần.
Đo lường tác động
Dấu vết WebPageTest kết quả cho thấy các phần thực thi JS nhỏ hơn:
Và thời gian FID tiềm năng tối đa của chúng trong Lighthouse đã giảm thêm 60%:
Trực quan hoá tiến trình cho người dùng thực
Mặc dù các công cụ thử nghiệm trong phòng thí nghiệm như WebPageTest và Lighthouse là tuyệt vời để lặp lại các giải pháp trong quá trình phát triển, nhưng mục tiêu thực sự là cải thiện trải nghiệm cho người dùng thực.
Báo cáo trải nghiệm người dùng trên Chrome cung cấp các chỉ số về trải nghiệm người dùng về cách người dùng Chrome thực tế trải nghiệm các trang đích phổ biến trên web. Bạn có thể lấy dữ liệu của báo cáo bằng cách chạy các truy vấn trong BigQuery, PageSpeedInsights hoặc CrUX API.
Trang tổng quan CrUX là một cách dễ dàng để trực quan hoá tiến trình của các chỉ số chính:
Các bước tiếp theo
Hiệu suất web không bao giờ là một nhiệm vụ cuối cùng và Mercado Libre hiểu giá trị mà các tính năng tối ưu hoá này mang lại cho người dùng. Tuy tiếp tục áp dụng một số phương pháp tối ưu hoá trên toàn bộ trang web, bao gồm cả tính năng tìm nạp trước trong trang thông tin sản phẩm, tính năng tối ưu hoá hình ảnh, v.v., họ vẫn tiếp tục bổ sung các điểm cải tiến cho trang danh sách sản phẩm để giảm Tổng thời gian chặn (TBT) và theo FID proxy, thậm chí còn hiệu quả hơn nữa. Những hoạt động tối ưu hoá này bao gồm:
- Lặp lại giải pháp phân tách mã.
- Cải thiện khả năng thực thi tập lệnh của bên thứ ba.
- Tiếp tục cải tiến tính năng gói thành phần ở cấp trình gói (webpack).
Mercado Libre có góc nhìn toàn diện về hiệu suất. Vì vậy, trong khi tiếp tục tối ưu hoá khả năng tương tác trên trang web, Mercado Libre cũng đã bắt đầu đánh giá cơ hội cải thiện hai Chỉ số quan trọng chính của trang web hiện tại: LCP (Thời gian hiển thị nội dung lớn nhất) và CLS (Điểm số tổng hợp về mức thay đổi bố cục).