Chúng tôi rất vui mừng khi có vòng đầu tiên hỗ trợ công cụ cho chỉ số mới về khả năng phản hồi đang chờ xử lý, đó 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.
Đề xuất về việc đo lường
Mục tiêu của việc đo lường INP là để hiểu được 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 để thu thập dữ liệu thực tế là đo lường cách trang của bạn phản hồi cho người dùng thực truy cập vào trang web của bạn bằng dữ liệu thực tế.
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à những điểm 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, bạn cần nhập dữ liệu theo cách thủ công trong khi đo lường hoặc cần viết tập lệnh cho các công cụ này 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ử 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 các bài kiểm thử CI để ngăn chặn tình trạng hồi quy.
Khám phá trải nghiệm của người dùng thực (dữ liệu thực tế)
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 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ại PageSpeed Insights.
Thu thập các giá trị INP của riêng bạn từ dữ liệu thực tế
Nếu bạn muốn tự thu thập dữ liệu INP cho một trang web, thì 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 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 DevTools.
Tiện ích Các chỉ số quan trọng về trang web của Chrome
Tiện ích Web Vitals 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ừ API CrUX) và các giá trị theo thời gian thực của CWV 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 phòng thí nghiệm)
Sử dụng Luồng người dùng trong Lighthouse
Chế độ khoảng thời gian mới trong Bảng điều khiển Lighthouse trong DevTools cho phép bạn khởi động 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 cả INP và một bản 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 lượt tương tác bằng cách sử dụng luồng người dùng trong Lighthouse. INP có trong luồng người dùng kể từ Lighthouse 9.6.
Thông tin chi tiết về tính khả dụng của công cụ
- Báo cáo trải nghiệm người dùng trên Chrome (CrUX)
- BigQuery: INP có dưới dạng
interaction_to_next_paint - API CrUX: INP có dưới dạng
interaction_to_next_paint - Bảng điều khiển CrUX: Bao gồm dữ liệu INP
- BigQuery: INP có dưới dạng
- PageSpeed Insights
- pagespeed.web.dev: Dữ liệu thực tế INP ở cấp trang và cấp nguồn gốc từ API CrUX xuất hiện dưới dạng 'Lượt tương tác đến nội dung hiển thị tiếp theo'
- API PSI: INP có dưới dạng
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsThư viện JSweb-vitalsbao gồm hỗ trợ INP
- Tiện ích Chrome Web Vitals
- Bao gồm cả dữ liệu thực tế INP và kết quả đo lường INP cục bộ khi có từ API CrUX
- Lighthouse
- Bảng điều khiển Lighthouse trong DevTools: Kết quả đo lường INP có ở chế độ "khoảng thời gian" trong Chrome Canary (104)
- Mô-đun Lighthouse npm: Kết quả đo lường INP có trong khoảng thời gian (sử dụng puppeteer cho hoạt động đầu vào tổng hợp)
Công việc trong tương lai và yêu cầu phản hồi
Trong tương lai, 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 cứ điều gì, từ mức độ hữu ích của chỉ số đến mức độ dễ dàng đo lường, vui lòng gửi ý kiến phản hồi đó đến nhóm trên Google Groups web-vitals-feedback.