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

Lượt tương tác với thời gian hiển thị tiếp theo (INP) là một chỉ số Chỉ số quan trọng chính của trang web ổn định, giúp đánh giá khả năng phản hồi của trang bằng cách sử dụng dữ liệu từ API Thời gian sự kiện. INP theo dõi độ trễ của tất cả các lượt tương tác nhấp, nhấn và bàn phím với một trang trong suốt thời gian hoạt động và báo cáo thời lượng dài nhất, bỏ qua các điểm ngoại lai. INP thấp có nghĩa là trang luôn có thể phản hồi nhanh với phần lớn tương tác của người dùng.

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 lượt tương tác, trình duyệt sẽ hiển thị phản hồi trực quan trong khung hình tiếp theo mà trình duyệt kết xuất để cho thấy hoạt động tương tác đó đã thành công. Ví dụ: ứng dụng này có thể đưa ra ý kiến phản hồi về những nội dung sau:

  • Liệu một 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 vào không.
  • Liệu trình đơn điều hướng trên thiết bị di động đã mở hay chưa.
  • Liệu nội dung của thông tin đăng nhập có đang được máy chủ xác thực hay không.

Một số tương tác thường 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, bạn cần phải nhanh chóng đưa ra một số phản hồi trực quan ban đầu để cho người dùng biết điều gì đó đang xảy ra. Thời gian cho đến lần hiển thị tiếp theo là cơ hội sớm nhất để làm điều 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 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), nhưng 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 sẽ khiến người dùng nghĩ 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à giảm thiểu thời gian từ khi người dùng bắt đầu một tương tác cho đến khi khung 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.

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 tác vụ 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 dữ liệu đầu vào bị trễ, dẫn đến việc đàn xếp mở và đóng đột ngột. Ở bên phải, 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ố.
Lưu ý 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ễ thấp nhất được báo cáo là INP. Tuy nhiên, đối với những trang có số lượng lớn lượt tương tác, các tình trạng trục trặc ngẫu nhiên có thể dẫn đến một lượt tương tác có độ trễ 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à đánh giá chính xác hơn khả năng phản hồi thực tế cho 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. Vì phần lớn các trải nghiệm trên trang không có trên 50 lượt tương tác, nên trình duyệt hầu như vẫn báo cáo lượt tương tác kém nhất. Sau đó, hệ thống phân vị thứ 75 của tổng số lượt xem trang sẽ được báo cáo như thường lệ, giúp loại bỏ các điểm ngoại lai để mang lại giá trị thể hiện chính xác hơn trải nghiệm chung của người dùng.

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 thao tác logic của người dùng. Ví dụ: các lượt 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ư 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 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 thời điểm khung hình tiếp theo hiển thị phản hồi bằng hình ảnh.

Điểm chính: Để biết thêm chi tiết về cách đo lường INP, hãy xem phần "Nội dung trong một lượt tương tác?".

Điểm INP cao là gì?

Để đả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 bằng hoặc nhỏ hơn 200 mili giây có nghĩa là trang của bạn có khả năng phản hồi tốt.
  • INP nằm trong khoảng từ 200 mili giây đến 500 mili giây đồng nghĩa với việc trang của bạn cần cải thiện.
  • INP lớn hơn 500 mili giây có nghĩa là trang của bạn 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à những giá trị còn lại cần cải thiện.
Giá trị INP tốt không được vượt quá 200 mili giây. Giá trị kém lớn hơn 500 mili giây.

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 sẽ kéo dài 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. Sau đó, trình xử lý sự kiện của hoạt động tương tác sẽ chạy và một độ trễ khác xảy ra trước khi khung hình tiếp theo được hiển thị.

Yếu tố thúc đẩy tương tác chính 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ế độ điều khiển không do JavaScript cung cấp, chẳng hạn như các hộp đánh dấu, nút chọn và các chế độ điều khiển do CSS cung cấp.

Đối với mục đích của INP, chỉ các loại tương tác sau đây được quan sát thấy:

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

Điểm chính: Việc di chuột và cuộn không ảnh hưởng đến INP. Tuy nhiên, thao tác cuộn bằng bàn phím (phím cách, page up, page Down, v.v.) liên quan đến thao tác nhấn phím, có thể kích hoạt các sự kiện khác mà INP đo lường. Mọi thao tác cuộn kết quả đều không được tính vào phép tính INP.

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 một video được nhúng. Do người dùng cuối không biết phần nào của trang nằm trong iframe, nên bạn cần phải đo lường INP trong iframe để đo chính xác INP trên toàn bộ trang. Tuy nhiên, các API Web JavaScript không có quyền truy cập vào nội dung iframe và có thể không đo lường được INP trong iframe. Điều này cho thấy 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, còn các lượt tương tác khi nhấn bao gồm 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 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.
Khi người dùng nhấn nút chuột để nhấp, trình duyệt sẽ xử lý hoạt động tương tác và hiển thị một khung phản hồi bằng hình ảnh. Khi người dùng thả nút chuột, một loạt trình xử lý sự kiện khác sẽ chạy trước khi trình duyệt có thể hiển thị một khung khác.

INP được tính khi người dùng rời khỏi trang, nhờ đó, chỉ có 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 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?

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ề mức độ 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 xem xét tất cả hoạt động tương tác trang, bắt đầu từ độ trễ đầu vào, cho đế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 vẽ khung tiếp theo.

Sự khác biệt này đồng nghĩa với việc cả INP và FID đều là hai loại chỉ số mức độ 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, 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 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 đã tải, nhưng người dùng chưa bao giờ tương tác với trang.
  • 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 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 INP cả ở trường và trong phòng thí nghiệm bằng nhiều công cụ.

Điểm chính: Cách tốt nhất để đo lường INP của trang web là thu thập chỉ số từ những người dùng thực tế tại trường. Nếu đã quen với việc dựa vào dữ liệu phòng thí nghiệm để đánh giá hiệu suất, bạn nên đọc bài viết Tại sao dữ liệu phòng thí nghiệm và dữ liệu thực địa có thể khác nhau (và việc cần làm).

Trên thực địa

Lý tưởng nhất là hành trình tối ưu hoá INP bắt đầu từ dữ liệu thực địa. Hơn hết, dữ liệu thực tế của 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 cung cấp dữ liệu bối 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 trường INP thông qua CrUX trong PageSpeed Insights, cùng với dữ liệu trên Các chỉ số quan trọng về trang web khác. Ít nhất, bạn có thể xem được thông tin ở cấp nguồn gốc về INP của trang web, nhưng trong một số trường hợp, bạn cũng có thể nhận dữ liệu ở cấp trang.

Tuy nhiên, mặc dù CrUX có thể cho bạn biết rằng một vấn đề ở cấp độ cao, nhưng thường không cung cấp đủ thông tin để giúp bạn hiểu toàn bộ vấn đề. Một giải pháp rum có thể giúp bạn tìm hiểu 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 xảy ra tương tác chậm. Việc có thể phân bổ INP cho từng tương tác giúp 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 kiểm thử trong phòng thí nghiệm sau khi có dữ liệu thực tế cho thấy bạn 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à hoạt động tương tác kiểm thử trong quá trình này, 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 hoạt động 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

Hãy xem bộ sưu tập hướng dẫn tối ưu hoá INP của chúng tôi để được hướng dẫn về cách xác định các tương tác chậm trong trường và sử dụng dữ liệu phòng thí nghiệm để 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 phần định nghĩa của chính 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ể hiển thị dưới dạng mức độ cải thiện hoặc mứ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ý 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á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ó ý kiến phản hồi trên web.