使用 PSI API 和 CrUX API 評估網站體驗核心指標
程式碼研究室簡介
subject上次更新時間：5月 9, 2022
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 評估網站體驗核心指標
- 如果您需要電腦版網址的效能資料，請執行以下
curl指令向 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查詢參數設為mobile值：
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
將 YOUR_URL 預留位置替換成您的網址。
- 在文字編輯器中開啟
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 屬性的內容空白，表示網址的成效資料不足。這種問題通常是因為測試流量偏低的網頁所致。
- 找出
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 金鑰
- 在 Google Cloud Console 中搜尋
Chrome UX，然後在下拉式選單中選取 [Chrome UX Report API]。 - 在「Chrome 使用者體驗報告 API」頁面中按一下 [啟用]，然後等待 [啟用] 按鈕變更為 [管理] 按鈕，然後選取 [管理]。
- 在導覽選單中，按一下 [Credentials]，然後選取 [Create Credentials > API key]，接著複製 API 金鑰。
提出要求
- 透過指令列從 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 預留位置替換成您的網址。
- 在文字編輯器中開啟
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 個百分位數。
如果系統顯示錯誤訊息，指出找不到資料，表示指定網址的資料效能不足。這種問題通常是因為測試流量偏低的網頁所致。