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 ra sau khi trang tải. Do đó, việc đo lường kỹ khả năng phản hồi trong suốt vòng đời của trang là rất quan trọng. Đâ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 lại một lượ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ị. 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 đó, 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 gian mà hiển thị tiếp theo bị chặn. Việc trì hoãn phản hồi bằng hình ảnh có thể khiến người dùng có cảm giác rằng trang không phản hồi đủ nhanh. Đồng thời, INP đã được phát triển để giúp các nhà phát triển đo lường phần này của trải nghiệm người dùng.

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. 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 sẽ chặn không cho đàn phong cầm mở ra. Việc này khiến người dùng nhấp nhiều lần, họ cho rằng trải nghiệm đó bị gián đoạn. 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 accordion mở và đóng đột ngột. Ở 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à chỉ ra các tài nguyên giúp 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.

Thông tin chi tiết về cách tính INP

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ễ kém nhất được báo cáo dưới dạng 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 tương tác có độ trễ cao bất thường trên một trang đáp ứng khác. Càng có nhiều tương tác xảy ra trên một trang nhất định, điều này càng có nhiều khả năng xảy ra.

Để đ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. Vì vậy, lượt tương tác kém nhất được báo cáo thường xuyên nhất. Sau đó, tỷ lệ phần trăm thứ 75 của tất cả lượt xem trang sẽ được báo cáo như bình thường. Điều này giúp loại bỏ các điểm ngoại lai để mang lại giá trị mà phần lớn người dùng đều 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ụ: "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, pointerdownclick. Một lượt tương tác có thể do JavaScript, CSS, các biện pháp điều khiển tích hợp sẵn trong trình duyệt (chẳng hạn như các thành phần biểu mẫu) hoặc sự kết hợp của các yếu tố đó.

Độ 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 hiển thị khung hình tiếp theo.

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

Đ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 cung cấp trải nghiệm người dùng với khả năng phản hồi tốt, ngưỡng phù hợp để đo lường là tỷ lệ phần trăm 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à thiết bị 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à thấp hơn hoặc 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.
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à mọi thứ ở giữa đều cần 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.

Nội dung tương tác

Sơ đồ mô tả một hoạt động tương tác trên luồng chính. Người dùng nhập thông tin đầu vào trong khi chặn chạy các tác vụ. Hoạt động đầu vào sẽ 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 trỏ chuột, di chuột và nhấp chuột chạy, sau đó công việc kết xuất và vẽ được bắt đầu cho đến khi khung tiếp theo hiển thị.
Vòng đời của một hoạt động tương tác. Độ trễ đầu vào cho đến khi trình xử lý sự kiện bắt đầu chạ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 đó, các lệnh gọi lại trình xử lý sự kiện của lượt tương tác sẽ chạy và sẽ có độ trễ trước khi khung hình tiếp theo được trình bày.

Yếu tố đ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 phải do JavaScript hỗ trợ, chẳng hạn như hộp đánh dấu, nút chọn và các chế độ điều khiển 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.

Tương tác xảy 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 không biết được nội dung trong iframe hay không, do đó, 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ụ: thao tác nhấn phím bao gồm các sự kiện keydown, keypresskeyup. Hoạt động tương tác nhấn bao gồm pointeruppointerdown sự kiện. 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.

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. Đầ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 bắt đầu nhiều công việc hơn cho đến khi một khung khác được hiển thị dưới dạng kết quả.
Mô tả quá trình 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 nhận thông tin đầu vào khi người dùng nhấp vào nút chuột. Tuy nhiên, trước khi nhả nút chuột, một khung sẽ được trình bày. 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 được hiển thị.

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 Độ trễ đầu vào đầ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ả 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à hai loại chỉ số phản hồi khác nhau. 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 truy cập bởi một bot, 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 viết tập lệnh để tương tác với trang.

Cách đo lường INP

INP có thể được đo lường cả trong hiện trường và trong phòng thí nghiệm, ở phạm vi mà bạn có thể mô phỏng các 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. Tốt nhất là dữ liệu trường từ công cụ Giám sát người dùng thực (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 làm nổi bật tương tác cụ thể nào đã gây ra chính giá trị INP đó, cho dù 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 điểm có giá trị khác có thể giúp bạn xác định phần nào của 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 về INP thông qua CrUX trong PageSpeed Insights (và các Chỉ số quan trọng chính khác của 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 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 tương tác riêng lẻ sẽ giúp bạn tránh được tình trạng 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, hoàn toàn có thể là bạn không có dữ liệu trường. 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ùng cách mà dữ liệu thực địa có thể. 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à chỉ số proxy hợp lý cho INP, nhưng không thay thế cho INP trong và chính nó.

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 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 quá trình tải, 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 (Lượt tương tác đến nội dung hiển thị tiếp theo)

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 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ả 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

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

Để đo lường thời gian cần thiết để hiển thị nội dung đầu tiên của một trang.
Không chính xác - Cụm từ này mô tả Nội dung đầu tiên hiển thị
Để định lượng độ ổn định về hình ảnh của một trang và giảm thiểu sự thay đổi bố cục ngoài dự kiến.
Không chính xác – Thông tin này mô tả Điểm số tổng hợp về mức thay đổi bố cục
Để đánh giá thời gian cần thiết để một trang có thể tương tác đầy đủ.
Không chính xác – Trường hợp này liên quan đến Thời gian tương tác, nhưng INP đặc biệt tập trung vào khả năng phản hồi đối với hoạt động đầu vào của người dùng
Để giảm thiểu thời gian kể từ khi người dùng bắt đầu tương tác cho đến khi khung tiếp theo được hiển thị, đối với tất cả hoặc hầu hết các tương tác mà người dùng thực hiện.
Chính xác!

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.)

Nhấp bằng chuột.
Chính xác!
Cuộn trang bằng con lăn chuột hoặc bàn di chuột.
Không đúng - INP không xem xét cuộn
Nhấn vào màn hình cảm ứng.
Chính xác!
Di con trỏ chuột qua các phần tử.
Không chính xác – INP không xem là lơ lửng
Nhấn một phím trên bàn phím.
Chính xác!
Phóng to hoặc thu nhỏ trang.
Không chính xác - INP không xem xét thu phóng

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

Khoảng thời gian để trình duyệt xử lý các trình xử lý sự kiện của một tương tác.
Không chính xác – Cột này chỉ tính đến thời lượng xử lý, chứ không tính đến độ trễ đầu vào hoặc thời gian trình chiếu khung hình tiếp theo
Thời gian trung bình cần thiết để tất cả các lượt tương tác trên một trang tạo ra phản hồi bằng hình ảnh.
Không chính xác – INP tập trung vào tương tác dài nhất, không phải mức trung bình
Thời gian mà trình duyệt cần để bắt đầu xử lý các trình xử lý sự kiện được liên kết với một tương tác.
Không chính xác - Giá trị này chỉ tính đến độ trễ nhập, chứ không tính đến thời gian xử lý và hiển thị
Khoảng thời gian từ khi bắt đầu tương tác cho đến thời điểm khung hình tiếp theo được hiển thị đầy đủ.
Chính xác!

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

INP đo lường thời gian cần thiết để hiển thị nội dung đầu tiên của trang, trong khi FID đo lường khả năng phản hồi đối với hoạt động đầu vào của người dùng.
Không chính xác - Phần này mô tả Nội dung đầu tiên hiển thị, không phải INP
INP xem xét toàn bộ thời lượng của tất cả cá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.
Chính xác!
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.
Không chính xác – INP và FID là chỉ số đo lường tốc độ phản hồi của trang đối với các lượt tương tác, bất kể thời điểm xảy ra lượt tương tác
Không có khác biệt; INP và FID chỉ là hai tên khác nhau của cùng một chỉ số.
Không chính xác – Các từ khoá này có định nghĩa riêng biệt

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

Trang này đ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.
Không chính xác – INP được tự động đo lường bằng API nền tảng web và không dựa vào các trang tự báo cáo hiệu suất thông qua thư viện tuỳ chỉnh.
Không có đủ dữ liệu về lượt tương tác từ người dùng Chrome để tính giá trị INP có ý nghĩa trong tập dữ liệu CrUX.
Chính xác!
Người dùng chỉ tương tác với trang thông qua thao tác cuộn và di chuột. Các yếu tố này không được xem xét đối với INP (Lượt tương tác đến nội dung hiển thị tiếp theo).
Chính xác!
Trang này được xây dựng bằng một khung tự động tối ưu hoá cho INP, do đó, bạn không cần phải báo cáo.
Không chính xác – Khung có thể hữu ích với INP nhưng chỉ số này vẫn phù hợp và được báo cáo nếu có dữ liệu

Chiến lược hiệu quả nhất để tái tạo các tương tác chậm trong môi trường phò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.
Không chính xác – Mặc dù mạng cũng đóng vai trò quan trọng, nhưng các chức năng của thiết bị có nhiều khả năng gây ra tương tác chậm
Chỉ kiểm tra lượt tương tác sau khi trang đã tải hoàn toàn và ở trạng thái rảnh.
Không chính xác – Tùy chọn này có thể bỏ lỡ các tương tác bị chậm trong khi tả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 điểm tắc nghẽn tiềm ẩn.
Chính xác!
Tập trung vào các hoạt động tương tác phức tạp, đặc biệt mà hầu hết người dùng ít có khả năng sẽ gặp phải.
Không chính xác – Luồng người dùng phổ biến phù hợp hơn trong việc xác định các vấn đề điển hình về INP

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