Lượt tương tác đến nội dung hiển thị tiếp theo (INP)

Jeremy Wagner

Barry Pollard

Xuất bản: Ngày 6 tháng 5 năm 2022, Lần cập nhật gần đây nhất: Ngày 9 tháng 9 năm 2025

Dữ liệu sử dụng Chrome cho thấy 90% thời gian người dùng ở trên một trang là sau khi trang đó 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à những gì mà chỉ số INP đánh giá.

Khả năng phản hồi tốt có nghĩa là một trang phản hồi nhanh chóng các hoạt động tương tác. Khi một trang phản hồi một hoạt động tương tác, trình duyệt sẽ trình bày phản hồi trực quan trong khung hình tiếp theo mà trình duyệt vẽ. Phản hồi trực quan cho bạn biết liệu một mặt hàng bạn thêm vào giỏ hàng trực tuyến có thực sự được thêm hay không, liệu một trình đơn điều hướng trên thiết bị di động có mở hay không, liệu 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 đương nhiên sẽ mất nhiều thời gian hơn những hoạt động khác, nhưng đối với những hoạt động tương tác đặc biệt phức tạp, bạn cần nhanh chóng trình bày một số phản hồi trực quan ban đầu để cho người dùng biết rằng hệ thống vẫn đang hoạt động. Khung hình 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ả các hiệu ứng cuối cùng của một lượt tương tác (chẳng hạn như các lượt tìm nạp mạng và các lượt 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 hiển thị tiếp theo bị chặn. Bằng cách trì hoãn phản hồi trực quan, người dùng có thể cảm thấy 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 thành phần accordion đang mở. 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ể mang lại trải nghiệm không tốt cho người dùng.

Hướng dẫn này giải thích cách INP hoạt động, 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à một chỉ số đánh giá khả năng phản hồi 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ả hoạt động tương tác nhấp, nhấn và 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.

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. Tương tác có thể được điều khiển bằng JavaScript, CSS, các chế độ kiểm soát tích hợp của trình duyệt (chẳng hạn như các phần tử biểu mẫu) hoặc kết hợp các yếu tố này.

Độ trễ của một hoạt động tương tác bao gồm khoảng thời gian dài nhất của một nhóm trình xử lý sự kiện điều khiển hoạt động tương tác, từ thời điểm người dùng bắt đầu hoạt động tương tác cho đến thời điểm trình duyệt có thể vẽ khung hình tiếp theo. Trong một số ít trường hợp, có thể không có khung hình nào để vẽ nhưng hoạt động tương tác sẽ kết thúc khi trình duyệt có thể vẽ một khung hình.

Điểm INP tốt là gì?

Khó gắn nhãn như "tốt" hoặc "kém" cho một chỉ số về khả năng phản hồi. 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 những kỳ vọng có thể đạt được trong quá trình phát triển.

Để đảm bảo bạn mang lại 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 các lượt tải trang được ghi lại trên thực tế, đượ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ó khả năng phản hồi tốt.
• INP trên 200 mili giây và dưới hoặc bằng 500 mili giây có nghĩa là độ phản hồi của trang cần được 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.

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

Trình điều khiển 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 được hỗ trợ bởi JavaScript, chẳng hạn như hộp đánh dấu, nút chọn và các chế độ kiểm soát được hỗ trợ bởi CSS.

Vì mục đích của INP, chỉ những 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 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, chẳng hạn như 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 nội dung nào nằm 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ì JavaScript Web API không có quyền truy cập vào nội dung của iframe, nên điều này có thể xuất hiện dưới dạng sự khác biệt giữa CrUX và RUM

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

Như minh hoạ trong sơ đồ, thời lượng xử lý của INP bao gồm tất cả các lệnh gọi lại của trình xử lý sự kiện trong khung hình đó. Điều này khiến độ trễ đầu vào trở thành thời gian trước khi mọi lệnh gọi lại cho một lượt tương tác được xử lý, thời lượng xử lý là thời gian để thực thi tất cả lệnh gọi lại và độ trễ trình bày là thời gian sau khi các lệnh gọi lại được thực thi cho đến khi khung hình xuất hiện trên màn hình của người dùng.

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 thể hiện 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 phản hồi đáng tin cậy đối 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ế nhiệm 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 ghi nhận 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 hiển thị khung hình 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ố về khả năng phản hồi. Trong đó, FID là một chỉ số về khả năng phản hồi khi tải được thiết kế để đánh giá ấn tượng đầu tiên của trang đối với người dùng, còn INP là một 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 các lượt tương tác trong vòng đời của một trang.

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

Có thể một trang sẽ 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ư di chuyển lên xuống hoặc di chuột qua các phần tử.
• Trang đang được truy cập bởi một bot, 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

Bạn có thể đo lường INP cả trong trường 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 lĩnh vực

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

Nếu trang web của bạn đủ điều kiện xuất hiện trong Báo cáo trải nghiệm người dùng trên Chrome (CrUX), 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 Core Web Vitals khác). Ít nhất, bạn có thể xem được bức tranh tổng quan về INP của trang web ở cấp nguồn, nhưng trong một số trường hợp, bạn cũng có thể xem được 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 thông tin chi tiết về các trang, người dùng hoặc hoạt động tương tác của người dùng đang gặp phải vấn đề về khả năng phản hồi. Khả năng phân bổ INP cho từng lượt tương tác giúp bạn tránh phải đoán mò 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ó các hoạt động tương tác diễn ra chậm. Dữ liệu thực tế 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ở thành một nhiệm vụ đơn giản hơn nhiều.

Tuy nhiên, hoàn toàn có thể bạn không có dữ liệu thực tế. Mặc dù có thể đo lường INP trong một số công cụ phòng thí nghiệm, nhưng giá trị INP thu được cho một trang trong quá trình kiểm thử 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ó đoán và rất đa dạng, tức là quá trình kiểm thử trong phòng thí nghiệm có thể không phát hiện ra các lượt tương tác có vấn đề theo cách mà dữ liệu thực tế có thể làm. Ngoài ra, một số công cụ phòng thí nghiệm sẽ không báo cáo INP của một trang vì chúng chỉ quan sát quá trình tải một trang mà không có bất kỳ hoạt động 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 thay thế được INP.

Mặc dù các công cụ trong phòng thí nghiệm có một số hạn chế 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 tạo các hoạt động tương tác diễn ra chậm trong phòng thí nghiệm. Các chiến lược bao gồm việc tuân theo quy trình phổ biến của người dùng và kiểm thử 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 nhất) để xác định các lượt tương tác diễn ra chậm trong phần quan trọng đó của trải nghiệm người dùng.

Đo lường INP bằng JavaScript

Để đo lường INP trong JavaScript, bạn cần đo lường thời gian của sự kiện cho tất cả lượt tương tác, sau đó lấy phân vị thứ 98 trên tất cả các lượt tương tác này khi trang được dỡ tải. Bạn có thể tham khảo mã nguồn thư viện JavaScript web vitals. Mã nguồn này chứa một cách triển khai tham chiếu về cách tính INP.

Trong hầu hết các trường hợp, giá trị INP hiện tại tại thời điểm trang đang được huỷ tải là giá trị INP cuối cùng cho trang đó, nhưng có một số trường hợp ngoại lệ quan trọng như đã lưu ý trong phần tiếp theo. Thư viện JavaScript web vitals tính đến những yếu tố này nhiều nhất có thể, trong giới hạn của Web API.

Sự khác biệt giữa chỉ số và API

• Theo mặc định, các mục event dưới 104 mili giây không báo cáo bằng cách sử dụng trình quan sát hiệu suất. Bạn có thể thay đổi giá trị mặc định này khi đăng ký một trình theo dõi hiệu suất bằng cách sử dụng tham số durationThreshold, nhưng ngay cả như vậy thì giá trị này cũng có giá trị tối thiểu là 16 mili giây. Vì lý do này, bạn cũng nên quan sát mục first-input. Đây cũng là một mục Thời gian của sự kiện, nhưng chắc chắn có thể quan sát được ngay cả khi thời lượng của mục này nhỏ hơn durationThreshold. Điều này giúp đảm bảo rằng những trang có lượt tương tác luôn báo cáo một giá trị INP nào đó.
• Về mặt kỹ thuật, việc tính toán các phân vị một cách hoàn hảo đòi hỏi phải lưu giữ tất cả các mẫu trong bộ nhớ, điều này có thể tốn kém. Tuy nhiên, bạn có thể ước tính các phân vị, đặc biệt là các phân vị thực sự cao như p98, bằng cách chỉ giữ một danh sách nhỏ gồm N lượt tương tác tệ nhất. 10 là lựa chọn phổ biến.
• Nếu một trang được khôi phục từ bộ nhớ đệm cho thao tác tiến/lùi, thì giá trị INP của trang đó phải được đặt lại thành 0 vì người dùng trải nghiệm điều này như một lượt truy cập trang riêng biệt.
• API này không báo cáo các mục event cho những lượt tương tác xảy ra trong iframe, nhưng chỉ số này thì có báo cáo vì chúng là một phần trong trải nghiệm người dùng trên trang. Điều này có thể thể hiện sự khác biệt giữa CrUX và RUM. Để đo lường INP một cách chính xác, bạn nên cân nhắc những yếu tố này. Khung phụ có thể dùng API để báo cáo các mục nhập event-timing cho khung chính.

Ngoài những trường hợp ngoại lệ này, INP còn có thêm một số điểm phức tạp do đo lường toàn bộ thời gian tồn tại của một trang:

• Người dùng có thể mở một thẻ trong rất lâu – nhiều ngày, nhiều tuần, nhiều tháng. Trên thực tế, người dùng có thể không bao giờ đóng thẻ.
• Trên hệ điều hành di động, trình duyệt thường không chạy lệnh gọi lại khi trang được gỡ tải cho các thẻ ở chế độ nền, gây khó khăn cho việc báo cáo giá trị "cuối cùng".

Để xử lý những trường hợp như vậy, bạn nên báo cáo INP bất cứ khi nào một trang ở chế độ nền, ngoài những trường hợp trang bị huỷ tải (sự kiện visibilitychange bao gồm cả hai trường hợp này). Sau đó, các hệ thống phân tích nhận được dữ liệu này sẽ cần tính toán giá trị INP cuối cùng ở phần phụ trợ.

Thay vì tự mình ghi nhớ và xử lý tất cả các trường hợp này, nhà phát triển có thể sử dụng thư viện JavaScript web-vitals để đo lường INP, tính đến mọi thứ đã đề cập trước đó, ngoại trừ trường hợp iframe:

import {onINP} from 'web-vitals';

// Measure and log INP in all situations
// where it needs to be reported.
onINP(console.log);

Cách cải thiện INP

Bạn có thể tham khảo tập hợp các hướng dẫn về cách tối ưu hoá INP để biết cách xác định những lượt tương tác diễn ra 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á những lượt tương tác đó.

Nhật ký thay đổi

Đôi khi, các lỗi được phát hiện trong những API dùng để đo lường chỉ số và đôi khi trong chính định nghĩa của 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 giảm trong các báo cáo và trang tổng quan nội bộ của bạn.

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

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