Cách redBus cải thiện khả năng tương tác với thời gian hiển thị tiếp theo (INP) của trang web và tăng doanh số thêm 7%

Các hoạt động tối ưu hoá INP đã giúp redBus tăng doanh số bán hàng thêm khoảng 7%

Amit Kumar

Saurabh Rajpal

Web và các chức năng của web đang phát triển với tốc độ nhanh chóng. Giờ đây, bạn có thể tạo trải nghiệm phong phú và đầy đủ tính năng trên web, có thể đạt được nhiều chức năng mà ứng dụng gốc có thể làm được.

JavaScript là yếu tố chính thúc đẩy khả năng tương tác trên web, nhưng nếu không được sử dụng cẩn thận, các hoạt động tương tác có thể bị chậm chạp và khiến người dùng cho rằng trang web của bạn không phản hồi hoặc bị hỏng hoàn toàn. Rất may, chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP) được tạo ra để giải quyết vấn đề cụ thể này về trải nghiệm người dùng.

INP đo lường tất cả lượt tương tác được thực hiện với một trang trong vòng đời của trang đó và báo cáo một giá trị duy nhất thể hiện tốc độ phản hồi của trang web đối với hoạt động đầu vào của người dùng. Nói một cách đơn giản, nếu INP của một trang ở mức hoặc dưới ngưỡng tốt, thì tất cả các lượt tương tác được thực hiện trên trang đó đều có thể được coi là nhanh và đáng tin cậy.

redBus, một trang web đặt vé và đặt chỗ xe buýt ở Ấn Độ, đã nỗ lực cải thiện đáng kể INP của trang web, ngay cả trong thời gian chỉ số này vẫn được coi là một chỉ số thử nghiệm. Nhờ những nỗ lực của mình, họ đã tăng doanh số thêm 7%, một lần nữa minh hoạ mối quan hệ giữa hiệu suất trang web và tình trạng kinh doanh. Sau đây là những việc redBus đã làm để cải thiện INP của trang web.

Mục tiêu hàng đầu

Khi bắt đầu tối ưu hoá INP của trang web, redBus đặt ra 3 mục tiêu:

1. Mang đến trải nghiệm người dùng tốt hơn bằng cách tập trung vào độ trễ tương tác bất kể tốc độ mạng và chức năng của thiết bị.
2. Tối ưu hoá trang web của họ để đảm bảo các lượt tương tác diễn ra nhanh nhất có thể.
3. Đảm bảo rằng các phản hồi từ API của họ càng nhẹ càng tốt để đảm bảo chuyển dữ liệu nhanh đến phần giao diện người dùng.

Hành trình

redBus phân loại độ trễ tương tác theo hai cách:

1. Độ trễ tương tác do chặn JavaScript trên ứng dụng. Khi các lượt tương tác sử dụng quá nhiều JavaScript chặn luồng chính, quá trình kết xuất sẽ bị trì hoãn và điều này ảnh hưởng đến INP của trang.
2. Độ trễ mạng do các lệnh gọi API gây ra. Mặc dù hoạt động mạng không phải là điều mà INP đo lường, nhưng một lượt tương tác dựa vào lệnh gọi đến một API từ xa có thể bị chậm trên các mạng chậm hơn hoặc nếu các yêu cầu dẫn đến phản hồi lớn.

Ban đầu, redBus khá tự tin rằng INP cho trang web của họ sẽ tốt, nhưng dữ liệu Theo dõi người dùng thực (RUM) cho chỉ số này ở phân vị thứ 95 lại cho thấy điều khác.

Cách redBus đo lường INP

redBus đã dựa vào thư viện JavaScript web-vitals do Google xây dựng để theo dõi không chỉ INP mà còn tất cả các chỉ số quan trọng về trải nghiệm người dùng cho tất cả các trang trên trang web của họ. Ngoài thư viện JavaScript web-vitals, redBus còn sử dụng ELK để phân tích dữ liệu INP được thu thập trên giao diện người dùng.

Tuy nhiên, cách bạn theo dõi INP của trang web trong trường có thể khác với cách redBus giải quyết vấn đề này. Bạn nên đọc bài viết về cách tìm các lượt tương tác chậm trong thực tế để tìm hiểu cách tốt nhất để theo dõi INP cho trang web của bạn, sau đó cách tái tạo các lượt tương tác đó trong phòng thí nghiệm trước khi bắt đầu tối ưu hoá lượt tương tác.

Sau khi triển khai hệ thống theo dõi INP, redBus có thể phân tích dữ liệu để hiểu rõ hơn về những điểm có độ tương tác chậm.

Trường hợp sử dụng

Khi tìm kiếm giá vé trên trang web redBus, người dùng có thể thay đổi ngày trên trang tìm kiếm để lọc giá vé đã chọn cho điểm đến mong muốn. Lượt tương tác để thay đổi ngày trên trang này diễn ra chậm và là nguyên nhân khiến INP kém.

Ngoài ra, khi người dùng cuộn qua các mức giá, các mức giá bổ sung sẽ được tải lười từ API. Mặc dù thao tác cuộn không được tính vào cách đo lường INP, nhưng trình nghe sự kiện scroll tự lên lịch cho nhiều công việc phải chạy trên luồng chính. Công việc này đang gây ra tranh chấp trên luồng chính, làm tăng độ trễ tương tác, dẫn đến INP kém trên trang tìm kiếm.

Cách redBus tối ưu hoá INP cho trang tìm kiếm

Để cải thiện INP của trang tìm kiếm, redBus đã thực hiện một số biện pháp tối ưu hoá:

• Trình xử lý sự kiện scroll đã được debounce để giảm số lần lệnh gọi lại sự kiện sẽ kích hoạt trong một khoảng thời gian nhất định. Bằng cách giảm tần suất chạy lệnh gọi lại sự kiện scroll, luồng chính có thể phản hồi nhanh hơn các lượt tương tác của người dùng trên trang tìm kiếm.
• Công việc kết xuất kết quả được ưu tiên bằng cách sử dụng lệnh gọi lại requestAnimationFrame. requestAnimationFrame cho trình duyệt biết rằng công việc trong lệnh gọi lại phải được thực hiện trước khung hình tiếp theo.

Ngoài ra, chúng tôi cũng đã tối ưu hoá thêm các tính năng sau cho trang kết quả tìm kiếm:

• Các lô kết quả mới được tìm nạp trên thẻ thứ hai từ cuối cùng trên trang kết quả tìm kiếm để cải thiện trải nghiệm người dùng và hiệu suất hình ảnh bằng cách kích hoạt tính năng tải lười sớm hơn.
• Số lượng kết quả được tìm nạp trên mỗi lệnh gọi mạng trong quá trình tải lười ít hơn. Bằng cách giảm số lượt tìm nạp từ 30 xuống 10 kết quả, chúng tôi nhận thấy phạm vi INP giảm từ 870 đến 900 xuống còn 350 đến 370.

Mặc dù những thay đổi này đã cải thiện đáng kể INP của trang tìm kiếm, nhưng vẫn còn vấn đề là sự kiện change trên các trường nhập của trang tìm kiếm sẽ gọi một hàm giảm tốn kém để cập nhật giao diện người dùng. Điều này dẫn đến việc kết xuất lại giao diện người dùng không cần thiết, ảnh hưởng đến INP của trang.

Để tối ưu hoá hoạt động tương tác này, redBus đã quản lý trạng thái của các thành phần đầu vào cục bộ và chỉ đồng bộ hoá trạng thái đó với kho Redux khi sự kiện blur của đầu vào được kích hoạt. Thay đổi này đã giảm số lần kết xuất lại và loại bỏ việc kết xuất lại giao diện người dùng không mong muốn bằng cách gọi phương thức giảm ít thường xuyên hơn.

Với thay đổi này, INP của trang đã cải thiện 72%, mang lại trải nghiệm nhanh và mượt mà hơn cho người dùng, nhờ đó họ có nhiều khả năng tương tác hơn.

Tác động đối với công việc kinh doanh

Mối quan hệ giữa tình trạng hoạt động của doanh nghiệp và hiệu suất của trang là điều đã được công nhận. Mặc dù INP là một chỉ số tương đối mới so với các chỉ số quan trọng chính khác của trang web, nhưng redBus đã quan sát thấy kết quả kinh doanh tốt hơn bằng cách tập trung cải thiện chỉ số hiệu suất quan trọng này tập trung vào người dùng. Kết quả là tổng doanh số bán hàng tăng 7%.

Tóm lại, INP đã giúp mô tả các vấn đề về hiệu suất trong thời gian chạy trên trang web redBus. Khi biết rằng cần cải thiện, redBus đã có thể quan sát vấn đề, tái hiện vấn đề và sử dụng thông tin quan trọng đó để tối ưu hoá nhằm mang lại lợi ích cho redBus và hoạt động kinh doanh của công ty.