Xem xu hướng tốc độ site với CrUX History API

[Nhật Quang]

Google vừa phát hành CrUX History API, cho phép xem cách tốc độ trang web thay đổi theo thời gian dựa trên dữ liệu thực tế của người dùng. Bài viết này hướng dẫn cách lấy API key, chạy script Node.js và xem các chỉ số Core Web Vitals từ CrUX.

CrUX History API là gì?​

CrUX (Chrome User Experience Report) cung cấp số liệu tốc độ trang thực tế từ người dùng trên hàng triệu website. CrUX History API cho phép bạn xem xu hướng hiệu năng của một trang hoặc một website theo thời gian, rất hữu ích để theo dõi Core Web Vitals.

Chuẩn bị API key của Google​

Để dùng API của Google bạn cần một tài khoản Google Cloud. Truy cập trang tạo credential và chọn tạo API key.

Chọn API key trong menu dropdown.

Đợi một lát sẽ hiện API key mới, sao chép lại để dùng sau.

Thiết lập project Node.js​

Dùng thư viện axios để gọi API. Sau khi cài đặt axios, sao chép mã mẫu vào file crux.js và thay PASTE_API_KEY_HERE bằng API key của bạn. Chạy script bằng lệnh:

node crux.js

Kết quả trả về là một khối JSON với dữ liệu theo tuần (mặc định trả về 40 tuần). Đọc trực tiếp JSON đôi khi khó nắm bắt — ví dụ bạn có thể tóm tắt xu hướng Largest Contentful Paint (LCP) để biết site đang nhanh lên hay chậm đi.

Xem các chỉ số Core Web Vitals​

CrUX History API hỗ trợ 6 chỉ số chính của Core Web Vitals và hiệu năng:

• Largest Contentful Paint (LCP)
• First Contentful Paint (FCP)
• First Input Delay (FID) hoặc Interaction to Next Paint (INP)
• Cumulative Layout Shift (CLS)
• Time to First Byte (TTFB)
• Tỷ lệ trải nghiệm tốt (percent good)

Bạn có thể lọc dữ liệu theo formFactor (ví dụ PHONE hoặc DESKTOP) để xem tốc độ theo thiết bị.

Lọc theo trang cụ thể và xử lý lỗi​

Nếu muốn xem dữ liệu cho một trang cụ thể, chuyển tham số origin thành url. Nếu Google không có dữ liệu cho site của bạn, hãy thêm catch handler vào yêu cầu axios để bắt lỗi và xử lý trường hợp không có dữ liệu.

Công cụ bổ trợ: DebugBear​

Nếu bạn muốn xem Core Web Vitals trong giao diện dễ đọc, DebugBear cung cấp bảng điều khiển CrUX Trends, cho phép so sánh điểm giữa các website, theo dõi theo ngành, và xem dữ liệu 75th percentile hoặc tỷ lệ trải nghiệm tốt.

Dashboard của DebugBear giúp hiển thị xu hướng hiệu năng, kiểm tra TTFB và FCP để debug, đồng thời kết hợp cả dữ liệu trường (CrUX) và kiểm tra lab hàng ngày.

Bạn có thể dùng thử DebugBear miễn phí 14 ngày để theo dõi trang của mình và đối thủ.

Nguồn: https://www.debugbear.com/blog/crux-history-api-node