如何使用 PageSpeed Insights API 監控頁面性能

有一些工具可以幫助監控頁面性能並評估您的改進。 最好的之一是 PageSpeed Insights。 它可作為 Web 應用程序和 Chrome 開發工具中的 Lighthouse 選項卡使用（相同的開發工具也可用於 Edge、Opera、Brave 和 Vivaldi）。

網頁性能比以往任何時候都更加重要。 用戶期望獲得可與桌面應用程序媲美的流暢且響應迅速的體驗。 此外，Google 的 Core Web Vitals 衡量頁面性能——它會影響 PageRank 和您的搜索引擎優化工作。

WordPress 運行著超過三分之一的網站，但性能受到低效託管、緩慢的主題和過度依賴插件的影響。 您可以通過切換到一個好的網絡主機並使用最佳實踐性能技術來解決大多數問題。

訪問燈塔

通過打開要檢查的頁面並按Ctrl/Cmd + Shift + I或從菜單中的更多工具中選擇開發人員工具來啟動 Lighthouse。 切換到Lighthouse選項卡並單擊Analyze Page Load按鈕。 幾秒鐘後顯示結果：

您可以深入了解頂級百分比，以發現解決已知問題的更多信息和提示。 該工具非常寶貴，但也有缺點：

• 您必須為要測試的每個頁面手動啟動運行。
• 記錄因素如何隨著時間的推移而改善或惡化並不容易。
• 有很多數據要檢查，很容易出錯。
• 為開發人員提供了技術細節。 對於想要快速了解進度的客戶和經理來說，這可能會讓人不知所措。
• Lighthouse 運行可能會受到本地設備和網絡速度的影響，這可能會導致錯誤的假設。

PageSpeed Insights API 提供了一種解決這些問題的方法，因此可以自動化、記錄和比較測試。

什麼是 PageSpeed Insights API？

Google 提供免費的 PageSpeed Insights REST API，它以 JSON 格式返回包含所有 Lighthouse 指標等的數據。 它允許您自動運行頁面、存儲結果數據、查看隨時間變化的變化，並顯示您需要的確切信息。

PageSpeed Insights API 模擬 Google 如何看待您的網站。 您可以每隔幾天或每當發布性能更新時運行一次報告。

結果很有幫助，但不一定代表實際用戶體驗。 當您想要監控所有用戶設備和網絡的真實性能時，瀏覽器性能 API 是更好的選擇。

PageSpeed Insights API 快速入門

將以下地址複製到您的 Web 瀏覽器並編輯url以評估您的頁面的性能：

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

Firefox 是理想的，因為它有一個內置的 JSON 查看器，儘管 Chrome 有提供相同功能的擴展。 整體 Lighthouse 性能得分突出顯示如下：

您可以更改您自己的頁面和首選項的 API URL 查詢字符串。 唯一需要的參數是url ，例如

url=https://mysite.com/page1

默認情況下會運行桌面測試，但您可以通過以下方式明確請求它：

strategy=desktop

或切換到手機：

strategy=mobile

除非您指定一個或多個感興趣的類別，否則只會運行性能測試：

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

可以通過設置語言環境來定義特定語言——例如法語：

locale=fr-FR

和 Google Analytics 活動詳細信息可以設置為：

utm_campaign=<campaign>
utm_source=<source>

該服務對於不頻繁的請求是免費的，但如果您打算在短時間內從同一 IP 地址運行許多測試，則需要註冊一個 Google API 密鑰。 密鑰通過以下方式添加到 URL：

key=<api-key>

您可以通過指定用與號 (&) 字符分隔的所選參數來構建 URL 的查詢字符串。 以下 API URL 使用移動設備測試https://mysite.com/上的頁面以評估性能和可訪問性標準：

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

如果您需要進一步的幫助，您可以構建自己的 URL 或使用 Google PageSpeed API URL 構建工具。

PageSpeed Insights API JSON 結果

測試通常會返回大約 600Kb 的 JSON 數據，具體取決於您選擇的類別、頁面中的資產數量以及屏幕截圖的複雜性（以 base64 格式嵌入）。

數據量驚人，存在一些重複，結果文檔並不總是清晰。 JSON 分為四個部分，如下所述。

加載經驗

這些是為最終用戶的頁面加載體驗計算的指標。 它包括 Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE、FIRST_CONTENTFUL_PAINT_MS 和 FIRST_INPUT_DELAY_MS 等信息。 如果未進行任何測量，詳細信息和“類別”值將返回 FAST、AVERAGE、SLOW 或 NONE。 例子：

 "loadingExperience": { "metrics": { "CUMULATIVE_LAYOUT_SHIFT_SCORE": { "percentile": 0, "distributions": [ { "min": 0, "max": 10, "proportion": 0.970 }, { "min": 10, "max": 25, "proportion": 0.017 }, { "min": 25, "proportion": 0.012 } ], "category": "FAST" },

originLoadingExperience

這些是針對所有用戶的頁面加載體驗計算的匯總指標。 這些部分與上面的 loadingExperience 相同，流量較少的站點不太可能顯示任何數字差異。

燈塔結果

這是最大的部分，包含所有 Lighthouse 指標。 它提供有關測試的信息：

• requestedUrl – 您請求的 URL
• finalUrl – 遵循所有重定向後測試的實際頁面
• lighthouseVersion——軟件版本
• fetchTime——測試運行的時間
• userAgent – 用於測試的瀏覽器的用戶代理字符串
• 環境——擴展的用戶代理信息
• configSettings – 傳遞給 API 的設置

接下來是“審核”部分，其中包含許多部分，包括未使用的 javascript、未使用的 css 規則、總字節重量、重定向、dom 大小、最大內容繪製元素、服務器響應時間、網絡-請求、累積佈局轉換、第一次有意義的繪畫、屏幕截圖縮略圖和整頁屏幕截圖。

大多數審計指標都提供一個“詳細信息”部分，其中包含“overallSavingsBytes”和“overallSavingsMs”等因素，這些因素估計實施性能改進的好處。

整頁和縮略圖“屏幕截圖”部分包含嵌入的 base64 圖像數據。

“指標”部分提供“項目”數組中所有指標的摘要，例如

"metrics": { "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", "score": null, "scoreDisplayMode": "informative", "details": { "type": "debugdata", "items": [{ "observedFirstVisualChange": 234, "observedFirstContentfulPaint": 284, "interactive": 278, "observedFirstPaintTs": 1579728174422, "observedDomContentLoaded": 314, // ... etc ... }] }, "numericValue": 278, "numericUnit": "millisecond" },

“audits”部分後面是“categories”，它提供了通過 API URL 傳遞的所選類別的總體 Lighthouse 分數：

 "categories": { "performance": { "id": "performance", "title": "Performance", "score": 0.97, "auditRefs": [ //...

“分數”是一個介於 0 和 1 之間的數字，通常在 Lighthouse 報告中顯示為百分比。 一般來說，分數是：

• 0.9 到 1.0 很好
• 0.5 到 0.9 以下表示需要改進
• 低於 0.5 較差，需要更緊急的關注

“auditRefs”部分提供了所有指標的列表以及用於計算每個分數的權重。

分析UTC時間戳

最後，報告分析時間。 這應該與 lighthouseResult.fetchTime 中顯示的時間相同。

有用的 JSON 結果指標

我建議您在文本編輯器中保存並檢查 JSON 結果。 有些具有內置的 JSON 格式化程序或作為插件提供。 或者，您可以使用免費的在線工具，例如：

• JSON 格式器和驗證器
• JSON格式化程序
• jsonformatter.io

以下指標可能會有用。 請記住根據需要在 URL 上設置關聯的類別選項。

摘要指標

從 0 到 1 的總分：

性能指標

這些包括從 0 到 1 的 Core Web Vitals 分數：

其他有用的性能分數包括：

您通常可以獲得實際數字和單位，例如：

• lighthouseResult.audits.total-byte-weight.numericValue –
  頁面總大小，例如 450123
• lighthouseResult.audits.total-byte-weight.numericUnit –
  用於總頁面大小的單位，例如“字節”

或者，“displayValue”通常包含帶有圖形和單位的可讀消息：

• lighthouseResult.audits.server-response-time.displayValue –
  關於響應時間的消息，例如“Root document take 170 ms”
• lighthouseResult.audits.dom-size.displayValue –
  有關 DOM 中元素數量的消息，例如“543 個元素”

創建無代碼性能儀表板

可以在包括 Microsoft Excel 在內的許多系統中讀取和處理實時 API 提要。 （有點奇怪，如果沒有更多插件或宏代碼，Google 表格不支持 JSON 提要。它支持 XML。）

要將實時整體性能得分導入 Excel，請啟動一個新的電子表格，切換到“數據”選項卡，然後單擊“來自 Web” 。 輸入您的 PageSpeed Insights API URL 並點擊確定：

在下一個對話框中單擊“連接”並保持默認（匿名）設置。 您將繼續使用查詢設置工具：

單擊燈塔結果指標右側的記錄。 然後單擊類別和性能上的相同項以向下鑽取 JSON 對象層次結構：

從右鍵單擊菜單選項中單擊頂部的Into Table圖標。

然後，您可以單擊表標題中的過濾器箭頭以刪除分數以外的所有內容，然後再單擊OK ：

最後，單擊關閉並加載以在電子表格中顯示實時性能分數：

您可以對其他感興趣的指標執行相同的過程。

創建 Web 性能儀表板

此Codepen 演示提供了一個表單，您可以在其中輸入 URL 並選擇桌面或移動分析以獲得結果。

該代碼創建一個 PageSpeed Insights URL，調用 API，然後將各種結果呈現到一個比標準 Lighthouse 報告更容易查看的匯總表中：

提交表單時調用異步startCheck()函數。 它取消提交事件並隱藏以前的結果：

 // make API request async function startCheck(e) { e.preventDefault(); show(resultTable, false); show(status); show(error, false);

然後它從表單數據構造apiURL並禁用字段：

 const form = e.target, fields = form.firstElementChild, data = new FormData(form), qs = decodeURIComponent( new URLSearchParams(data).toString() ), apiURL = form.action + '?' + qs; fields.disabled = true;

Fetch API 用於調用 PageSpeed URL、獲取響應並將 JSON 字符串解析為可用的 JavaScript 對象。 try/catch 塊確保捕獲失敗：

 try { // call API and get result const response = await fetch(apiURL), result = await response.json();

結果對像被傳遞給showResult()函數。 這會提取屬性並將它們放入結果表或任何其他將數據點屬性設置為 PageSpeed API 屬性的 HTML 元素中，例如

<td data-point="lighthouseResult.categories.performance.score"></td>

try 塊的結尾：

 // output result showResult(result); show(status, false); show(resultTable); }

最後，一個 catch 塊處理錯誤並重新啟用表單字段，以便可以運行進一步的測試：

 catch(err) { // API error console.log(err); show(status, false); show(error); } fields.disabled = false; }

進一步的發展選擇

上面的示例代碼在您請求時從 PageSpeed Insights API 獲取結果。 該報告比 Lighthouse 更具可配置性，但執行仍然是一個手動過程。

如果您打算開發自己的儀表板，那麼創建一個調用 PageSpeed Insights API 的小型應用程序並將生成的 JSON 存儲在新的數據庫記錄中與測試的 URL 和當前日期/時間相對應。 大多數數據庫都支持 JSON，儘管 MongoDB 非常適合這項任務。 cron 作業可以定時調用您的應用程序——也許每天凌晨一次。

然後，服務器端應用程序可以根據您的報告要求實施自己的 REST API，例如返回兩個日期之間特定性能指標的變化。 客戶端 JavaScript 可以調用它來顯示說明性能隨時間的改進的表格或圖表。

如果您想創建包含大量數據的複雜報告，最好每天在新的 PageSpeed 數據可用時預先計算一次數據。 畢竟，您不想在需要幾分鐘才能生成的報告上顯示性能如何提高！

概括

Chrome 的 Lighthouse 工具很棒，但頻繁評估許多頁面是一件苦差事。 PageSpeed Insights API 允許您使用編程技術評估站點性能。 好處：

• 性能測試可以自動化。 您不能忘記運行測試。
• 結果收集在谷歌服務器上，因此本地設備和網絡速度因素的影響較小。
• 指標包括 Lighthouse 中通常不可用的信息。
• 隨著時間的推移，可以記錄和監控重要指標，以確保頁面性能隨著每次更新而得到改善。
• 性能、可訪問性和 SEO 信息可以顯示在簡化的報告中，以便開發人員、經理和客戶一目了然。