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ư Thông tin chi tiết về PageSpeed (PSI), Công cụ dành cho nhà phát triển Chrome và API scheduler.yield.
Hai thành phần quan trọng của mọi trang web thương mại điện tử 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 thông tin sản phẩm, thông qua chiến dịch qua email, mạng xã hội hoặc quảng cáo. Do đó, bạn phải đảm bảo thiết kế trải nghiệm PLP một cách cẩn thận để giảm thời gian cần thiết khi mua hàng. Việc ưu tiên chất lượng trải nghiệm người dùng là yếu tố thiết yếu để đạt được thành công. Các ấn phẩm nghiên cứu như Milliseconds Make Millions (Mili giây tạo ra hàng triệu đô la) đã cho thấy tác động đáng kể của hiệu suất trang web đối với mức độ sẵn sàng chi tiêu và tương tác của người tiêu dùng 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ử có khoảng 30 triệu khách hàng và 240.000 người bán. Nền tảng này đã 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 trên 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, đồng thời duy trì tính linh hoạt của nội dung và làm việc với phiên bản React cũ, Trendyol đã tập trung vào Lượt tương tác đến nội dung hiển thị tiếp theo (INP) làm chỉ số chính để 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 trên PLP của Trendyol, nhờ đó 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 Hàn Quốc
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 cho biết trình duyệt có thể phản hồi nhanh chóng và đáng tin cậy đối với tất cả hoạt động đầu vào của người dùng và vẽ lại trang. Đây là một thành phần chính của trải nghiệm người dùng tốt.
Hành trình cải thiện INP trên PLP của Trendyol bắt đầu bằng việc phân tích kỹ lưỡng trải nghiệm người dùng trước khi thực hiện bất kỳ biện pháp cải thiện nào. Dựa trên báo cáo PSI, trải nghiệm thực tế của người dùng đối với PLP có INP là 963 mili giây trên thiết bị di động, như minh hoạ trong hình sau.
Để đảm bảo khả năng phản hồi tốt, chủ sở hữu trang web nên hướng đến INP dưới hoặc bằng 200 mili giây. Điều này có nghĩa là tại thời điểm đó, INP của Trendyol nằm trong phạm vi "kém".
May mắn thay, PSI cung cấp cả dữ liệu trường 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 trong phòng thí nghiệm. Khi xem xét dữ liệu trong phòng thí nghiệm, quy trình kiểm tra thời gian thực thi JavaScript của Lighthouse cho thấy tập lệnh search-result-v2 đang chiếm luồng chính lâu hơn so với các tập lệnh khác trên trang.
Để xác định các nút thắt cổ chai trong thực tế, chúng tôi đã sử dụng bảng điều khiển hiệu suất trong Chrome DevTools để khắc phục sự cố về trải nghiệm PLP và xác định nguồn gốc của sự cố. Việc mô phỏng hiệu suất trên thiết bị di động với tốc độ CPU chậm hơn 4 lần trong Công cụ dành cho nhà phát triển Chrome đã cho thấy một tác vụ dài 700-900 mili giây trên luồng chính. Nếu luồng chính bị chiếm dụng bởi các tác vụ khác trong hơn 50 mili giây, thì luồng đó 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.
Tác vụ dài 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 một thành phần React. Tại thời điểm này, chúng ta bắt đầu xem xét việc chia nhỏ tác vụ dài đó thành các phần nhỏ để cho phép trình duyệt có thêm cơ hội phản hồi công việc có mức độ ưu tiên cao hơn, bao gồm cả các hoạt động tương tác của người dùng.
Hóa ra việc sử dụng thao tác setState kích hoạt tính năng kết xuất lại React bên trong lệnh gọi lại Intersection Observer sẽ gây tốn kém, điều này có thể gây ra vấn đề cho 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 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 vào 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 nó không cung cấp bất kỳ quyền kiểm soát nào đối với mức độ ưu tiên. Điều này đã khiến chúng tôi tham gia thử nghiệm nguồn gốc scheduler.yield để đảm bảo việc tiếp tục thực thi tập lệnh sau khi nhường cho 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 nhường này vào mã PLP đã cải thiện INP, vì tác vụ dài chính đã được chia thành một loạt các tác vụ nhỏ hơn, cho phép công việc có mức độ ưu tiên cao hơn – chẳng hạn như 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 dự kiến.
Xin lưu ý rằng Trendyol sử dụng khung PuzzleJs để triển khai cấu trúc giao diện người dùng vi mô bằng React v16.9.0. Với React 18, bạn có thể đạt được hiệu suất tương tự, nhưng vì một số lý do, Tensorol không thể nâng cấp tại thời điểm này.
Kết quả kinh doanh
Để đo lường tác động của biện pháp 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 đã mang lại hiệu quả đá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 đến trang chi tiết sản phẩm trên mỗi phiên người dùng. Trong hình sau, bạn có thể thấy cách INP cải thiện trên PLP theo thời gian:
Kết luận
Việc tối ưu hoá INP là một quá trình phức tạp và lặp lại, nhưng bạn có thể dễ dàng thực hiện việc này hơn bằng một quy trình công việc rõ ràng. 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 bạn có đang thu thập dữ liệu trường của riêng mình hay không. Nếu không, PSI và Lighthouse là một điểm khởi đầu tốt. Sau khi xác định được các trang có vấn đề, bạn có thể sử dụng Công cụ dành cho nhà phát triển để tìm hiểu sâu hơn nhằm cố gắng tái hiện các vấn đề.
Việc thỉnh thoảng nhường cho luồng chính để cho trình duyệt có thêm cơ hội thực hiện công việc khẩn cấp sẽ giúp trang web của bạn phản hồi nhanh hơn, đảm bảo rằng 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 Jeremy Wagner, Barry Poleard và Houssein Djirdeh của Google cùng Nhóm kỹ thuật của Tenorol vì những đóng góp của họ cho công trình này.