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

有一些工具可以幫助監測頁面效能和評估你的改進。其中一個最好的工具是PageSpeed Insights。它可以作為一個網路應用程式和Chrome的DevTools中的Lighthouse標籤（Edge、Opera、Brave和Vivaldi也有同樣的DevTools）。

網頁效能比以往任何時候都更重要。使用者期望有一個能與桌面應用程式相媲美的光滑和響應式體驗。此外，谷歌的Core Web Vitals衡量頁面效能–它影響PageRank和你的搜尋引擎優化工作。

WordPress執行著超過三分之一的網站，但效能卻受到無效的主機、緩慢的主題和對外掛的過度依賴的影響。你可以通過更換一個好的虛擬主機和使用最佳效能技術來解決大多數問題。

1. 訪問Lighthouse
2. 什麼是PageSpeed Insights API？
3. PageSpeed Insights API快速入門
4. PageSpeed Insights API的JSON結果
5. 有用的JSON結果指標
6. 建立無需程式碼的效能儀表板
7. 建立網路效能儀表板
8. 進一步的開發選項

訪問Lighthouse

開啟你要檢查的頁面，按Ctrl/Commd + Shift + I或在選單中的更多工具中選擇開發工具，啟動Lighthouse。切換到Lighthouse選項卡，點選Analyse Page Load按鈕。幾秒鐘後會顯示結果：

Lighthouse報告示例

你可以深入到最高階別的百分比，以發現進一步的資訊和提示，解決已知的問題。這個工具是非常寶貴的，但也有不足之處。

• 你必須為你測試的每個頁面手動開始執行。
• 要記錄各種因素隨著時間的推移是如何改善或惡化的並不容易。
• 有大量的資料需要檢查，很容易出錯。
• 技術細節是為開發者提供的。對於想要快速瞭解進展情況的客戶和管理人員來說，這可能會讓他們不知所措。
• Lighthouse的執行可能會受到本地裝置和網路速度的影響，這可能導致錯誤的假設。

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

什麼是PageSpeed Insights API？

谷歌提供了一個免費的PageSpeed Insights REST API，它以JSON格式返回資料，其中包含所有的Lighthouse指標和更多。它允許你自動執行頁面，儲存產生的資料，審查一段時間的變化，並顯示你需要的確切資訊。

PageSpeed Insights API模擬了谷歌如何看待你的網站。你可以每隔幾天或在你釋出效能更新時執行一份報告。

這些結果是有幫助的，但不一定能說明實際的使用者體驗。當你想在所有使用者的裝置和網路上監測真實世界的效能時，瀏覽器效能API是一個更好的選擇。

PageSpeed Insights API快速入門

將以下地址複製到你的網路瀏覽器，並編輯 url 以評估你的網頁效能：

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

火狐瀏覽器是理想的選擇，因為它有一個內建的JSON瀏覽器，儘管Chrome有提供相同功能的擴充套件。以下是Lighthouse的整體效能得分：

PageSpeed Insights的API結果JSON（火狐）。

你可以為你自己的頁面和偏好改變API的URL查詢字串。唯一需要的引數是 url，例如：

url=https://mysite.com/page1

預設情況下會執行一個桌面測試，但你可以用以下方式明確要求：

strategy=desktop

或切換到移動端：

strategy=mobile

除非你指定一個或多個感興趣的類別，否則只執行效能測試：

category=performancecategory=accessibilitycategory=best-practicescategory=seocategory=pwa

一個特定的語言可以通過設定一個locale來定義–比如法語：

locale=fr-FR

而谷歌分析的活動細節可以用以下方式設定：

utm_campaign=<campaign>utm_source=<source>

該服務對不經常的請求是免費的，但如果你打算在短期內從同一IP地址執行許多測試，你將需要註冊一個谷歌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，或者使用谷歌PageSpeed API URL構建工具。

PageSpeed Insights API的JSON結果

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

資料的數量是令人生畏的，有一些重複，而且結果文件並不總是很清楚。JSON被分成四個部分，如下所述。

loadingExperience

這些是為終端使用者的頁面載入體驗計算的指標。它包括諸如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

這些是針對所有使用者的頁面載入體驗而計算的彙總指標。這些部分與上述載入體驗相同，流量較少的網站不太可能顯示出任何數字上的差異。

lighthouseResult

這是最大的部分，包含所有Lighthouse指標。它提供了關於測試的資訊：

• requestedUrl – 您請求的URL
• finalUrl – 經過所有重定向後的實際測試頁面
• lighthouseVersion – 軟體版本
• fetchTime – 測試執行的時間
• userAgent – 測試所使用的瀏覽器的使用者代理字串
• environment – 擴充套件的使用者代理資訊
• configSettings – 傳遞給API的設定

接下來是 “審計 “部分，包括unused-javascript、unused-css-rules、total-byte-weight、redirects、dom-size、maximum-contentful-paint-element、server-response-time、network-requests、 cumulative-layout-shift、first-meaningful-paint、screenshot-thumbnails和full-page-screenshot。

大多數審計指標提供了一個 “細節 “部分，其中包含諸如 “overallSavingsBytes（總體節省位元組數）”和 “overallSavingsMs（總體節省數量）”等因素，估計實施效能改進的好處。

全頁和縮圖 “螢幕截圖 “部分包含嵌入式base64影象資料。

“metrics（指標）” 部分提供了一個 “items（專案）” 陣列中所有指標的摘要，例如：

"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": [
//...

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

• 0.9至1.0為良好
• 0.5至0.9以下表示需要改進
• 0.5分以下為差，需要更緊急的關注。

“auditRefs” 部分提供了一份所有指標的清單，以及用於計算每個分數的權重。

analysisUTCTimestamp

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

有用的JSON結果指標

我建議你儲存並在一個文字編輯器中檢查JSON結果。有些編輯器有內建的JSON格式化器或作為外掛提供。另外，你也可以使用免費的線上工具，如。

• JSON Formatter & Validator
• JSON Formatter
• jsonformatter.io

以下指標可能是有用的。記得根據需要在URL上設定相關的類別選項。

摘要指標

總體得分從0到1：

效能指標

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

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

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

• lighthouseResult.audits.total-byte-weight.numericValue -頁面總大小，例如：450123
• lighthouseResult.audits.total-byte-weight.numericUnit -總頁面大小所使用的單位，如 “byte”

另外，”displayValue” 通常包含一個包含數字和單位的可讀資訊：

• lighthouseResult.audits.server-response-time.displayValue -關於響應時間的資訊，例如：”Root document took 170 ms”
• lighthouseResult.audits.dom-size.displayValue -關於DOM中元素數量的資訊，例如：”543個元素”

建立無需程式碼的效能儀表板

實時API反饋可以在許多系統中讀取和處理，包括Microsoft Excel。(有點奇怪的是，Google Sheets不支援JSON feeds，不需要進一步的外掛或巨集程式碼。它確實支援XML）。

要將實時整體效能得分匯入Excel，請啟動一個新的電子表格，切換到Data選項卡，並點選From Web。輸入你的PageSpeed Insights API URL並點選OK：

從網路匯入Excel資料

在下一個對話方塊中點選Connect，並保持預設（匿名）設定。你將進入Query Settings工具：

Excel查詢設定工具

點選lighthouse結果指標右側的 “Record“。然後在categories和performance上點選同樣的內容，以篩選獲取JSON物件的層次：

Excel JSON物件篩選獲取

在右鍵選單選項中點選頂部的 “Into Table” 圖示。

然後你可以點選表格標題中的過濾箭頭，在點選OK之前刪除除score以外的所有內容：

Excel匯入的表格過濾

最後，單擊 “Close & Load“，在電子表格中顯示實時表現的分數：

Excel實時資料

你可以對其他感興趣的指標遵循同樣的過程。

建立網路效能儀表板

這個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() 函式。這將提取屬性並將它們放入結果表或任何其他HTML元素中，該元素的資料點屬性被設定為PageSpeed API屬性，例如：

<td></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，並在一個新的資料庫記錄中針對測試的URL和當前的日期/時間儲存結果的JSON，可能是實用的。大多數資料庫都支援JSON，儘管MongoDB是最適合這項任務的。一個cron工作任務可以在定時的基礎上呼叫你的應用程式–也許是每天凌晨的時候一次。

然後，伺服器端的應用程式可以實現自己的REST API，以滿足你的報告要求，例如，返回兩個日期之間特定效能指標的變化。它可以被客戶端的JavaScript呼叫，以顯示錶格或圖表，說明隨著時間推移的效能改善。

如果你想用大量的資料建立複雜的報告，最好是在每天有新的PageSpeed資料時預先計算一次數字。畢竟，你不希望在一份需要數分鐘才能生成的報告中顯示效能是如何改善的！

小結

Chrome的Lighthouse工具非常棒，但要經常評估許多頁面是件麻煩事。PageSpeed Insights API允許你使用程式設計技術來評估網站效能。其好處是：

• 效能測試可以被自動化。你不能忘記執行一個測試。
• 結果是在谷歌伺服器上收集的，因此本地裝置和網路速度因素的影響較小。
• 指標包括Lighthouse中通常沒有的資訊。
• 重要的指標可以被記錄下來，並隨著時間的推移進行監測，以確保頁面效能隨著每次更新而提高。
• 效能、可訪問性和SEO資訊可以顯示在簡化的報告中，讓開發人員、管理人員和客戶一目瞭然。