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

Jeremy Wagner

Dữ liệu sử dụng Chrome cho thấy 90% thời gian người dùng dành cho một trang sau khi tải. Do đó, việc đo lường cẩn thận khả năng phản hồi trong suốt vòng đời của trang là rất quan trọng. Đây là nội dung mà chỉ số INP đánh giá.

Khả năng phản hồi tốt có nghĩa là trang phản hồi nhanh chóng với các tương tác. Khi một trang phản hồi một tương tác, trình duyệt sẽ hiển thị phản hồi trực quan trong khung tiếp theo mà trình duyệt hiển thị. Phản hồi trực quan cho bạn biết liệu một mặt hàng mà bạn thêm vào giỏ hàng trực tuyến có thực sự đang được thêm vào hay không, 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 hay không, v.v.

Một số tương tác thường mất nhiều thời gian hơ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à bạn phải nhanh chóng đưa ra một số phản hồi bằng hình ảnh ban đầu để cho người dùng biết điều gì đó đang xảy ra. Khung tiếp theo mà trình duyệt sẽ vẽ là cơ hội sớm nhất để thực hiện việc này.

Do đó, mục đích của INP không phải là đo lường tất cả tác độ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 hoạt động không đồng bộ khác) mà là thời điểm nội dung hiển thị tiếp theo bị chặn. Bằng cách trì hoãn phản hồi bằng hình ảnh, người dùng có thể có ấn tượng rằng trang không phản hồi đủ nhanh và INP đã được phát triển để giúp nhà phát triển đo lường phần này trong trải nghiệm người dùng.

Trong video sau đây, ví dụ ở bên phải đưa ra phản hồi trực quan ngay lập tức cho biết một đàn phong cầm đang mở. Ví dụ về khả năng phản hồi kém được minh hoạ ở bên trái và vấn đề này có thể gây ra trải nghiệm kém cho người dùng như thế nào.

Hướng dẫn này giải thích cách hoạt động và cách đo lường INP và chỉ ra 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 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 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ụ: các hoạt động tương tác "nhấn" 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. Hành động tương tác có thể do JavaScript, CSS, các thành phần điều khiển tích hợp sẵn trong trình duyệt (chẳng hạn như thành phần biểu mẫu) hoặc sự kết hợp của các thành phần 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 giúp 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 đến thời điểm trình duyệt vẽ khung tiếp theo.

Điểm INP cao là gì?

Việc ghim các nhãn như "tốt" hoặc "kém" vào chỉ số khả năng phản hồi sẽ khó khăn. Một mặt, bạn nê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à chức năng của thiết bị mà mọi người sử dụng có sự thay đổi đáng kể để đặt ra những kỳ vọng có thể đạt được về sự phát triển.

Để đảm bảo bạn đang cung cấp trải nghiệm người dùng với khả năng phản hồi tốt, một ngưỡng tốt để đo lường là phân vị thứ 75 của 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 để bàn:

• INP dưới hoặc tại 200 mili giây có nghĩa là trang có phản hồi tốt.
• INP trên 200 mili giây trở xuống hoặc thấp hơn 500 mili giây có nghĩa là khả năng 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 là gì?

Yếu tố chính của tính tương tác thường là JavaScript, mặc dù các trình duyệt cung cấp tính tương tác thông qua các chế độ kiểm soát không do JavaScript cung cấp, chẳng hạn như hộp đánh dấu, nút chọn và các chế độ kiểm soát do CSS cung cấp.

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

• Nhấp bằng 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.

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 phát trên video được nhúng. Người dùng cuối sẽ không biết nội dung nào có trong iframe hay không, do đó, INP cần bên trong iframe để đo lường trải nghiệm người dùng cho trang cấp cao nhất. Do các 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ể là 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. Hoạt động tương tác với thao 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ố tính 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. Chỉ số INP thấp có nghĩa là một trang 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 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 thích ứng, 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ả tương tác trên một trang, bắt đầu từ độ trễ đầu vào, 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 vẽ khung tiếp theo.

Những điểm khác biệt này có nghĩa là cả INP và FID đều là hai loại chỉ số về khả năng phản hồi. Trong đó FID là chỉ số về khả năng phản hồi khi tải được thiết kế để đánh giá lượt hiển thị đầu tiên của trang đối với người dùng, còn 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 tương tác với trang xảy ra.

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

Có thể một trang không trả về giá trị INP nào. Điều này có thể xảy ra vì một số lý do như sau:

• Trang đã được tải nhưng người dùng chưa từng nhấp, nhấn hay 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ử.
• Một bot đang truy cập trang này, chẳng hạn như trình thu thập thông tin 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

Có thể đo lường INP ở cả thực địa và trong phòng thí nghiệm bằng nhiều công cụ.

Trên thực địa

Tốt nhất là hành trình tối ưu hoá INP của bạn nên bắt đầu từ dữ liệu thực địa. Tuyệt vời nhất, dữ liệu thực tế trong báo cáo Giám sát người dùng thực tế (rum) không chỉ cung cấp cho bạn giá trị INP của trang, mà còn cả dữ liệu ngữ cảnh nêu bật lượt tương tác cụ thể chịu trách nhiệm về giá trị INP, liệu lượt tương tác xảy ra trong hoặc sau khi tải trang, loại tương tác (lượt nhấp, thao tác nhấn phím hoặc nhấn) và các dấu thời gian 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 đã ả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 của Chrome (CrUX), bạn có thể nhanh chóng nhận được dữ liệu thực địa cho INP thông qua CrUX trong PageSpeed Insights (và các Chỉ số quan trọng chính khác về trang web). Ít nhất bạn có thể xem được thông tin về INP của trang web ở cấp nguồn gốc, nhưng trong một số trường hợp, bạn cũng có thể xem dữ liệu ở cấp URL.

Tuy nhiên, mặc dù CrUX có thể cho bạn biết liệu có có vấn đề 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 vấn đề. Một giải pháp rum có thể giúp bạn tìm ra thêm thông tin chi tiết về những trang, người dùng hoặc hoạt động tương tác của người dùng đang gặp vấn đề về tốc độ phản hồi. Việc có thể phân bổ INP cho từng hoạt động 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 sau khi có dữ liệu thực tế cho thấy một trang có mức độ tương tác chậm. Tuy nhiên, nếu bạn không có dữ liệu thực tế, có một số chiến lược để tái tạo tương tác chậm trong phòng thí nghiệm. Chiến lược bao gồm việc theo dõi luồng người dùng phổ biến và thử nghiệm các lượt tương tác trong quá trình này, cũng như tương tác với trang khi trang tải (khi luồng chính thường bận rộn nhất) để xác định các lượt tương tác chậm trong giai đoạn quan trọng của trải nghiệm người dùng.

Cách cải thiện INP

Bạn có thể tham khảo bộ sưu tập hướng dẫn về cách tối ưu hoá INP để hướng dẫn bạn trong suốt quy trình xác định tương tác chậm tại hiện trường, cũng như sử dụng dữ liệu trong phòng thí nghiệm để giúp bạn xác định nguyên nhân và tối ưu hoá các nguyên nhân đó.

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 thay đổi và những thay đổi này có thể hiển thị dưới dạng sự cải thiện hoặc hồi quy trong báo cáo nội bộ và trang tổng quan của bạn.

Để giúp bạn quản lý vấn đề này, tất cả các thay đổi đối với cách triển khai hoặc định nghĩ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 có chỉ số quan trọng trên web.

Kiểm tra kiến thức