Đo lường Các chỉ số quan trọng chính của trang web bằng PageSpeed Insights API và Chrome UX (CrUX) Report API

1. Trước khi bắt đầu

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách đo lường Chỉ số quan trọng chính của trang web bằng PageSpeed Insights API và CrUX API.

Cả hai API này đều trả về dữ liệu giống nhau về Các chỉ số quan trọng về trang web, nhưng mỗi API đều mang lại những lợi ích riêng biệt. Ngoài dữ liệu CrUX từ thực tế, API PageSpeed Insights cũng cung cấp dữ liệu từ Lighthouse. Đây là công cụ nguồn mở và tự động của Google, dùng để kiểm tra các trang web và đề xuất cách cải thiện những trang web đó. CrUX API không cung cấp dữ liệu Lighthouse nên sẽ thực thi nhanh hơn.

Google đề xuất bạn đo lường Các chỉ số quan trọng chính của trang web trên cả thiết bị di động và máy tính. Các chỉ số quan trọng về trang web bao gồm 3 chỉ số áp dụng cho tất cả các trang web và cung cấp cho bạn thông tin chi tiết quan trọng về trải nghiệm người dùng:

• Thời gian hiển thị nội dung lớn nhất (LCP). Đo lường hiệu suất tải và phải diễn ra trong vòng 2,5 giây kể từ khi trang bắt đầu tải.
• Thời gian phản hồi lần tương tác đầu tiên (FID). Đo lường khả năng tương tác và phải diễn ra trong vòng 100 mili giây.
• Điểm số tổng hợp về mức thay đổi bố cục (CLS). Đo lường độ ổn định về hình ảnh và phải nằm trong khoảng 0,1.

Điều kiện tiên quyết

• Bài viết về Các chỉ số quan trọng về trang web
• Kiến thức cơ bản về dòng lệnh
• Định nghĩa bài viết về ngưỡng chỉ số quan trọng chính của trang web

Kiến thức bạn sẽ học được

• Đo lường Các chỉ số quan trọng chính của trang web bằng PageSpeed Insights API.
• Đo lường Các chỉ số quan trọng chính của trang web bằng CrUX API.

Bạn cần có

• Tài khoản Google
• Quyền truy cập vào dòng lệnh
• Trình chỉnh sửa văn bản mà bạn chọn
• Trình duyệt web mà bạn chọn
• Một URL mà bạn chọn (Lớp học lập trình này sử dụng https://developers.google.com.)

2. Đo lường Chỉ số quan trọng chính của trang web bằng PageSpeed Insights API

1. Nếu bạn cần dữ liệu hiệu suất cho phiên bản dành cho máy tính của một URL, hãy yêu cầu dữ liệu từ PageSpeed Insights API và lưu dữ liệu đó vào một tệp response.txt:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

Thay thế phần giữ chỗ YOUR_URL bằng URL của bạn.

Ở cuối chuỗi API, hãy lưu ý rằng tham số truy vấn strategy được đặt thành giá trị desktop. Giá trị này chỉ định yêu cầu về dữ liệu trên máy tính.

2. Nếu bạn cần dữ liệu hiệu suất cho phiên bản di động của một URL, hãy yêu cầu dữ liệu từ PageSpeed Insights API và lưu dữ liệu đó vào một tệp response.txt:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

Thay thế phần giữ chỗ YOUR_URL bằng URL của bạn.

Ở cuối chuỗi API, hãy lưu ý rằng tham số truy vấn strategy được đặt thành giá trị mobile, chỉ định yêu cầu về dữ liệu di động.

3. Trong trình chỉnh sửa văn bản, hãy mở tệp response.txt rồi tìm thuộc tính loadingExperience:

response.txt

   "loadingExperience": {
    "id": "https://developers.google.com/",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1714,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.49701860391159164
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.40071951025600261
          },
          {
            "min": 3000,
            "proportion": 0.10226188583240581
          }
        ],
        "category": "AVERAGE"
      },
  },

Thuộc tính loadingExperience báo cáo thông tin này cho từng Chỉ số quan trọng chính của trang web dựa trên URL và loại thiết bị được chỉ ra trong yêu cầu API:

• Thuộc tính percentile cho biết phân vị thứ 75 của từng chỉ số.
• Thuộc tính distributions cho biết tỷ lệ phần trăm số lượt xem trang có trải nghiệm tốt, cần cải thiện hoặc kém cho từng chỉ số.
• Thuộc tính category phân loại hiệu suất của từng chỉ số là chậm, trung bình hoặc nhanh.

Nếu nội dung của thuộc tính loadingExperience trống, thì URL đó không có đủ dữ liệu hiệu suất. Vấn đề này thường xảy ra khi bạn kiểm thử các trang web có lưu lượng truy cập thấp.

4. Tìm thuộc tính originLoadingExperience:

response.txt

  "originLoadingExperience": {
    "id": "https://developers.google.com",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1649,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.488838781075378
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.42709617576692827
          },
          {
            "min": 3000,
            "proportion": 0.084065043157693739
          }
        ],
        "category": "AVERAGE"
      },
  },

Thuộc tính originLoadingExperience báo cáo các trải nghiệm được tổng hợp cho toàn bộ nguồn gốc, thay vì chỉ URL. Báo cáo này cung cấp thông tin tương tự cho từng Chỉ số quan trọng chính của trang web như đã giải thích ở bước trước.

3. Đo lường Các chỉ số quan trọng chính của trang web bằng CrUX API

Lấy khoá API

1. Trong Google Cloud Console, hãy tìm Chrome UX rồi chọn Chrome UX Report API trong trình đơn thả xuống.
2. Trên trang Chrome UX Report API, hãy nhấp vào Bật, sau đó đợi nút Bật chuyển thành nút Quản lý rồi chọn Quản lý.
3. Trong trình đơn điều hướng, hãy nhấp vào Thông tin xác thực, sau đó chọn Tạo thông tin xác thực > Khoá API rồi sao chép khoá API.

Tạo yêu cầu

1. Từ dòng lệnh, hãy yêu cầu dữ liệu hiệu suất cho URL của bạn từ CrUX API và lưu dữ liệu đó vào tệp response.txt:

curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'

Thay thế phần giữ chỗ YOUR_API_KEY bằng khoá API của bạn, sau đó thay thế phần giữ chỗ YOUR_URL bằng URL của bạn.

Thận trọng: Lệnh này áp dụng cho macOS, Linux và Git BASH cho Windows. Nếu máy của bạn chạy một hệ điều hành hoặc dòng lệnh khác, bạn có thể cần sửa đổi lệnh một chút. Ví dụ: nếu sử dụng Command shell trên Windows, bạn cần sử dụng dấu ngoặc kép thay vì dấu ngoặc đơn cho các tham số. Sau đó, bạn cần đặt dấu gạch chéo trước dấu ngoặc kép hiện có để thoát dấu ngoặc kép bên trong.

2. Trong trình chỉnh sửa văn bản, hãy mở tệp response.txt:

response.txt

{
  "record": {
    "key": {
      "url": "https://developers.google.com/"
    },
    "metrics": {
      "cumulative_layout_shift": {
        "histogram": [
          {
            "start": "0.00",
            "end": "0.10",
            "density": 0.47784335300590036
          },
          {
            "start": "0.10",
            "end": "0.25",
            "density": 0.32379713914174157
          },
          {
            "start": "0.25",
            "density": 0.19835950785235579
          }
        ],
        "percentiles": {
          "p75": "0.23"
        }
      },
    }
  },
}

Phản hồi của CrUX API cung cấp thông tin này cho từng Chỉ số quan trọng chính của trang web:

• Thuộc tính histogram cho biết tỷ lệ phần trăm người dùng có trải nghiệm chậm, trung bình hoặc nhanh đối với một chỉ số nhất định.
• Thuộc tính percentiles cho biết quan sát ở phân vị thứ 75 cho một chỉ số nhất định.

Nếu bạn thấy thông báo lỗi cho biết không tìm thấy dữ liệu, tức là không có đủ dữ liệu hiệu suất cho URL đã cho. Vấn đề này thường xảy ra khi bạn kiểm thử các trang web có lưu lượng truy cập thấp.

4. Xin chúc mừng

Xin chúc mừng! Bạn đã đo lường Các chỉ số quan trọng chính của trang web bằng API PageSpeed Insights và CrUX API.

Tìm hiểu thêm

• Bắt đầu sử dụng PageSpeed Insights API
• Sử dụng CrUX API
• Các chỉ số quan trọng về trang web