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

Hỗ trợ trình duyệt

  • 96
  • 96
  • x
  • x

Nguồn

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 được thực hiện với trang đó. Khi trang phản hồi một tương tác, kết quả sẽ là phản hồi trực quan, được trình duyệt hiển thị 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 sẽ mất nhiều thời gian hơn 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 nhanh chóng đưa ra một số phản hồi trực quan ban đầu để làm tín hiệu cho người dùng rằng điều gì đó đang đang xảy ra. Thời gian cho đến lần sơn tiếp theo 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ả các tác động cuối cùng của hoạt động 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 gian mà nội dung hiển thị tiếp theo bị chặn. Bằng cách trì hoãn việc phản hồi bằng hình ảnh, bạn có thể khiến người dùng thấy rằng trang đang không phản hồi với hành động của họ.

Mục tiêu của INP là đảm bảo khoảng thời gian từ khi người dùng bắt đầu một tương tác cho đến khi hiển thị khung tiếp theo càng ngắn càng tốt, cho tất cả hoặc hầu hết các tương tác mà người dùng thực hiện.

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ở. Báo cáo này cũng cho thấy mức độ phản hồi kém có thể gây ra nhiều phản hồi ngoài ý muốn cho thông tin đầu vào vì người dùng cho rằng trải nghiệm bị hỏng.

Ví dụ về trường hợp phản hồi kém so với phản hồi tốt. Ở bên trái, các thao tác dài sẽ chặn đàn phong cầm mở. Điều này khiến người dùng nhấp vào nhiều lần và cho rằng trải nghiệm không tốt. Khi luồng chính bắt kịp, luồng chính sẽ xử lý các đầu vào bị trễ, dẫn đến việc đàn xếp mở và đóng đột ngột.

Bài viết này giải thích cách hoạt động của INP, cách đo lường 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ưu ý về cách tính INP

Như đã nêu ở trên, INP được tính bằng cách quan sát tất cả các lượt tương tác được thực hiện với một trang. Đối với hầu hết các trang web, hoạt động tương tác có độ trễ thấp nhất được báo cáo là INP. Tuy nhiên, đối với các trang có số lượng tương tác lớn, các trục trặc ngẫu nhiên có thể dẫn đến lượt tương tác cao bất thường trên một trang web thích ứng khác. Càng có nhiều lượt tương tác thì điều này càng có nhiều khả năng xảy ra. Để chống lại vấn đề này và đưa ra đánh giá chính xác hơn về khả năng thích ứng thực tế của các loại trang đó, chúng tôi bỏ qua một lượt tương tác cao nhất cho mỗi 50 lượt tương tác. Phần lớn trải nghiệm trên trang không có trên 50 lượt tương tác, nên sẽ báo cáo lượt tương tác kém nhất. Sau đó, hệ thống sẽ báo cáo tỷ lệ phần trăm thứ 75 của tổng số lượt xem trang như thường lệ, giúp loại bỏ những điểm ngoại lai để đưa ra một giá trị mà phần lớn người dùng trải nghiệm hoặc tốt hơn.

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, pointerdownclick. 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 cho đến khi hệ thống hiển thị khung hình tiếp theo kèm theo phản hồi bằng hình ảnh.

Đ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ủa bạn có khả năng 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ủa bạn cần cải thiện.
  • INP trên 500 mili giây có nghĩa là trang của bạn phản hồi kém.
Giá trị INP tốt là 200 mili giây trở xuống, giá trị kém lớn hơn 500 mili giây và những giá trị còn lại cần cải thiện.

Nội dung tương tác là gì?

Sơ đồ mô tả một hoạt động tương tác trên luồng chính. Người dùng nhập dữ liệu trong khi chặn các tác vụ chạy. Dữ liệu đầu vào bị trì hoãn cho đến khi các tác vụ đó hoàn tất, sau đó các trình xử lý sự kiện con trỏ, di chuột lên và nhấp chuột sẽ chạy, sau đó công việc kết xuất và vẽ tranh được khởi động cho đến khi khung tiếp theo được trình bày.
Vòng đời của một hoạt động tương tác. Độ trễ đầu vào xảy ra cho đến khi trình xử lý sự kiện bắt đầu chạy. Điều này có thể là do các yếu tố như các tác vụ dài trên luồng chính. Sau đó, trình xử lý sự kiện của hoạt động tương tác sẽ chạy và độ trễ sẽ xảy ra trước khi khung hình tiếp theo được hiển thị.

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 như 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 có nội dung nào trong iframe hay không. Do đó, INP trong iframe là cần thiết để đo lường trải nghiệm người dùng cho trang cấp cao nhất. Lưu ý: Các API Web JavaScript sẽ không có quyền truy cập vào nội dung iframe, vì vậy, có thể không đo lường được INP trong iframe và điều này sẽ hiển thị là sự khác biệt giữa CrUX và rum.

Hoạt động tương tác có thể bao gồm hai phần, mỗi phần có 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, keypresskeyup. Hoạt động tương tác với thao tác nhấn chứa các sự kiện pointeruppointerdown. Sự kiện có thời lượng dài nhất trong lượt tương tác sẽ được chọn làm độ trễ của lượt tương tác.

Mô tả tương tác phức tạp hơn có chứa hai tương tác. Sự kiện đầu tiên là sự kiện di chuột xuống. Sự kiện này tạo ra một khung trước khi thả nút chuột. Sự kiện này sẽ kích hoạt nhiều công việc hơn cho đến khi một khung hình khác xuất hiện.
Mô tả một hoạt động tương tác với nhiều trình xử lý sự kiện. Phần đầu tiên của tương tác nhận dữ liệu đầu vào khi người dùng nhấp xuống nút chuột. Tuy nhiên, trước khi họ nhả nút chuột, một khung sẽ xuất hiện. Khi người dùng thả nút chuột, một loạt trình xử lý sự kiện khác phải chạy trước khi khung hình tiếp theo xuất hiện.

INP được tính khi người dùng rời khỏi trang, dẫn đến 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 toàn bộ vòng đời của trang. Chỉ số INP thấp có nghĩa là một trang có khả năng phản hồi nhanh chóng dựa trên 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?

Trong trường hợp INP xem xét tất cả lượt tương tác với trang, thì Thời gian phản hồi lần tương tác đầu tiên (FID) chỉ tính cho lượt tương tác đầu tiên. Chỉ số này cũng chỉ đo lường độ trễ đầu vào của lượt tương tác đầu tiên, chứ không phải thời gian cần để chạy trình xử lý sự kiện hoặc độ trễ khi trình bày khung hình tiếp theo.

Vì FID cũng là một chỉ số về khả năng phản hồi khi tải, nên lý do là nếu lượt tương tác đầu tiên với một trang trong giai đoạn tải có độ trễ đầu vào ít hoặc không nhận biết được, thì trang đó đã tạo được ấn tượng tốt ban đầu.

INP không chỉ là lượt hiển thị đầu tiên. Bằng cách lấy mẫu tất cả các lượt tương tác, khả năng phản hồi có thể được đánh giá toàn diện, khiến INP trở thành chỉ báo đáng tin cậy hơn về khả năng phản hồi tổng thể so với FID.

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:

  • 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 đã được tải nhưng người dùng đã tương tác với trang bằng các cử chỉ không liên quan đến việc nhấp, nhấn hoặc sử dụng bàn phím. Ví dụ: việc cuộn hoặc di chuột qua các phần tử không ảnh hưởng đến cách tính INP.
  • 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 hay 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 thông tin có giá trị khác.

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ể nhận được dữ liệu ở cấp trang.

Tuy nhiên, mặc dù CrUX rất hữu ích trong việc cho bạn biết rằng vấn đề ở cấp độ cao, nhưng nó thường không cung cấp đủ chi tiết để giúp bạn hiểu đầy đủ vấn đề. Một giải pháp CrUX có thể giúp bạn xem chi tiết hơn về các trang, người dùng hoặc lượt tương tác của người dùng đang có tương tác chậm. 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 xét nghiệm trong phòng thí nghiệm sau khi có dữ liệu thực tế cho thấy bạn có mức độ tương tác chậm. Tuy nhiên, khi không có dữ liệu thực địa, 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 theo dõi luồng người dùng phổ biến và tương tác thử nghiệm trong quá trình, cũng như tương tác với trang trong khi tải (khi luồng chính thường bận rộn nhất) để hiển thị các 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

Bạn có thể xem bộ sưu tập hướng dẫn về cách tối ưu hoá INP để hướng dẫn bạn trong quá trình xác định các tương tác chậm tại hiện trường, cũng như sử dụng dữ liệu phòng thí nghiệm để xem chi tiết và tối ưu hoá chúng theo nhiều cách.

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 có ý kiến phản hồi về các chỉ số này, bạn có thể gửi ý kiến phản hồi trong nhóm Google quan trọng về phản hồi trên web.