Cách sử dụng API CrUX

Tìm hiểu cách sử dụng Chrome UX Report API để truy cập vào dữ liệu về trải nghiệm của người dùng thực trên hàng triệu trang web.

Rick Viscomi
Shane Exterkamp
Shane Exterkamp
X GitHub

Tập dữ liệu Báo cáo trải nghiệm người dùng trên Chrome (CrUX) cho biết trải nghiệm thực tế của người dùng Chrome trên những trang web phổ biến. Kể từ năm 2017, khi tập dữ liệu có thể truy vấn được phát hành lần đầu trên BigQuery, dữ liệu hiện trường từ CrUX đã được tích hợp vào các công cụ dành cho nhà phát triển như PageSpeed Insights và báo cáo Các chỉ số quan trọng chính của trang web của Search Console, cho phép nhà phát triển đo lường và giám sát trải nghiệm của người dùng thực. Công cụ còn thiếu bấy lâu nay là một công cụ cung cấp quyền truy cập miễn phí và theo kiểu REST vào dữ liệu CrUX theo phương thức lập trình. Để giúp thu hẹp khoảng cách đó, chúng tôi rất vui mừng thông báo việc phát hành Chrome UX Report API hoàn toàn mới!

API này được xây dựng với mục tiêu cung cấp cho nhà phát triển quyền truy cập nhanh chóng và toàn diện vào dữ liệu CrUX. CrUX API chỉ báo cáo dữ liệu trải nghiệm người dùng thực tế tại trang, không giống như PageSpeed Insights API hiện có, API này cũng báo cáo dữ liệu phòng thí nghiệm từ các quy trình kiểm tra hiệu suất của Lighthouse. CrUX API được tinh giản và có thể nhanh chóng phân phát dữ liệu trải nghiệm người dùng, nhờ đó, API này rất phù hợp với các ứng dụng kiểm tra theo thời gian thực.

Để đảm bảo nhà phát triển có quyền truy cập vào tất cả các chỉ số quan trọng nhất (Chỉ số quan trọng chính của trang web), CrUX API sẽ kiểm tra và giám sát Nội dung lớn nhất hiển thị (LCP), Lượt tương tác đến nội dung hiển thị tiếp theo (INP) và Mức thay đổi bố cục tích luỹ (CLS) ở cả cấp nguồn gốc và URL.

Vậy hãy cùng tìm hiểu cách sử dụng công cụ này!

Dùng thử API trên trang này

Hãy làm thử!

Truy vấn dữ liệu gốc

Các nguồn gốc trong tập dữ liệu CrUX bao gồm tất cả trải nghiệm cấp trang cơ bản. Ví dụ sau đây minh hoạ cách truy vấn API CrUX để lấy dữ liệu trải nghiệm người dùng của một nguồn bằng cách sử dụng curl trên dòng lệnh.

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"}'

Lệnh curl bao gồm 3 phần:

  1. Điểm cuối URL của API, bao gồm cả khoá API riêng tư của phương thức gọi.
  2. Tiêu đề Content-Type: application/json, cho biết rằng nội dung yêu cầu chứa JSON.
  3. Nội dung yêu cầu được mã hoá bằng JSON, chỉ định nguồn gốc https://web.dev.

Để làm điều tương tự trong JavaScript, hãy dùng tiện ích CrUXApiUtil. Tiện ích này sẽ thực hiện lệnh gọi API và trả về phản hồi đã giải mã (xem thêm biến thể Github của chúng tôi để biết thêm các tính năng, bao gồm cả nhật ký và hỗ trợ hàng loạt).

const CrUXApiUtil = {};
// Get your CrUX API key at https://goo.gle/crux-api-key.
CrUXApiUtil.API_KEY = '[YOUR_API_KEY]';
CrUXApiUtil.API_ENDPOINT = `https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${CrUXApiUtil.API_KEY}`;
CrUXApiUtil.query = function (requestBody) {
  if (CrUXApiUtil.API_KEY == '[YOUR_API_KEY]') {
    throw 'Replace "YOUR_API_KEY" with your private CrUX API key. Get a key at https://goo.gle/crux-api-key.';
  }
  return fetch(CrUXApiUtil.API_ENDPOINT, {
    method: 'POST',
    body: