Hướng dẫn này giới thiệu điểm cuối API Lịch sử Báo cáo trải nghiệm người dùng của Chrome (CrUX), điểm cuối này cung cấp dữ liệu hiệu suất web theo chuỗi thời gian. Dữ liệu này cập nhật hằng tuần và cho phép bạn xem nhật ký trong khoảng 6 tháng, với 25 điểm dữ liệu cách nhau mỗi tuần.
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, giờ đây, bạn có thể xem nhanh cả dữ liệu gần đây nhất và những gì đã xảy ra trước đó. Điều này khiến đây trở thành một công cụ mạnh mẽ để xem các thay đổi của trang web theo thời gian.
Truy vấn API CrUX hằng ngày
Để tóm tắt nội dung của một bài viết trước đó về API CrUX, bạn có thể xem ảnh chụp nhanh về dữ liệu thực tế của một nguồn 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 }
}
}
}
Dữ liệu tổng quan nhanh này bao gồm các giá trị mật độ của biểu đồ và giá trị phân vị cho khoảng thời gian thu thập cụ thể là 28 ngày, trong trường hợp này là từ ngày 27/12/2022 đến ngày 23/1/2023.
Truy vấn API Nhật ký CrUX
Để gọi điểm cuối của 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ư cho cuộc 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 câu trả lời là tương tự nhau, nhưng sẽ có rất nhiều dữ liệu khác! Thay vì một điểm dữ liệu duy nhất, giờ đây sẽ có chuỗi thời gian cho các trường chứa giá trị mật độ của phân vị thứ 75 (p75) và biểu đồ.
{
"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 từ 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 độ của kỳ thu thập 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 kỳ kết thúc vào tuần sau đó.
Nói cách khác, khi diễn giải các mục chuỗi thời gian gần đây nhất trong ví dụ về https://web.dev, chúng tôi nhận thấy 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ị trong khoảng từ 2.500 mili giây đến 4.208,4 mili giây và lớn hơn 0,4 mili giây
Tương tự, có một chuỗi thời gian cho các giá trị p75: LCP p75 cho 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 theo 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 trong số này là các ngày thứ Bảy cách nhau 7 ngày nên thời gian thu thập là 6 tháng.
Trong bất kỳ phản hồi nhất định nào, độ dài chuỗi thời gian cho mật độ thùng biểu đồ và đối với giá trị p75 sẽ giống hệt như độ dài của mảng trong trường collectionPeriods: Có sự 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 nguồn gốc, API Lịch sử CrUX cho phép truy cập vào dữ liệu trong quá khứ ở cấp trang. Mặc dù trước đây dữ liệu cấp nguồn gốc có sẵn bằng tập dữ liệu CrUX trên BigQuery (hoặc trên Trang tổng quan CrUX), 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 trước đây.
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 theo các yêu cầu tương tự như phần còn lại của CrUX. Vì vậy, các trang cụ thể có thể không có đầy đủ 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. Nguyên nhân của sự khác biệt này là do mật độ của biểu đồ luôn là số, trong khi 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 số).
Trực quan hoá dữ liệu
Có thể bạn sẽ thắc mắc tại sao dữ liệu lại được định hình theo cách này? Chúng tôi thấy rằng điều này giúp việc vẽ biểu đồ trở nên dễ dàng hơn. Ví dụ: đây là biểu đồ cho các giá trị p75 đối với mục Lượt tương tác với nội dung hiển thị tiếp theo (INP) đối với 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 dựa trên chuỗi thời gian p75s, còn trục x là thời gian, giá trị này được thiết lập là lastDate cho mỗi giai đoạn thu thập.
Đây là một đồ thị cho chuỗi thời gian của biểu đồ tần suất—được gọi là biểu đồ tri-bin—vì các biểu đồ này có ba thùng.
Trục x được thiết lập dưới dạng 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 tải trang rơi vào 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 chóng. Trong một biểu đồ, bạn có thể tương đối dễ dàng để thêm nhiều chỉ số hoặc hiển thị các đường cho cả PHONE và DESKTOP. Biểu đồ tri-bin cho biết sự phân phối các giá trị chỉ số được đo lường trong mỗi giai đoạn thu thập.
Ví dụ: mặc dù biểu đồ p75 cho thấy https://web.dev có các giá trị INP gần như chấp nhận được trong giai đoạn quan sát, nhưng biểu đồ tri-bin cho thấy rằng đối với một phần nhỏ các lượt tải trang, INP thực sự kém. Trong cả hai biểu đồ, tương đối dễ dàng suy luận rằng có sự sụt giảm hiệu suất 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 từ trong trình duyệt. CrUX History API Colab (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 thùng, 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à một lập trình viên để sử dụng cách này, nhưng bạn chắc chắn có thể nhìn vào mã Python và sửa đổi nó thành một điều gì đó tuyệt vời! Hãy thưởng thức và đừng ngần ngại cho biết ý kiến phản hồi về những gì bạn tìm thấy!
Tất nhiên, bạn không bị giới hạn ở 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, bạn có thể truy vấn API bằng bất kỳ công nghệ nào.
Kết luận
Trước khi chúng tôi ra mắt điểm cuối API Lịch sử CrUX, chủ sở hữu trang web chỉ được cung cấp thông tin trong quá khứ mà họ có thể thu thập được qua CrUX. Bạn có thể xem dữ liệu hằng tháng ở cấp nguồn gốc trên BigQuery và Trang tổng quan CrUX, nhưng không có dữ liệu hằng tuần và 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 cách sử dụng API hằng ngày, nhưng thường thì nhu cầu này chỉ được phát hiện sau khi các chỉ số hồi quy.
Hy vọng rằng khi ra mắt API Nhật ký CrUX, chủ sở hữu trang web sẽ hiểu rõ hơn về các chỉ số liên quan đến việc thay đổi trang web và đóng vai trò là công cụ chẩn đoán để xác định thời điểm phát sinh vấn đề. Nếu đang sử dụng API mới này, bạn có thể tham khảo ý kiến phản hồi tại nhóm trên Google Groups (Thảo luận) về Báo cáo trải nghiệm người dùng của Chrome.
Xác nhận
Hình ảnh chính của Dave Herring trên Unsplash