Chúng tôi rất vui mừng khi có công cụ hỗ trợ đầu tiên cho chỉ số phản hồi đang chờ xử lý mới, Tương tác với thời gian hiển thị tiếp theo (INP). Để tìm hiểu về chỉ số này, hãy xem hướng dẫn chính thức về chỉ số INP.
Phương pháp đo lường đề xuất
Mục tiêu của việc đo lường INP là hiểu rõ tốc độ phản hồi của trang đối với hoạt động đầu vào của người dùng. Cách duy nhất để có được dữ liệu thực tế là đo lường cách trang của bạn phản hồi những người dùng thực tế truy cập vào trang web của bạn bằng cách sử dụng dữ liệu từ hiện trường.
Sau đó, việc đo lường INP trong phòng thí nghiệm sẽ giúp hiểu rõ hơn về thời gian diễn ra sự kiện và những nơi cần tối ưu hoá. Các công cụ của phòng thí nghiệm sẽ không tự động tương tác với trang. Vì vậy, chúng sẽ cần thông tin đầu vào theo cách thủ công trong khi đo lường hoặc cần được viết mã bằng một công cụ tự động hoá như Puppeteer. Khi xác định được các lượt tương tác chính trong hành trình điển hình của người dùng, bạn có thể thử xác định vấn đề hoặc viết tập lệnh bằng các lượt tương tác chính và đưa vào các thử nghiệm CI để ngăn chặn sự hồi quy.
Khám phá những gì người dùng thực của bạn đang trải qua (dữ liệu thực tế)
Truy cập PageSpeed Insights
PageSpeed Insights lấy dữ liệu thực tế từ API Báo cáo trải nghiệm người dùng của Chrome (CrUX) và cung cấp thông tin tổng quan nhanh về hiệu suất của trang cũng như nguồn gốc của bạn trong 28 ngày trước. Dữ liệu này hiện bao gồm INP:
Hãy dùng thử tại PageSpeed Insights.
Thu thập các giá trị INP của riêng bạn từ trường
Nếu bạn muốn tự thu thập dữ liệu INP cho một trang web, cách dễ nhất để làm việc này là sử dụng thư viện web-vitals. Thư viện này hiện có hỗ trợ đầy đủ INP trong bản phát hành beta.
import {onINP} from 'web-vitals';
onINP(({value}) => {
// Log the value to the console, or send it to your analytics provider.
console.log(value);
});
Đọc thêm về web-vitals và cách đo lường trong bảng điều khiển Công cụ cho nhà phát triển.
Tiện ích Các chỉ số quan trọng về trang web của Chrome
Tiện ích Các chỉ số quan trọng về trang web cung cấp thông tin tổng quan về trải nghiệm trên trang của người dùng (từ CrUX API) và các giá trị theo thời gian thực của CWV, cũng như các chỉ số chính về lượt truy cập hiện tại vào trang.
Cài đặt tiện ích Các chỉ số quan trọng về trang web cho Chrome.
Chẩn đoán vấn đề về hiệu suất (dữ liệu phòng thí nghiệm)
Sử dụng luồng người dùng Lighthouse
Chế độ khoảng thời gian mới trong Bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển cho phép bạn khởi động Lighthouse, tương tác với trang thử nghiệm theo cách bạn muốn và sau đó nhận báo cáo về những gì đã xảy ra trong thời gian đó. Báo cáo này hiện bao gồm INP và quy trình kiểm tra nhằm giúp chẩn đoán mọi vấn đề về tốc độ phản hồi.
Cùng một chuỗi tương tác có thể được tự động hoá bằng cách sử dụng luồng người dùng Lighthouse. INP hiện có trong luồng người dùng kể từ Lighthouse 9.6.
Thông tin chi tiết về khả năng sử dụng công cụ
- Báo cáo trải nghiệm người dùng trên Chrome (CrUX)
- BigQuery: INP hiện được cung cấp dưới dạng
interaction_to_next_paint - API CrUX: INP hiện có dưới dạng
interaction_to_next_paint - Trang tổng quan CrUX: Bao gồm dữ liệu INP
- BigQuery: INP hiện được cung cấp dưới dạng
- PageSpeed Insights
- pagespeed.web.dev: Dữ liệu trường INP cấp trang và cấp gốc từ API CrUX sẽ hiển thị dưới dạng "Lượt tương tác với thời gian hiển thị tiếp theo"
- API PSI: INP hiện có dưới dạng
INTERACTION_TO_NEXT_PAINT_MS
- Thư viện JS
web-vitalsweb-vitalscó hỗ trợ INP
- Tiện ích Các chỉ số quan trọng về trang web của Chrome
- Bao gồm dữ liệu trường INP và dữ liệu đo lường INP cục bộ nếu có từ API CrUX
- Lighthouse
- Bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển: Phép đo INP có sẵn ở chế độ "khoảng thời gian" trong Chrome Canary (104)
- Mô-đun npm Lighthouse: Phép đo INP có sẵn trong các khoảng thời gian (sử dụng puppeteer cho đầu vào tổng hợp)
Công việc trong tương lai và mời ý kiến phản hồi
Trong tương lai, các nhóm công cụ Chrome sẽ tiếp tục đầu tư vào các khả năng gỡ lỗi và đề xuất tối ưu hoá cho INP.
Nếu bạn có ý kiến phản hồi về bất cứ điều gì từ mức độ hữu ích của chỉ số hoặc để dễ dàng đo lường, vui lòng gửi chỉ số đó đến nhóm Google-vitals-feedback.