Nghiên cứu điển hình này mô tả quy trình từng bước để gỡ lỗi và cải thiện INP trong React mà Trendyol sử dụng bằng cách tận dụng các công cụ của Google như PageSpeed Insights (PSI), Công cụ của Chrome cho nhà phát triển và scheduler.yield API.
Bất kỳ trang web thương mại điện tử nào cũng có hai thành phần quan trọng là Trang thông tin sản phẩm (PLP) và Trang chi tiết sản phẩm (PDP). Lưu lượng truy cập thương mại điện tử thường đến từ các trang danh sách sản phẩm, cho dù thông qua chiến dịch email, mạng xã hội hoặc quảng cáo. Do đó, điều quan trọng là phải đảm bảo trải nghiệm PLP được thiết kế cẩn thận để giảm thời gian mua hàng. Để đạt được thành công, bạn cần ưu tiên chất lượng trải nghiệm người dùng. Các nghiên cứu xuất bản chẳng hạn như Milliseconds Make vài đã cho thấy tác động đáng kể của hiệu suất web đối với mức độ sẵn sàng chi tiền của người tiêu dùng và tương tác với các thương hiệu trên mạng.
Trendyol là một nền tảng thương mại điện tử với khoảng 30 triệu khách hàng và 240.000 người bán, giúp chúng tôi trở thành doanh nghiệp đầu tiên ở Thổ Nhĩ Kỳ có giá trị hơn 10 tỷ USD và là một trong những nền tảng thương mại điện tử hàng đầu thế giới.
Để đạt được mục tiêu cung cấp trải nghiệm người dùng tốt nhất có thể trên quy mô lớn trong khi vẫn duy trì tính linh hoạt của nội dung và hoạt động với phiên bản cũ của React, Trendsol tập trung vào Lượt tương tác với Nội dung hiển thị tiếp theo (INP) làm chỉ số chính cần cải thiện. Nghiên cứu điển hình này mô tả hành trình cải thiện INP của Trendsol trên PLP, giúp giảm 50% INP và tăng 1% chỉ số kinh doanh kết quả tìm kiếm.
Quy trình điều tra INP của Trendsol
INP đo lường khả năng phản hồi của trang web đối với hoạt động đầu vào của người dùng. INP tốt biểu thị rằng trình duyệt có thể phản hồi nhanh chóng và đáng tin cậy tất cả hoạt động đầu vào của người dùng cũng như vẽ lại trang. Đây là thành phần quan trọng để mang lại trải nghiệm tốt cho người dùng.
Hành trình cải thiện INP của Trendsol trên PLP bắt đầu bằng việc phân tích kỹ lưỡng về trải nghiệm người dùng trước khi thực hiện bất kỳ cải tiến nào. Dựa trên báo cáo PSI, trải nghiệm người dùng thực tế của PLP có INP là 963 mili giây trên thiết bị di động, như minh hoạ trong hình tiếp theo.
Để đảm bảo khả năng phản hồi tốt, chủ sở hữu trang web nên nhắm đến INP thấp hơn hoặc ở mức 200 mili giây. Điều đó có nghĩa là tại thời điểm đó, INP của Trendsol nằm trong phạm vi "kém".
Thật may là PSI cung cấp cả dữ liệu thực địa cho các trang có trong Báo cáo trải nghiệm người dùng trên Chrome (CrUX) và dữ liệu chẩn đoán chi tiết của phòng thí nghiệm. Xem xét dữ liệu phòng thí nghiệm, kiểm tra thời gian thực thi JavaScript của Lighthouse cho thấy tập lệnh search-result-v2 chiếm chuỗi chính trong nhiều thời gian hơn so với các tập lệnh khác trên trang.
Để xác định điểm tắc nghẽn trong thực tế, chúng tôi đã sử dụng bảng hiệu suất trong Công cụ phát triển Chrome của Chrome để khắc phục sự cố trải nghiệm PLP và xác định nguồn gốc của vấn đề. Việc mô phỏng hiệu suất của thiết bị di động bị giảm tốc độ CPU gấp 4 lần trong Công cụ của Chrome cho nhà phát triển đã cho thấy tác vụ dài 700-900 mili giây trên luồng chính. Nếu luồng chính dành cho các tác vụ khác trong thời gian dài hơn 50 mili giây, thì luồng chính có thể không phản hồi kịp thời hoạt động đầu vào của người dùng, dẫn đến trải nghiệm người dùng kém.
Nhiệm vụ lâu nhất là do lệnh gọi lại Intersection Observer API trên tập lệnh kết quả tìm kiếm bên trong thành phần React. Tại thời điểm này, chúng tôi bắt đầu xem xét chia tác vụ dài đó thành các phần nhỏ để mang lại cho trình duyệt nhiều cơ hội hơn nhằm phản hồi các công việc có mức độ ưu tiên cao hơn, bao gồm cả hoạt động tương tác của người dùng.
Hoá ra việc sử dụng thao tác setState kích hoạt quá trình kết xuất lại React bên trong lệnh gọi lại Intersection Observer có thể gây ra vấn đề cao. Vấn đề này có thể gây ra vấn đề đối với các thiết bị cấp thấp do chiếm dụng luồng chính quá lâu.
Một phương thức mà các nhà phát triển đã sử dụng để chia nhỏ các tác vụ thành các tác vụ nhỏ hơn có liên quan đến setTimeout. Chúng tôi đã sử dụng kỹ thuật này để trì hoãn việc thực thi lệnh gọi setState thành một tác vụ riêng. Mặc dù setTimeout cho phép trì hoãn việc thực thi JavaScript, nhưng không cung cấp khả năng kiểm soát mức độ ưu tiên nào. Điều này khiến chúng tôi tham gia bản dùng thử theo nguyên gốc scheduler.yield nhằm đảm bảo có thể tiếp tục thực thi tập lệnh sau khi chuyển đến luồng chính:
/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
if('scheduler' in window && 'yield' in scheduler) {
return await scheduler.yield();
}
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
entries.forEach(handleIntersection);
const maxNumberOfEntries = Math.max(...this.intersectingEntries);
if (Number.isFinite(maxNumberOfEntries)) {
await this.yieldToMain();
this.setState({ count: maxNumberOfEntries });
}
}, { threshold: 0.5 });
Việc thêm phương thức tạo ra này vào mã PLP đã giúp cải thiện INP, vì tác vụ chính dài được chia thành một loạt các nhiệm vụ nhỏ hơn, cho phép các công việc có mức độ ưu tiên cao hơn (chẳng hạn như hoạt động tương tác của người dùng và công việc kết xuất tiếp theo) diễn ra sớm hơn so với thường lệ.
Xin lưu ý rằng Trendsol sử dụng khung PuzzleJs để triển khai một kiến trúc giao diện người dùng vi mô bằng React v16.9.0. Với React 18, bạn cũng có thể đạt được hiệu suất tương tự, nhưng vì một số lý do, Trendsol hiện chưa thể nâng cấp.
Kết quả kinh doanh
Để đo lường tác động của việc cải thiện INP đã triển khai, chúng tôi đã chạy thử nghiệm A/B để xem các chỉ số kinh doanh bị ảnh hưởng như thế nào. Nhìn chung, những thay đổi của chúng tôi đối với PLP đã giúp cải thiện đáng kể, bao gồm việc giảm 50% INP cũng như tăng 1% tỷ lệ nhấp từ trang thông tin lên trang chi tiết sản phẩm cho mỗi phiên hoạt động của người dùng. Trong hình sau, bạn có thể thấy INP đã cải thiện như thế nào trên PP theo thời gian:
Kết luận
Tối ưu hoá INP là một quy trình phức tạp và lặp lại, nhưng có thể thực hiện dễ dàng hơn nếu bạn có một quy trình rõ ràng. Một phương pháp đơn giản để gỡ lỗi và cải thiện INP của trang web phụ thuộc vào việc liệu bạn có đang thu thập dữ liệu trường của riêng mình hay không. Nếu chưa dùng, PSI và Lighthouse là bạn có thể sử dụng để bắt đầu. Sau khi xác định được trang có vấn đề, bạn có thể sử dụng Công cụ cho nhà phát triển để tìm hiểu kỹ hơn nhằm tái hiện vấn đề.
Thỉnh thoảng, việc chuyển tới luồng chính để mang lại cho trình duyệt nhiều cơ hội thực hiện công việc khẩn cấp hơn sẽ giúp trang web của bạn phản hồi nhanh hơn, đảm bảo khách hàng của bạn có trải nghiệm người dùng tốt hơn. Các API lập lịch mới hơn như scheduler.yield() giúp tác vụ này dễ dàng hơn.
Xin đặc biệt cảm ơn những đóng góp của Jeremy Wagner, Barry Pollard và Houssein Djirdeh của Google và Nhóm kỹ thuật của Trendsol vì những đóng góp của họ cho công việc này.