運用 Lighthouse 探索效能商機

Kayce Basques

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

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

您的任務是持續改善指標分數，或至少確保指標分數不會變差。但您無法直接處理指標。 而是會導入 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」面板的引擎。這也是為何會看到燈塔的圖片。

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

注意： 您可以根據自己的需求調整設定選項。如果您不瞭解這些參數，那麼這裡提到的選項就是理想的預設值。如果這些選項都能快速顯示你的網頁，讓使用者都能快速看到你的網頁。重要的是，讓各項稽核選項保持一致。

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

瞭解報表內容

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

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

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

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

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

後續步驟

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

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