運用 Lighthouse 探索效能商機

Lighthouse 這項工具可協助您測量並找出改善網頁效能的方法。以下是使用 Lighthouse 的一般工作流程:

  1. 您會指示 Lighthouse 要稽核哪個頁面。
  2. Lighthouse 會載入該網頁,並記錄網頁達到各種效能里程碑所花費的時間。這些里程碑稱為「指標」metrics
  3. Lighthouse 會提供網頁效能報告。報表會提供每個指標的分數以及商機清單,如果您導入這些項目,網頁載入速度應該就會加快。

您的任務是持續改善指標分數,或至少確保指標分數不會變差。但您無法直接處理指標。 而是會導入 Lighthouse 帶來的商機。盡全力,通常能提高指標分數。

web.dev 設定檔頁面執行 Lighthouse:

  1. 只要提供任何網址,Lighthouse 就會執行一系列稽核作業,然後產生網頁成效報告。

  2. 查看稽核報告,找出網頁有待改進的部分。

  3. 每項稽核都會提供指引與建議,幫助您提高分數。

透過 Chrome 開發人員工具執行 Lighthouse

Chrome 開發人員工具是直接在 Google Chrome 瀏覽器內建的一組網頁開發人員工具,無須下載任何資料,即可取得開發人員工具。如果您使用的是 Chrome,就代表開發人員工具。

  1. 使用 Chrome 前往要稽核的頁面。
  2. 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。

開發人員工具已開啟,並固定在畫面右側。

按一下「Audits」分頁標籤。如果找不到這個分頁,請按一下 » 符號,然後從清單中選取「Audits」。Lighthouse 是驅動「Audits」面板的引擎。這也是為何會看到燈塔的圖片。

開發人員工具已開啟 Lighthouse 稽核面板。

  1. 確認已選取「行動」圓形按鈕。Lighthouse 稽核網頁時,會模擬行動裝置的可視區域和使用者代理程式字串。
  2. 確認「成效」核取方塊已啟用。您可以啟用或停用「Audits」(稽核) 區段中的其他核取方塊。啟用後,您就會看到大量改善網頁其他層面的機會。
  3. 確認已選取「Simulated Fast 3G, 4x CPU Crashdown」圓形按鈕。Lighthouse 在載入頁面時,實際上不會節流您的網路或 CPU。而是會考量網頁在正常情況下需要花費多久時間,然後估算在搭載 CPU 的 3G 網路可用比機器效能低 4 倍的高速 3G 網路上需要花費的時間。
  4. 確認已勾選「清除儲存空間」核取方塊。這個選項會強制 Lighthouse 為每個網頁資源連線至網路,供首次訪客體驗該網頁的方式。
  5. 按一下「執行稽核」。5 到 10 秒後,Lighthouse 會顯示報告。

開發人員工具顯示 Lighthouse 稽核結果報告。

舉例來說,如果您在模擬快速 3G 的情況下執行部分稽核,且 4 倍 CPU 減速節流功能已啟用,之後又在停用節流的情況下執行稽核,則在啟用節流的情況下,指標分數會大幅降低。您可能會花很多時間嘗試找出網頁速度變慢的原因,但實際上,只有設定變更的部分是設定。

瞭解報表內容

報表右上方會列出您的整體成效分數。100 分是完美的分數整體分數下方則是指標分數。 Lighthouse v3 評分指南說明瞭每項指標分數如何影響整體分數。

Lighthouse 指標分數代表綠色、通過分數,以及黃色警告分數。

將滑鼠遊標懸停在任一指標上,即可瞭解詳情。按一下 [瞭解詳情] 即可閱讀說明文件。

指標分數下方會顯示網頁載入時呈現的畫面。

開發人員工具的網頁載入幻燈片檢視畫面。

在螢幕截圖下方,您會看到可以改善網頁效能的商機。

按一下商機即可瞭解詳情。

「延遲載入畫面外圖片」稽核結果顯示許多圖片路徑可進行最佳化。

後續步驟

請嘗試使用 Lighthouse 稽核頁面,無論是透過設定檔頁面或 Chrome 開發人員工具都可以。請採行其中一個商機,然後再次稽核網頁,瞭解這項變更對報表有何影響。指標分數應該要比較好,而且 Lighthouse 不應再將此機會標記為可處理的事項。

自行執行 Lighthouse 很適合用來檢查及發現問題,但最終建議您設定持續監控功能,確保網站維持良好健康狀態。如要追蹤 Lighthouse 長期進度,請將網站加入設定檔