Hướng dẫn này giới thiệu điểm cuối API Nhật ký báo cáo trải nghiệm người dùng trên Chrome (CrUX). Điểm cuối này cung cấp chuỗi thời gian của dữ liệu hiệu suất web. Dữ liệu này được cập nhật hằng tuần và cho phép bạn xem khoảng 6 tháng dữ liệu trước đó, với 25 điểm dữ liệu cách nhau một tuần.
Khi sử dụng cùng với thông tin cập nhật hằng ngày từ điểm cuối API CrUX ban đầu, giờ đây, bạn có thể nhanh chóng xem cả dữ liệu mới nhất và những gì đã xảy ra trước đó. Đây là một công cụ mạnh mẽ để xem các thay đổi trên trang web theo thời gian.
Dùng thử API trên trang này
Truy vấn API CrUX hằng ngày
Để tóm tắt bài viết trước về API CrUX, bạn có thể xem nhanh dữ liệu trường cho một nguồn gốc cụ thể theo cách sau:
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" --header 'Content-Type: application/json' --data '{"origin": "https://web.dev"}'
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogram": [{
"start": 0, "end": 2500, "density": 0.9192
}, {
"start": 2500, "end": 4000, "density": 0.0513
}, {
"start": 4000, "density": 0.0294
}],
"percentiles": {
"p75": 1303
}
}
// ...
},
"collectionPeriod": {
"firstDate": { "year": 2022, "month": 12, "day": 27 },
"lastDate": { "year": 2023, "month": 1, "day": 23 }
}
}
}
Bản tổng quan nhanh này bao gồm các giá trị mật độ biểu đồ và giá trị phân vị cho một khoảng thời gian thu thập dữ liệu cụ thể là 28 ngày, trong trường hợp này là từ ngày 27 tháng 12 năm 2022 đến ngày 23 tháng 1 năm 2023.
Truy vấn API nhật ký CrUX
Để gọi điểm cuối nhật ký, hãy thay đổi queryRecord trong URL thành queryHistoryRecord trong lệnh curl. Bạn có thể sử dụng cùng một khoá API CrUX như trong lệnh gọi trước.
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"origin": "https://web.dev"}'
Hình dạng tổng thể của một phản hồi cũng tương tự như vậy, nhưng có nhiều dữ liệu hơn! Thay vì một điểm dữ liệu duy nhất, giờ đây, bạn có các chuỗi thời gian cho các trường chứa giá trị mật độ biểu đồ và phân vị thứ 75 (p75).
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogramTimeseries": [{
"start": 0, "end": 2500, "densities": [
0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187
]
}, {
"start": 2500, "end": 4000, "densities": [
0.0521, 0.0513, 0.0518, 0.0518, 0.0526, 0.0527
]
}, {
"start": 4000, "densities": [
0.0288, 0.0282, 0.0286, 0.0285, 0.0290, 0.0285
]
}
],
"percentilesTimeseries": {
"p75s": [
1362, 1352, 1344, 1356, 1366, 1377
]
}
}
// ...
},
"collectionPeriods": [{
"firstDate": { "year": 2022, "month": 7, "day": 10 },
"lastDate": { "year": 2022, "month": 8, "day": 6 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 17 },
"lastDate": { "year": 2022, "month": 8, "day": 13 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 24 },
"lastDate": { "year": 2022, "month": 8, "day": 20 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 31 },
"lastDate": { "year": 2022, "month": 8, "day": 27 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 7 },
"lastDate": { "year": 2022, "month": 9, "day": 3 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 14 },
"lastDate": { "year": 2022, "month": 9, "day": 10 }
}
]
}
}
Trong ví dụ này, chuỗi thời gian densities cho nhóm 0 đến 2500 mili giây của chỉ số Thời gian hiển thị nội dung lớn nhất (LCP) là [0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187].. Mỗi mật độ này được quan sát trong mục nhập collectionPeriods tương ứng. Ví dụ: mật độ thứ năm, 0,9183, là mật độ cho khoảng thời gian thu thập dữ liệu thứ năm, kết thúc vào ngày 3 tháng 9 năm 2022 và 0,9187 là mật độ trong khoảng thời gian kết thúc vào tuần sau đó.
Nói cách khác, khi diễn giải các mục thời gian gần đây nhất trong ví dụ về https://web.dev, chúng tôi nhận thấy rằng từ ngày 14 tháng 8 năm 2022 đến ngày 10 tháng 9 năm 2022, 91, 87% lượt tải trang có giá trị LCP nhỏ hơn 2.500 mili giây, 5, 27% có giá trị từ 2.500 mili giây đến 4.000 mili giây và 2, 85% có giá trị lớn hơn 4.000 mili giây.
Tương tự, có một chuỗi thời gian cho các giá trị p75: LCP p75 từ ngày 14 tháng 8 năm 2022 đến ngày 10 tháng 9 năm 2022 là 1377. Điều này có nghĩa là trong khoảng thời gian thu thập dữ liệu này, 75% trải nghiệm người dùng có LCP dưới 1377 mili giây và 25% trải nghiệm người dùng có LCP trên 1377 mili giây.
Mặc dù ví dụ chỉ liệt kê 6 mục nhập chuỗi thời gian và khoảng thời gian thu thập, nhưng phản hồi từ API cung cấp 25 mục nhập chuỗi thời gian; vì ngày kết thúc của mỗi khoảng thời gian thu thập này là thứ Bảy cách nhau 7 ngày, nên khoảng thời gian này kéo dài 6 tháng.
Trong bất kỳ phản hồi nào, độ dài của chuỗi thời gian cho mật độ ô biểu đồ và cho các giá trị p75 sẽ giống hệt với độ dài của mảng trong trường collectionPeriods: Có một mối tương ứng một với một dựa trên chỉ mục vào các mảng này.
Truy vấn dữ liệu ở cấp trang
Ngoài dữ liệu cấp nguồn gốc, API Nhật ký CrUX còn cho phép truy cập vào dữ liệu cấp trang trong quá khứ. Mặc dù trước đây bạn có thể sử dụng tập dữ liệu CrUX trên BigQuery (hoặc sử dụng Bảng điều khiển CrUX) để xem dữ liệu cấp nguồn gốc, nhưng dữ liệu trong quá khứ ở cấp trang chỉ có sẵn nếu các trang web tự thu thập và lưu trữ dữ liệu. API mới hiện đã mở khoá dữ liệu cấp trang trong quá khứ đó.
Bạn có thể truy vấn dữ liệu cấp trang theo cách tương tự, nhưng sử dụng url thay vì origin trong tải trọng:
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"url": "https://web.dev/blog/"}'
Dữ liệu trong quá khứ ở cấp trang (và cấp nguồn gốc) phải tuân thủ các yêu cầu về điều kiện giống nhau như phần còn lại của CrUX. Do đó, các trang cụ thể có thể không có bản ghi đầy đủ về dữ liệu trong quá khứ. Trong những trường hợp này, dữ liệu "bị thiếu" sẽ được biểu thị bằng "NaN" cho mật độ histogramTimeseries và null cho percentilesTimeseries. Lý do cho sự khác biệt này là mật độ biểu đồ luôn là số, trong khi tỷ lệ phần trăm có thể là số hoặc chuỗi (CLS sử dụng chuỗi, ngay cả khi chúng trông giống như số).
Trực quan hoá dữ liệu
Vậy bạn có thể thắc mắc tại sao dữ liệu lại có hình dạng như vậy? Chúng tôi nhận thấy việc này giúp bạn dễ dàng lập biểu đồ hơn. Ví dụ: sau đây là biểu đồ cho các giá trị p75 của chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP) cho https://web.dev:
Trong biểu đồ đường này, mỗi giá trị trên trục y là giá trị p75 từ chuỗi thời gian p75s và trục x là thời gian, được thiết lập là lastDate cho mỗi khoảng thời gian thu thập.
Dưới đây là biểu đồ cho chuỗi thời gian của vùng chứa biểu đồ dạng thanh (còn gọi là biểu đồ ba vùng chứa) vì các biểu đồ dạng thanh này có ba vùng chứa.
Trục x được thiết lập là lastDate cho mỗi khoảng thời gian thu thập. Tuy nhiên, lần này, trục y là tỷ lệ phần trăm số lượt tải trang nằm trong một phạm vi cụ thể cho chỉ số INP, được thể hiện thông qua biểu đồ thanh xếp chồng. Biểu đồ p75 cung cấp thông tin tổng quan nhanh và trong một biểu đồ, bạn có thể dễ dàng thêm nhiều chỉ số hoặc hiển thị các đường cho cả PHONE và DESKTOP. Biểu đồ ba ô cho biết mức phân phối của các giá trị chỉ số được đo lường trong mỗi khoảng thời gian thu thập.
Ví dụ: mặc dù biểu đồ p75 cho thấy https://web.dev có giá trị INP gần như chấp nhận được trong khoảng thời gian quan sát, nhưng biểu đồ ba ngăn cho thấy rằng đối với một phần nhỏ số lượt tải trang, INP thực sự kém. Trong cả hai biểu đồ, bạn có thể dễ dàng suy luận rằng hiệu suất đã bị hồi quy bắt đầu từ cuối tháng 10 và được khắc phục vào giữa tháng 11.
Để tự tạo các biểu đồ như vậy, chúng tôi đã tạo một Colab mẫu. Colab (hay còn gọi là "Colaboratory") cho phép bạn viết và thực thi Python trong trình duyệt. Colab API nhật ký CrUX (nguồn) sử dụng Python để thực hiện lệnh gọi đến API và lập biểu đồ dữ liệu.
Colab này cho phép bạn tạo biểu đồ p75, biểu đồ ba ngăn, nhận dữ liệu ở dạng bảng và xem cặp yêu cầu và phản hồi cho API CrUX bằng cách điền vào một biểu mẫu ngắn. Bạn không cần phải là lập trình viên để sử dụng tính năng này — nhưng chắc chắn bạn có thể xem mã Python và sửa đổi mã đó thành một thứ tuyệt vời! Hãy tận hưởng và đừng ngại đưa ra ý kiến phản hồi về những gì bạn tìm thấy!
Tất nhiên, bạn không chỉ có thể sử dụng Colab hoặc Python và đây chỉ là một ví dụ về cách sử dụng API mới này. Là một điểm cuối HTTP dựa trên JSON, API này có thể được truy vấn từ bất kỳ công nghệ nào.
Kết luận
Trước khi điểm cuối API Nhật ký CrUX ra mắt, chủ sở hữu trang web bị hạn chế về thông tin trong quá khứ mà họ có thể lấy từ CrUX. Bạn có thể sử dụng BigQuery và Trang tổng quan CrUX để xem dữ liệu hằng tháng ở cấp nguồn gốc, nhưng không thể xem dữ liệu hằng tuần cũng như dữ liệu trong quá khứ ở cấp trang. Chủ sở hữu trang web có thể tự ghi lại dữ liệu này bằng API hằng ngày, nhưng thường thì họ chỉ phát hiện ra nhu cầu này sau khi các chỉ số bị hồi quy.
Chúng tôi hy vọng rằng việc ra mắt API Nhật ký CrUX này sẽ giúp chủ sở hữu trang web hiểu rõ hơn về các chỉ số trang web đang thay đổi và là một công cụ chẩn đoán khi có vấn đề. Nếu bạn đang sử dụng API mới, vui lòng gửi ý kiến phản hồi tại nhóm Google Chrome UX Report (Discussions).
Lời cảm ơn
Hình ảnh chính của Dave Herring trên Unsplash