使用 PSI API 和 CrUX API 評估網站體驗核心指標

1. 事前準備

在這個程式碼研究室中，您將瞭解如何使用 PageSpeed Insights (PSI) API 和 Chrome 使用者體驗報告 (CrUX) API，評估網頁的核心網站使用體驗指標。

這兩個 API 都會傳回相同的「網站體驗核心指標」資料，但每個 API 都有各自的優點。除了 CrUX 資料之外，PSI API 還提供 Lighthouse 資料，Lighthouse 是 Google 的自動化開放原始碼工具，可以稽核網頁，並提供改進建議。CrUX API 不提供 Lighthouse 資料，因此執行速度更快。

Google 建議您評估行動裝置和電腦上的裝置使用體驗核心指標報告。「網站體驗核心指標」包含以下三項指標，適用於所有網頁，且可讓您深入瞭解使用者體驗：

  • 最大內容繪製 (LCP)。可測量載入效能，應該在網頁開始載入後的 2.5 秒內進行。
  • 首次輸入延遲時間 (FID)。可測量互動性，應該可在 100 毫秒內完成。
  • 累計版面配置位移 (CLS)。測量影像穩定性，且應在 0.1 內。

必要條件

要執行的步驟

  • 使用 PSI API 評估網頁的網站使用體驗核心指標。
  • 使用 CrUX API 評估網頁的網路使用體驗指標。

軟硬體需求

  • Google 帳戶
  • 存取指令列
  • 您選擇的文字編輯器
  • 您選擇的網路瀏覽器
  • 您選擇的網址 (這個程式碼研究室使用的是 https://developers.google.com)。

2. 使用 PSI API 評估網站體驗核心指標

  1. 如果您需要電腦版網址的效能資料，請執行以下 curl 指令向 PageSpeed Insights API 索取資料，然後儲存到 response.txt 檔案中：
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

將 YOUR_URL 預留位置替換成您的網址。

  1. 如果您需要網址行動版的成效資料，請在上一個步驟的指令中，於 API 字串結尾將 strategy 查詢參數設為 mobile 值：
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

將 YOUR_URL 預留位置替換成您的網址。

  1. 在文字編輯器中開啟 response.txt 檔案，然後找出 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"
      },
  },

loadingExperience 屬性會根據 API 要求中指定的網址和裝置類型，回報每個網站使用體驗核心指標報告中的資訊：

  • percentile 屬性表示每項指標的第 75 個百分位數。
  • distributions 屬性表示每項指標對「良好」、「需要改善」或「不良」體驗的網頁瀏覽量百分比。
  • category 屬性會將各項指標的成效區分為緩慢、平均或快速。

如果 loadingExperience 屬性的內容空白，表示網址的成效資料不足。這種問題通常是因為測試流量偏低的網頁所致。

  1. 找出 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"
      },
  },

originLoadingExperience 屬性會回報整個來源的綜合體驗，而不只是網址。如先前步驟所述，這項工具會為每個網站體驗核心指標提供相同的資訊。

3. 使用 CrUX API 評估網站體驗核心指標

取得 API 金鑰

  1. 在 Google Cloud Console 中搜尋 Chrome UX，然後在下拉式選單中選取 [Chrome UX Report API]。
  2. 在「Chrome 使用者體驗報告 API」頁面中按一下 [啟用]，然後等待 [啟用] 按鈕變更為 [管理] 按鈕，然後選取 [管理]。
  3. 在導覽選單中，按一下 [Credentials]，然後選取 [Create Credentials > API key]，接著複製 API 金鑰。

提出要求

  1. 透過指令列從 CrUX API 索取網址的成效資料，並儲存到 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"}'

以您的 API 金鑰取代 YOUR_API_KEY 預留位置，然後將 YOUR_URL 預留位置替換成您的網址。

  1. 在文字編輯器中開啟 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"
        }
      },
    }
  },
}

CrUX API 回應會針對各個「網站體驗核心指標」提供以下資訊：

  • histogram 屬性表示在特定指標中，速度緩慢、平均或快速體驗的使用者百分比。
  • percentiles 屬性表示在特定指標中，觀察到第 75 個百分位數。

如果系統顯示錯誤訊息，指出找不到資料，表示指定網址的資料效能不足。這種問題通常是因為測試流量偏低的網頁所致。

4. 恭喜

恭喜！您使用 PSI API 和 CrUX API 評估某個網頁的網路使用體驗核心指標。

瞭解詳情