Tối ưu hoá khả năng tương tác của các 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 thương mại điện tử và thanh toán lớn nhất ở Mỹ Latinh. Ứng dụng này hiện có mặt ở 18 quốc gia và là ứng dụng dẫn đầu thị trường ở Brazil, Mexico và Argentina (dựa trên số 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 để giám sát 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 cấu trúc giao diện người dùng của Mercado Libre để tối ưu hoá một trong các chỉ số quan trọng về trang web: Độ trễ đầu vào đầu tiên (FID) và proxy trong phòng thí nghiệm của chỉ số này, Thời gian chặn tổng thể (TBT).
90%
Giảm FID tối đa có thể có trong Lighthouse
9%
Nhiều người dùng hơn 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 trong hơn 50 mili giây trong luồng chính của trình duyệt.
FID (Thời gian phản hồi lần tương tác đầu tiên) đo lường thời gian từ khi người dùng tương tác lần đầu với một trang (ví dụ: khi họ nhấp vào một đường liên kết) đến thời điểm 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 tương tác đó. Một trang web thực thi mã JavaScript tốn kém có thể sẽ có một số tác vụ dài, điều này sẽ ảnh hưởng tiêu cực đến FID.
Để mang lại trải nghiệm tốt cho người dùng, các trang web nên cố gắng giảm Thời gian trễ đầu vào đầu tiên xuống dưới 100
mili giây:
Mặc dù trang web của Mercado Libre hoạt động hiệu quả trong 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 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 thao tác tương tác phức tạp, vì vậy, mục tiêu là tối ưu hoá khả năng tương tác mà không ảnh hưởng đến chức năng có giá trị.
Đo lường khả năng tương tác của trang chi tiết sản phẩm
FID yêu cầu người dùng thực tế nên không thể đo lường 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, có mối tương quan tốt với FID trong thực tế và cũng ghi nhận các vấn đề ảnh hưởng đến tính tương tác.
Ví dụ: trong dấu vết sau, mặc dù tổng thời gian dành cho việc chạy các tác vụ trên luồng chính là 560 mili giây, nhưng chỉ 345 mili giây trong số đó được coi là tổng thời gian chặn (tổng thời gian 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ế.
Sau đây là phương pháp chung mà họ đã áp dụng:
- Sử dụng WebPageTest để xác định chính xác tập lệnh nào đang làm cho luồng chính bị bận trên một thiết bị thực.
- Sử dụng Lighthouse để xác định tác động của các thay đổi đối với Thời gian phản hồi lần tương tác đầu tiên tối đa có thể (FID tối đa có thể).
Sử dụng WebPageTest để trực quan hoá các tác vụ dài
WebPageTest (WPT) là một công cụ đo lường hiệu suất web, cho phép bạn chạy kiểm thử trên các thiết bị thực ở nhiều vị trí trên 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 chừng trải nghiệm của người dùng Mercado Libre ở Mexico. Bằng cách quan sát chế độ xem luồng chính của WPT, Mercado Libre nhận thấy có một số tác vụ dài liên tiếp chặn luồng chính trong 2 giây:
Sau 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 (950 KB) và mất nhiều thời gian để phân tích cú pháp, biên dịch và thực thi.
Sử dụng Lighthouse để xác định FID tối đa có thể có
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 đây là một công cụ rất hữu ích để chẩn đoán trang web và nhận các đề xuất về hiệu suất.
Khi chạy Lighthouse trên các 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 mục tiêu cải thiện điểm FID tối đa tiềm năng trong một công cụ thử nghiệm như Lighthouse và WebPageTest, giả định rằng những điểm cải thiện này sẽ ảnh hưởng đến người dùng thực tế và do đó, sẽ xuất hiện trong các công cụ giám sát người dùng thực tế như Báo cáo trải nghiệm người dùng trên Chrome.
Tối ưu hoá các tác vụ dài
Lần 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á hai 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ụ nặng về CPU không quan trọng đối với hoạt động của mô-đun, do đó có thể được xoá một cách an toàn. Nhờ đó, JavaScript trên toàn bộ trang web giảm 2%.
Sau đó, họ bắt đầu cải thiện kích thước gói chung:
Mercado Libre đã sử dụng webpack-bundle-analyzer để phát hiện các cơ hội tối ưu hoá:
- Ban đầu, các hàm này yêu cầu mô-đun Lodash đầy đủ. Phương thức này đã được thay thế bằng yêu cầu theo 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, đồng thời được sử dụng kết hợp với lodash-webpack-plugin để rút gọn Lodash hơn nữa.
Họ cũng áp dụng các tính năng tối ưu hoá Babel sau:
- Sử dụng @babel/plugin-transform-runtime để sử dụng lại các trình trợ giúp của Babel trong toàn bộ mã và giảm đáng kể kích thước của gói.
- Sử dụng babel-plugin-search-and-replace để thay thế mã thông báo tại thời điểm tạo bản dựng, nhằm xoá một 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 loại thuộc tính.
Nhờ những điểm tối ưu hoá này mà kích thước gói đã giảm khoảng 16%.
Đo lường tác động
Những thay đổi này đã giảm thời gian thực hiện các tác 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 mức giảm 57% về Thời gian phản hồi lần tương tác đầu tiên tối đa có thể:
Lặp lại lần thứ hai
Nhóm tiếp tục tìm hiểu các tác 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 trên 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 một cách thông minh hơn.
- Tạm hoãn quá trình cấp nước cho thành phần để cho phép 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à tái tạo một phần.
Đo lường tác động
Dấu vết WebPageTest thu được cho thấy các phần thực thi JS nhỏ hơn nữa:
Ngoài ra, thời gian FID tối đa có thể có trong Lighthouse cũng 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ụ kiểm thử trong phòng thí nghiệm như WebPageTest và Lighthouse rất phù hợp để 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 của Chrome cung cấp các chỉ số về trải nghiệm thực tế của người dùng Chrome trên những trang web phổ biến. Bạn có thể lấy dữ liệu từ báo cáo bằng cách chạy truy vấn trong BigQuery, PageSpeedInsights hoặc API CrUX.
Trang tổng quan CrUX là một cách dễ dàng để hình dung 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ụ hoàn tất và Mercado Libre hiểu được giá trị mà các hoạt động tối ưu hoá này mang lại cho người dùng. Trong khi tiếp tục áp dụng một số biện pháp tối ưu hoá trên trang web, bao gồm cả tính năng prefetching trong trang thông tin sản phẩm, tối ưu hoá hình ảnh và các biện pháp khác, họ vẫn tiếp tục cải thiện trang thông tin sản phẩm để giảm Tổng thời gian chặn (TBT) và FID proxy. 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 việc thực thi tập lệnh của bên thứ ba.
- Tiếp tục cải thiện tính năng gói tài sản ở cấp trình đóng gói (webpack).
Mercado Libre có một cái 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, họ cũng đã bắt đầu đánh giá các cơ hội cải thiện hơn nữa đối với 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 (Mức thay đổi bố cục tích luỹ).