Tương tác với thời gian hiển thị tiếp theo (INP)

Dữ liệu về mức sử dụng Chrome cho thấy 90% thời gian người dùng dành cho một trang là sau khi trang đó tải. Do đó, bạn cần đo lường kỹ lưỡng khả năng phản hồi trong suốt vòng đời của trang. Đây là tiêu chí đánh giá của chỉ số INP.

Khả năng phản hồi tốt có nghĩa là trang phản hồi nhanh với các tương tác. Khi một trang phản hồi một lượt tương tác, trình duyệt sẽ hiển thị phản hồi bằng hình ảnh trong khung tiếp theo mà trình duyệt vẽ. Chẳng hạn, phản hồi bằng hình ảnh cho bạn biết liệu mặt hàng bạn thêm vào giỏ hàng trực tuyến có đang thực sự được thêm hay không, liệu trình đơn điều hướng trên thiết bị di động đã mở hay chưa, nội dung của biểu mẫu đăng nhập có đang được máy chủ xác thực, v.v hay không.

Một số tương tác sẽ mất nhiều thời gian hơn một cách tự nhiên so với các tương tác khác, nhưng đối với các tương tác đặc biệt phức tạp, điều quan trọng là phải trình bày nhanh một số phản hồi bằng hình ảnh ban đầu để cho người dùng biết rằng có điều gì đó đang xảy ra. Khung tiếp theo mà trình duyệt sẽ hiển thị là cơ hội sớm nhất để thực hiện việc này.

Do đó, ý định của INP không phải là đo lường tất cả hiệu ứng cuối cùng của một lượt tương tác (chẳng hạn như tìm nạp mạng và cập nhật giao diện người dùng từ các thao tác không đồng bộ khác), mà là thời gian mà lượt vẽ tiếp theo bị chặn. Khi trì hoãn phản hồi hình ảnh, người dùng có thể có ấn tượng rằng trang không phản hồi đủ nhanh. INP được phát triển để giúp nhà phát triển đo lường phần trải nghiệm người dùng này.

Trong video sau, ví dụ ở bên phải đưa ra phản hồi bằng hình ảnh tức thì rằng một chiếc đàn phong cầm đang mở ra. Ví dụ ở bên trái minh hoạ khả năng phản hồi kém và cách khả năng này có thể tạo ra trải nghiệm người dùng kém.

Hướng dẫn này giải thích cách hoạt động của INP, cách đo lường và hướng dẫn các tài nguyên để cải thiện INP.

INP là gì?

INP là chỉ số đánh giá khả năng phản hồi tổng thể của một trang đối với các hoạt động tương tác của người dùng bằng cách quan sát độ trễ của tất cả các lượt tương tác nhấp, nhấn và bàn phím xảy ra trong suốt thời gian người dùng truy cập vào một trang. Giá trị INP cuối cùng tương ứng với lượt tương tác dài nhất quan sát được, bỏ qua các điểm ngoại lai.

Lượt tương tác là một nhóm trình xử lý sự kiện kích hoạt trong cùng một cử chỉ logic của người dùng. Ví dụ: "nhấn" các hoạt động tương tác trên thiết bị màn hình cảm ứng bao gồm nhiều sự kiện, chẳng hạn như pointerup, pointerdown và click. Một lượt tương tác có thể do JavaScript, CSS, các chế độ điều khiển tích hợp sẵn của trình duyệt (chẳng hạn như các phần tử biểu mẫu) hoặc sự kết hợp của các yếu tố này.

Độ trễ của một lượt tương tác bao gồm thời lượng dài nhất của một nhóm trình xử lý sự kiện thúc đẩy lượt tương tác đó, từ thời điểm người dùng bắt đầu tương tác cho đến thời điểm trình duyệt có thể vẽ một khung hình lần sau.

Điểm INP tốt là bao nhiêu?

Đang ghim các nhãn, chẳng hạn như "tốt" hoặc "kém" đối với chỉ số khả năng phản hồi là rất khó. Một mặt, bạn muốn khuyến khích các phương pháp phát triển ưu tiên khả năng phản hồi tốt. Mặt khác, bạn phải tính đến thực tế là có sự thay đổi đáng kể về khả năng của các thiết bị mà mọi người sử dụng để đặt ra kỳ vọng phát triển có thể đạt được.

Để đảm bảo bạn đang mang đến trải nghiệm người dùng có khả năng phản hồi tốt, ngưỡng phù hợp để đo lường là phân vị thứ 75 của số lượt tải trang được ghi lại trong trường, được phân đoạn trên thiết bị di động và máy tính:

• INP thấp hơn hoặc ở mức 200 mili giây có nghĩa là trang có khả năng phản hồi tốt.
• INP trên 200 mili giây và dưới hoặc ở 500 mili giây có nghĩa là độ phản hồi của trang cần cải thiện.
• INP trên 500 mili giây có nghĩa là trang có khả năng phản hồi kém.

Nội dung tương tác

JavaScript thường là yếu tố chính thúc đẩy tính tương tác, mặc dù các trình duyệt cung cấp tính tương tác thông qua các thành phần điều khiển không được JavaScript hỗ trợ, chẳng hạn như hộp đánh dấu, nút chọn và các thành phần điều khiển được CSS hỗ trợ.

Theo mục đích của INP, chỉ những loại tương tác sau đây mới được quan sát:

• Nhấp chuột.
• Nhấn vào một thiết bị có màn hình cảm ứng.
• Nhấn một phím trên bàn phím vật lý hoặc bàn phím ảo.

Các hoạt động tương tác diễn ra trong tài liệu chính hoặc trong iframe được nhúng trong tài liệu, ví dụ: nhấp vào nút phát trên một video được nhúng. Người dùng cuối sẽ không biết liệu có nội dung nào trong iframe hay không. Do đó, bạn cần có INP trong iframe để đo lường trải nghiệm người dùng cho trang cấp cao nhất. Do API Web JavaScript không có quyền truy cập vào nội dung của iframe, nên điều này có thể hiển thị dưới dạng sự khác biệt giữa CrUX và RUM

Hoạt động tương tác có thể bao gồm nhiều sự kiện. Ví dụ: một thao tác nhấn phím bao gồm các sự kiện keydown, keypress và keyup. Lượt tương tác nhấn chứa các sự kiện pointerup và pointerdown. Sự kiện có thời lượng dài nhất trong lượt tương tác là yếu tố đóng góp vào tổng độ trễ của lượt tương tác.

INP của trang được tính khi người dùng rời khỏi trang. Kết quả là một giá trị duy nhất đại diện cho khả năng phản hồi tổng thể của trang trong suốt vòng đời của trang. INP thấp có nghĩa là trang có khả năng phản hồi đáng tin cậy với hoạt động đầu vào của người dùng.

INP khác với Thời gian phản hồi lần tương tác đầu tiên (FID) như thế nào?

INP là chỉ số kế thừa của Thời gian phản hồi lần tương tác đầu tiên (FID). Mặc dù cả hai đều là chỉ số về khả năng phản hồi, nhưng FID chỉ đo lường độ trễ đầu vào của lượt tương tác đầu tiên trên một trang. INP cải thiện FID bằng cách quan sát tất cả các tương tác trên một trang, bắt đầu từ độ trễ đầu vào, đến thời gian cần để chạy trình xử lý sự kiện và cuối cùng cho đến khi trình duyệt hiển thị khung tiếp theo.

Những điểm khác biệt này có nghĩa là cả INP và FID đều là các loại chỉ số phản hồi. Trong đó FID là chỉ số khả năng phản hồi tải được thiết kế để đánh giá ấn tượng đầu tiên của trang đối với người dùng, thì INP là chỉ báo đáng tin cậy hơn về khả năng phản hồi tổng thể, bất kể thời điểm xảy ra lượt tương tác trên trang.

Nếu không có giá trị INP nào được báo cáo thì sao?

Một trang có thể không trả về giá trị INP. Điều này có thể xảy ra vì một số lý do, bao gồm:

• Trang đã được tải nhưng người dùng chưa bao giờ nhấp, nhấn hoặc nhấn một phím trên bàn phím.
• Trang đã tải nhưng người dùng đã tương tác với trang bằng các cử chỉ không được đo lường, chẳng hạn như cuộn hoặc di chuột qua các phần tử.
• Trang đang được một bot truy cập, chẳng hạn như trình thu thập dữ liệu tìm kiếm hoặc trình duyệt không có giao diện người dùng chưa được lập trình để tương tác với trang.

Cách đo lường INP

Bạn có thể đo lường INP cả trong trường thực và trong phòng thí nghiệm, trong phạm vi bạn có thể mô phỏng các lượt tương tác thực tế của người dùng.

Trong trường

Tốt nhất là bạn nên bắt đầu hành trình tối ưu hoá INP từ dữ liệu thực địa. Ở mức tốt nhất, dữ liệu trường từ tính năng Theo dõi người dùng thực (RUM) sẽ không chỉ cung cấp cho bạn giá trị INP của một trang mà còn cung cấp dữ liệu theo bối cảnh làm nổi bật lượt tương tác cụ thể nào chịu trách nhiệm cho giá trị INP đó, liệu lượt tương tác đó có xảy ra trong hoặc sau khi tải trang, loại lượt tương tác (nhấp, nhấn phím hoặc nhấn) và các thời điểm có giá trị khác có thể giúp bạn xác định phần nào của lượt tương tác đang ảnh hưởng đến khả năng phản hồi.

Nếu trang web của bạn đủ điều kiện để được đưa vào Báo cáo trải nghiệm người dùng trên Chrome (CrUX), thì bạn có thể nhanh chóng nhận được dữ liệu thực tế cho INP thông qua CrUX trong PageSpeed Insights (và các chỉ số quan trọng khác về trang web). Ở mức tối thiểu, bạn có thể nhận được hình ảnh ở cấp độ gốc về INP của trang web. Tuy nhiên, trong một số trường hợp, bạn cũng có thể nhận được dữ liệu ở cấp URL.

Tuy nhiên, mặc dù CrUX có thể cho bạn biết liệu có sự cố hay không, nhưng tính năng này không thể cho bạn biết nguyên nhân gây ra sự cố. Giải pháp RUM có thể giúp bạn khám phá thêm thông tin chi tiết về các trang, người dùng hoặc lượt tương tác của người dùng đang gặp vấn đề về khả năng thích ứng. Việc có thể phân bổ INP cho từng lượt tương tác sẽ giúp bạn tránh phải phỏng đoán và lãng phí công sức.

Ở phòng thí nghiệm

Tốt nhất là bạn nên bắt đầu thử nghiệm trong phòng thí nghiệm khi có dữ liệu thực địa cho thấy một trang có mức độ tương tác chậm. Dữ liệu thực địa sẽ làm cho công việc tái tạo các tương tác có vấn đề trong phòng thí nghiệm trở nên đơn giản hơn nhiều.

Tuy nhiên, có thể bạn không có dữ liệu thực địa. Mặc dù có thể đo lường INP bằng một số công cụ trong phòng thí nghiệm, nhưng giá trị INP thu được cho một trang trong quá trình thử nghiệm trong phòng thí nghiệm sẽ phụ thuộc vào các hoạt động tương tác được thực hiện trong khoảng thời gian đo lường. Hành vi của người dùng có thể khó dự đoán và thay đổi rất lớn, nghĩa là quá trình thử nghiệm của bạn trong phòng thí nghiệm không thể hiển thị các tương tác với vấn đề theo cách giống với dữ liệu thực địa. Ngoài ra, một số công cụ trong phòng thí nghiệm sẽ không báo cáo INP của trang vì chúng chỉ quan sát quá trình tải trang mà không kèm theo bất kỳ tương tác nào. Trong những trường hợp như vậy, Tổng thời gian chặn (TBT) có thể là một chỉ số proxy hợp lý cho INP, nhưng bản thân chỉ số này không thể thay thế cho INP.

Mặc dù có những hạn chế trong các công cụ trong phòng thí nghiệm khi đánh giá INP của trang, nhưng có một số chiến lược để tái tạo các tương tác chậm trong phòng thí nghiệm. Các chiến lược bao gồm việc theo dõi luồng người dùng phổ biến và kiểm thử các lượt tương tác trong quá trình đó, cũng như tương tác với trang khi trang tải (khi luồng chính thường bận nhất) để xác định các lượt tương tác chậm trong phần quan trọng đó của trải nghiệm người dùng.

Cách cải thiện INP

Chúng tôi có một bộ sưu tập hướng dẫn về cách tối ưu hoá INP để hướng dẫn bạn cách xác định các hiện tượng tương tác chậm trong thực tế và sử dụng dữ liệu trong phòng thí nghiệm để xác định nguyên nhân và tối ưu hoá các tương tác đó.

Nhật ký thay đổi

Đôi khi, lỗi được phát hiện trong các API dùng để đo lường chỉ số và đôi khi trong định nghĩa của chính các chỉ số đó. Do đó, đôi khi bạn phải thực hiện các thay đổi và những thay đổi này có thể xuất hiện dưới dạng điểm cải thiện hoặc điểm hồi quy trong các báo cáo và trang tổng quan nội bộ.

Để giúp bạn quản lý việc này, tất cả các thay đổi đối với cách triển khai hoặc định nghĩa của các chỉ số này sẽ xuất hiện trong Nhật ký thay đổi này.

Nếu bạn muốn gửi ý kiến phản hồi về các chỉ số này, hãy gửi ý kiến phản hồi trong nhóm Google phản hồi về chỉ số quan trọng trên web.

Kiểm tra kiến thức của bạn