使用 PageSpeed Insights API 和 Chrome 使用者體驗 (CrUX) 報告 API 評估 Core Web Vitals

1. 事前準備

在本程式碼研究室中，您將瞭解如何使用 PageSpeed Insights API 和 CrUX API 測量網頁的 Core Web Vitals。

這兩個 API 都會傳回相同的 Core Web Vitals 資料，但各有優點。除了現場的 CrUX 資料，PageSpeed Insights API 也提供 Lighthouse 的資料。Lighthouse 是 Google 的自動化開放原始碼工具，可稽核網頁並提供改善建議。CrUX API 不會提供 Lighthouse 資料，因此執行速度較快。

Google 建議您評估行動裝置和電腦的網站體驗核心指標。網站使用體驗核心指標包含下列三項指標，適用於所有網頁，可提供使用者體驗的重要洞察資料：

  • 最大內容繪製 (LCP)。評估載入效能，應在網頁開始載入後的 2.5 秒內發生。
  • 首次輸入延遲時間 (FID)。測量互動性，應在 100 毫秒內發生。
  • 累計版面配置位移 (CLS)。評估視覺穩定性，應在 0.1 內。

必要條件

課程內容

  • 使用 PageSpeed Insights API 評估網頁的網站體驗核心指標。
  • 使用 CrUX API 評估網頁的 Core Web Vitals。

軟硬體需求

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

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

  1. 如要取得網址電腦版的效能資料，請向 PageSpeed Insights API 要求資料，並儲存到 response.txt 檔案：
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

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

在 API 字串結尾，請注意 strategy 查詢參數設為 desktop 值，這會指定要求提供電腦版資料。

  1. 如要取得網址行動版的效能資料，請透過 PageSpeed Insights API 要求資料，並儲存至 response.txt 檔案：
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

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

在 API 字串結尾，請注意 strategy 查詢參數已設為 mobile 值，這會指定行動資料的要求。

  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 要求中指出的網址和裝置類型，回報各項 Core Web Vitals 的這項資訊：

  • 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 屬性會回報整個來源的匯總體驗，而不只是網址。這份報表會針對每個 Core Web Vitals 提供與上一個步驟相同的資訊。

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

取得 API 金鑰

  1. 在 Google Cloud 控制台中搜尋 Chrome UX，然後在下拉式選單中選取「Chrome UX Report API」。
  2. 在「Chrome UX Report API」頁面中，按一下「啟用」，然後等待「啟用」按鈕變更為「管理」按鈕，並選取「管理」。
  3. 在導覽選單中，按一下「憑證」，然後選取「建立憑證」>「API 金鑰」，並複製 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"}'

將 YOUR_API_KEY 預留位置替換成您的 API 金鑰，然後將 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. 恭喜

恭喜！您使用 PageSpeed Insights API 和 CrUX API 評估網頁的核心指標。

瞭解詳情