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.
Giờ đây, khi được sử dụng cùng với các bản cập nhật hằng ngày từ điểm cuối CrUX API ban đầu, bạn hiện có thể xem nhanh cả dữ liệu gần đây nhất lẫn dữ liệu đã xảy ra trước đó. Nhờ đó, công cụ này trở thành một công cụ mạnh mẽ giúp bạn thấy được các thay đổi của 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, hiện có chuỗi thời gian cho các trường chứa giá trị phân vị thứ 75 (p75) và biểu đồ mật độ.
{
"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ố Nội dung lớn nhất hiển thị (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 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, trong quá trình diễn giải các mục chuỗi thời gian gần đây nhất trong ví dụ này cho https://web.dev, chúng tôi nhận thấy rằng từ ngày 14 tháng 8 năm 2022 cho đến ngày 10 tháng 9 năm 2022, 91,87% lượt tải trang có giá trị LCP nhỏ hơn 2500 mili giây, 5,27% có giá trị trong khoảng từ 2500 mili giây đến 4008% và có giá trị lớn hơn 0,2 mili giây, 0,4%
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 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 lớn hơ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
Cũng như dữ liệu cấp độ gốc, CrUX History API cho phép truy cập vào dữ liệu trong quá khứ ở cấp trang. 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 đó, một số 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 các phân vị 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ể hỏi, 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 đồ dạng đường này, mỗi giá trị trên trục y là một giá trị p75 trong chuỗi thời gian p75s, còn 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 đồ của chuỗi thời gian thùng biểu đồ – được gọi là biểu đồ ba thùng – vì những biểu đồ này có 3 thùng.
Trục x được thiết lập thành 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 rơi vào một phạm vi cụ thể cho chỉ số INP, được thể hiện qua biểu đồ thanh xếp chồng. Biểu đồ p75 cung cấp thông tin tổng quan nhanh. 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 đồ 3 thùng cho biết sự phân bổ của các giá trị chỉ số được đo lường trong từng 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 ngay 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 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. Dựa trên JSON, điểm cuối HTTP mà API có thể truy vấn được từ bất kỳ công nghệ nào.
Kết luận
Trước khi điểm cuối CrUX History API ra mắt, chủ sở hữu trang web không được phép cung cấp nhiều thông tin trong quá khứ mà CrUX có thể thu thập được. 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 thấy 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, chúng tôi rất mong nhận được ý kiến phản hồi tại nhóm Google Báo cáo trải nghiệm người dùng Chrome (Thảo luận).
Lời cảm ơn
Hình ảnh chính của Dave Herring trên Unsplash