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