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

Hỗ trợ trình duyệt

  • Chrome: 96.
  • Edge: 96.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

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 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à 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 các lượt 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ẽ. Ví dụ: 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ự được thêm hay không, trình đơn điều hướng trên thiết bị di động có mở hay không, 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ố hoạt động tương tác tự nhiên sẽ mất nhiều thời gian hơn so với các hoạt động khác, nhưng đối với các hoạt động tương tác đặc biệt phức tạp, điều quan trọng là phải nhanh chóng trình bày một số phản hồi hình ảnh ban đầu để cho người dùng biết rằng có điều gì đó đang diễn 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 đó, ý đị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 cung cấp phản hồi trực quan tức thì về việc một ngăn xếp mở ra. Phản hồi kém được minh hoạ trong ví dụ ở bên trái và cách nó có thể tạo ra trải nghiệm người dùng kém.

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

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 thích ứng tổng thể của một trang đối với 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ả lượt tương tác nhấp, nhấn cũng như tương tác bằng 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.

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, lượt tương tác có độ trễ tệ nhất được báo cáo là INP.

Tuy nhiên, đối với những trang có số lượt tương tác lớn, sự cố ngẫu nhiên có thể dẫn đến độ trễ tương tác cao bất thường trên một trang vốn có khả năng thích ứng. Càng có nhiều lượt tương tác xảy ra trên một trang nhất định thì khả năng này càng cao.

Để đo lường chính xác hơn khả năng đáp ứng thực tế cho các trang có nhiều lượt tương tác, 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. Do đó, lượt tương tác kém nhất được báo cáo thường xuyên nhất. Sau đó, hệ thống sẽ báo cáo như bình thường về phân vị thứ 75 của tất cả lượt xem trang. Việc này giúp loại bỏ thêm các giá trị 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.

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. 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 tiếp theo.

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

Khó có thể ghim các nhãn như "tốt" hoặc "kém" trên chỉ số về khả năng thích ứng. 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ự khác biệt đá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 dưới hoặc bằng 200 mili giây có nghĩa là trang có tốc độ 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ó tốc độ phản hồi kém.
Giá trị INP tốt là dưới 200 mili giây, giá trị kém là trên 500 mili giây và mọi giá trị ở giữa cần được cải thiện.
Giá trị INP tốt là từ 200 mili giây trở xuống. Giá trị kém lớn hơn 500 mili giây.

Một lượt tương tác bao gồm những gì?

Sơ đồ mô tả một lượt 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 sẽ bị trì hoãn cho đến khi các tác vụ đó hoàn tất, sau đó trình xử lý sự kiện pointerup, mouseup và click sẽ chạy, sau đó quá trình kết xuất và vẽ sẽ bắt đầu cho đến khi khung hình tiếp theo xuất hiện.
Thời gian của một lượt 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, có thể do các yếu tố như tác vụ dài trên luồng chính gây ra. Sau đó, lệnh gọi lại 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 tiếp theo xuất hiện.

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 bằng chuột.
  • Nhấn vào một thiết bị có màn hình cảm ứng.
  • Nhấn phím trên bàn phím thực 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 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. Vì 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ể thể hiện sự khác biệt giữa CrUX và RUM

Một lượt tương tác có thể bao gồm nhiều sự kiện. Ví dụ: thao tác nhấn phím bao gồm các sự kiện keydown, keypresskeyup. Lượt tương 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 là yếu tố góp phần vào tổng độ trễ của lượt tương tác.

Mô tả một hoạt động tương tác phức tạp hơn gồm hai hoạt động tương tác. Sự kiện đầu tiên là sự kiện nhấn chuột, tạo ra một khung trước khi thả nút chuột, bắt đầu thêm công việc cho đến khi một khung khác xuất hiện dưới dạng kết quả.
Hình ảnh mô tả một lượt tương tác với nhiều trình xử lý sự kiện. Phần đầu tiên của hoạt động tương tác sẽ nhận được dữ liệu đầu vào khi người dùng nhấp vào 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 tiếp theo xuất hiện.

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 Độ trễ đầu vào đầ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ả lượt tương tác trên một trang, bắt đầu từ độ trễ đầu vào, đến thời gian cần thiết để chạy trình xử lý sự kiện và cuối cùng là 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à các loại chỉ số phản hồi. Trong khi FID là một chỉ số phản hồi tải được thiết kế để đánh giá ấn tượng đầu tiên của người dùng về trang, 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 tương tác trong vòng đời của 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 hoạt động tương tác thực tế của người dùng.

Trong trường hợp thực tế

Tốt nhất là bạn nên bắt đầu hành trình tối ưu hoá INP bằng 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). Ít nhất, bạn có thể xem thông tin tổng quan 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ó vấn đề hay không, nhưng không thể cho bạn biết nguyên nhân gây ra vấn đề. Giải pháp RUM có thể giúp bạn khám phá thêm chi tiết về các trang, người dùng hoặc tương tác của người dùng đang gặp vấn đề về khả năng phản hồi. 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 sau khi có dữ liệu thực địa cho thấy một trang có tốc độ tương tác chậm. Dữ liệu trường sẽ giúp việc tái tạo các lượt 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 trong một số công cụ 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 những lượt 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 nhiều, nghĩa là hoạt động kiểm thử của bạn trong phòng thí nghiệm có thể không hiển thị các lượt tương tác có vấn đề theo cách tương tự như 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ó một số hạn chế trong các công cụ của phòng thí nghiệm khi đánh giá INP của một trang, nhưng bạn có thể áp dụng một số chiến lược để tái hiện các lượt tương tác chậm trong phòng thí nghiệm. Các chiến lược bao gồm việc làm theo các luồng người dùng phổ biến và thử nghiệm các lượt tương tác trong suốt quá trình, cũng như tương tác với trang khi 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

Chúng tôi có bộ 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 lượt tương tác chậm trong thực tế và sử dụng dữ liệu trong thử nghiệm để giúp bạn xác định nguyên nhân và tối ưu hoá các lượt tương tác đó.

Nhật ký thay đổi

Đôi khi, chúng tôi phát hiện lỗi trong các API dùng để đo lường chỉ số và đôi khi là trong định nghĩa của chính các chỉ số đó. Do đó, đôi khi bạn cần phải thực hiện thay đổi và những thay đổi này có thể xuất hiện 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.

Để giúp bạn quản lý việc này, tất cả thay đổi đối với việc 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 có ý kiến phản hồi về các chỉ số này, hãy chia sẻ trong nhóm Google web-vitals-feedback.

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

Mục tiêu chính của chỉ số INP là gì?

Để đánh giá thời gian mà một trang cần để trở nên hoàn toàn tương tác.
Để đo lường thời gian cần thiết để hiển thị nội dung đầu tiên của trang.
Để định lượng độ ổn định về hình ảnh của một trang và giảm thiểu các thay đổi bố cục không mong muốn.
Để giảm thiểu thời gian từ khi người dùng bắt đầu tương tác cho đến khi khung hình tiếp theo được vẽ, đối với tất cả hoặc hầu hết các lượt tương tác mà người dùng bắt đầu.

Loại tương tác nào sau đây được quan sát để tính INP? (Chọn tất cả các mục phù hợp.)

Phóng to hoặc thu nhỏ trang.
Nhấp bằng chuột.
Di con trỏ chuột qua các phần tử.
Nhấn một phím trên bàn phím.
Cuộn trang bằng con lăn chuột hoặc bàn di chuột.
Nhấn vào màn hình cảm ứng.

"Độ trễ" của một lượt tương tác được xác định như thế nào cho INP?

Khoảng thời gian từ khi bắt đầu tương tác đến thời điểm khung hình tiếp theo hiển thị đầy đủ.
Khoảng thời gian để trình duyệt xử lý trình xử lý sự kiện của một lượt tương tác.
Khoảng thời gian để trình duyệt bắt đầu xử lý trình xử lý sự kiện liên kết với một lượt tương tác.
Thời gian trung bình để tất cả các lượt tương tác trên một trang tạo ra phản hồi trực quan.

Sự khác biệt giữa INP và FID là gì?

INP và FID đo lường các dấu thời gian khác nhau khi một trang có thể tương tác.
INP xem xét toàn bộ thời lượng của tất cả lượt tương tác, trong khi FID chỉ đo lường độ trễ đầu vào của lượt tương tác đầu tiên.
INP đo lường thời gian cần thiết để hiển thị nội dung đầu tiên của trang, còn FID đo lường khả năng phản hồi hoạt động đầu vào của người dùng.
Không có sự khác biệt nào; INP và FID chỉ là hai tên khác nhau cho cùng một chỉ số.

Trong trường hợp nào thì dữ liệu INP có thể không có sẵn cho một trang trong các công cụ như PageSpeed Insights?

Trang đang sử dụng một thư viện đo lường hiệu suất tuỳ chỉnh không báo cáo dữ liệu INP.
Trang này được tạo bằng một khung tự động tối ưu hoá cho INP, vì vậy, bạn không cần báo cáo trang này.
Không có đủ dữ liệu tương tác từ người dùng Chrome để tính toán giá trị INP có ý nghĩa trong tập dữ liệu CrUX.
Người dùng chỉ tương tác với trang thông qua thao tác cuộn và di chuột. Đây là những thao tác không được tính là INP.

Chiến lược hiệu quả nhất để tái tạo các lượt tương tác chậm trong môi trường thử nghiệm là gì?

Mô phỏng một thiết bị cao cấp có kết nối mạng chậm và không đáng tin cậy để tạo ra những điều kiện khó khăn.
Tập trung vào các tương tác phức tạp, trường hợp hiếm gặp mà hầu hết người dùng không gặp phải.
Tương tác với trang trong khi tải và làm theo các luồng người dùng phổ biến để xác định các nút thắt cổ chai tiềm ẩn.
Chỉ kiểm thử các lượt tương tác sau khi trang tải xong và ở trạng thái rảnh.

Bài kiểm tra này do Gemini 1.5 tạo và có người đánh giá. Chia sẻ ý kiến phản hồi của bạn