Cách Trendsol giảm INP, giúp tỷ lệ nhấp tăng 1%

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 được 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.

Mustafa Birinci

Gilberto Cocchi

Thierno Thiam

Hai thành phần quan trọng của bất kỳ trang web thương mại điện tử nào là Trang danh sách 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ừ trang thông tin sản phẩm, cho dù là thông qua chiến dịch tiếp thị qua email, mạng xã hội hay quảng cáo. Do đó, điều tối 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 cần thiết để mua hàng. Ư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. Ấn phẩm nghiên cứu chẳng hạn như Milligiây Make Mai đã cho biết tác động của hiệu suất web đến người tiêu dùng mức độ sẵn sàng chi tiền và tương tác với các thương hiệu trực tuyến.

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, thúc đẩy chúng tôi trở thành doanh nghiệp đầu tiên ở Thổ Nhĩ Kỳ với định giá 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 tại 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 mà vẫn duy trì được tính linh hoạt của nội dung và làm việc với phiên bản cũ hơn React, Hàn Quốc 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ả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 Tensorol trên PLP, giúp giảm 50% INP và tăng 1% trên kết quả tìm kiếm kết quả kinh doanh.

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. Một INP tốt cho biết 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 và vẽ lại trang, đây là thành phần quan trọng để mang đến trải nghiệm tốt cho người dùng.

Hành trình cải thiện INP (Lượt tương tác đến nội dung) trên PLP của Tenorol bắt đầu bằng một 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 di động, như được minh hoạ trong hình tiếp theo.

Để đảm bảo khả năng thích ứng tốt, chủ sở hữu trang web nên nhắm đến INP thấp hơn hoặc bằng 200 mili giây, tức là vào thời điểm đó, INP của Tenorol nằm ở "kém" dải ô.

Thật may, PSI cung cấp cả hai dữ liệu trường cho các trang có trong phần Người dùng Chrome Báo cáo trải nghiệm (CrUX) và dữ liệu chẩn đoán chi tiết trong phòng thí nghiệm. Xem xét phòng thí nghiệm dữ liệu, kết quả kiểm tra thời gian thực thi JavaScript của Lighthouse cho thấy rằng Tập lệnh search-result-v2 đã chiếm luồng chính nhiều hơn so với các tập lệnh khác tập lệnh 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 Chrome Công cụ cho nhà phát triển để khắc phục sự cố về trải nghiệm PLP và xác định nguồn gốc của vấn đề. Mô phỏng hiệu suất trên thiết bị di động với chế độ làm chậm CPU gấp 4 lần trong Công cụ cho nhà phát triển của Chrome đã tiết lộ một tác vụ dài 700-900 mili giây trên luồng chính. Nếu số điện thoại chính bị chiếm dụng bởi các tác vụ khác trong hơn 50 mili giây thì nó có thể không thể phản hồi thông tin đầu vào của người dùng kịp thời, dẫn đến trải nghiệm người dùng.

Tác vụ mất nhiều thời gian nhất do lệnh gọi lại Intersection Observer API gây ra trên tập lệnh kết quả tìm kiếm bên trong thành phần React. Đến đây, chúng tôi bắt đầu xem xét chia nhỏ tác vụ mất nhiều thời gian đó thành các phần nhỏ để cung cấp cho trình duyệt cơ hội phản hồi những công việc có mức độ ưu tiên cao hơn, bao gồm cả tương tác của người dùng.

Hoá ra là việc sử dụng thao tác setState để kích hoạt React việc kết xuất lại bên trong lệnh gọi lại Intersection Observer sẽ tốn chi phí cao, Đây có thể là vấn đề đối với các thiết bị cấp thấp vì chiếm luồng chính trong quá dài.

Một phương pháp mà các nhà phát triển đã sử dụng để chia nhỏ công việc thành các nhiệm vụ nhỏ hơn liên quan đến setTimeout. Chúng tôi đã sử dụng kỹ thuật này để 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 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 đã dẫn đến chúng tôi tham gia bản dùng thử theo nguyên gốc scheduler.yield nhằm nỗ lực đảm bảo tiếp tục thực thi tập lệnh sau khi chuyển sang 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ông việc có mức độ ưu tiên cao hơn—chẳng hạn như các 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.

Lưu ý rằng Tensorol sử dụng khung PuzzleJs để triển khai giao diện người dùng vi mô bằng React v16.9.0. Với React 18, hiệu suất tương tự có thể đạt được đã đạt được, nhưng vì một số lý do, Duetol không thể nâng cấp tại thời điểm này bất cứ lúc nào.

Kết quả kinh doanh

Để đo lường tác động của việc cải thiện INP được 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 trong một sự cải thiện đáng kể, bao gồm giảm 50% INP cũng như giảm 1% là mức tăng 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 bên dưới, bạn có thể thấy INP được cải thiện như thế nào trên PLP theo thời gian:

Kết luận

Tối ưu hoá INP là một quá trình phức tạp và lặp đi lặp lại, nhưng có thể thực hiện dễ dàng hơn bằng quy trình làm việc 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 bạn có đang thu thập dữ liệu trường của riêng mình hay không. Nếu bạn PSI và Lighthouse là một điểm khởi đầu tốt. Khi bạn đã 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 cố tái tạo vấn đề.

Đôi khi chuyển đến luồng chính để cung cấp thêm cho trình duyệt cơ hội để thực hiện các công việc khẩn cấp sẽ làm cho 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 sẽ có trải nghiệm người dùng tốt hơn. API lập lịch mới hơn như scheduler.yield(), giúp công việc này trở nên dễ dàng hơn.

Xin đặc biệt cảm ơn Jeremy Wagner, Barry Poleard và Houssein Djirdeh của kênh Google và Nhóm kỹ thuật của Tenorol vì những đóng góp của họ trong công trình này.