Lighthouse 是一項工具,可協助您評估網頁效能並找出改善方法。以下是使用 Lighthouse 的一般工作流程:
- 您可以告訴 Lighthouse 要稽核哪些網頁。
- Lighthouse 會載入該網頁,並記錄網頁達到各種效能里程碑所需的時間。這些里程碑稱為「指標」。
- Lighthouse 會提供網頁成效報表,這份報表會為每項指標提供分數,並列出可改善的項目清單,如果您實作這些項目,應該就能加快網頁載入速度。
你的任務是隨著時間改善指標分數,或至少確保指標分數不會變差。不過,您無法直接處理指標。而是按照 Lighthouse 提供的機會進行。改善這些機會通常有助於提高指標分數。
透過設定檔頁面執行 Lighthouse
透過 web.dev 設定檔頁面執行 Lighthouse:
只要提供任何網址,Lighthouse 就會執行一系列稽核作業,產生網頁成效報表。
查看稽核報表,找出網頁可改善之處。
每項稽核作業都會提供指引,以及可立即採取的步驟,協助你提高分數。
透過 Chrome 開發人員工具執行 Lighthouse
Chrome 開發人員工具是直接內建於 Google Chrome 瀏覽器的一組網頁程式開發人員工具,您無須下載任何內容,即可取得 DevTools。如果您使用 Chrome,就會使用到開發人員工具。
- 在 Chrome 中,前往要稽核的網頁。
- 按下 `Control + Shift + J` 鍵 (在 Mac 上為 `Command + Option + J` 鍵) 開啟開發人員工具。
按一下「Audits」分頁標籤。如果找不到這個分頁,請按一下「>」符號,然後從清單中選取「審查」。Lighthouse 是支援「稽核」面板的引擎。因此您會看到燈塔圖片。
- 確認已選取「Mobile」圓形按鈕。Lighthouse 稽核網頁時,會模擬行動裝置的可視區域和使用者代理程式字串。
- 確認已啟用「Performance」核取方塊。您可以啟用或停用「稽核」部分中的其他核取方塊。啟用這些功能後,你會看到許多改善網頁其他方面的商機。
- 確認已選取「Simulated Fast 3G, 4x CPU Slowdown」圓形按鈕。Lighthouse 在載入網頁時,實際上並不會限制網路或 CPU。而是會查看網頁在正常情況下載入所需的時間,然後估算在快速 3G 網路上,使用 CPU 效能比您機器低 4 倍的裝置,需要多久才能載入網頁。
- 確認已勾選「Clear Storage」核取方塊。這個選項會強制 Lighthouse 針對每個網頁資源連線至網路,這就是初次訪客體驗網頁的方式。
- 按一下「執行稽核」。5 到 10 秒後,Lighthouse 就會顯示報表。
舉例來說,如果您在執行部分稽核時啟用模擬快速 3G和啟用 4 倍 CPU 減速節流,而在其他時間執行稽核時停用節流,啟用節流時的指標分數會大幅降低。您可能會花費大量時間,試圖找出網頁速度變慢的原因,但實際上唯一變更的是設定。
瞭解報表
報表右上方會列出整體成效分數。滿分為 100 分。整體分數下方是指標分數。Lighthouse 第 3 版評分指南說明各項指標的分數如何影響整體分數。
將滑鼠游標懸停在指標上,即可進一步瞭解。按一下「瞭解詳情」即可查看相關說明文件。
在指標分數下方,您會看到網頁載入時的螢幕截圖。
螢幕截圖下方會顯示可改善網頁成效的機會。
點選商機即可瞭解詳情。
後續步驟
請嘗試使用 Lighthouse 稽核網頁,方法是透過個人資料頁面或 Chrome 開發人員工具。實作其中一個機會,然後再次檢查網頁,瞭解變更對報表的影響。指標分數應略有進步,Lighthouse 也不應再將該機會標示為需要改善的項目。
自行執行 Lighthouse 非常適合用於檢查問題,但最終還是建議您設定持續監控功能,確保網站維持健康狀態。如要追蹤 Lighthouse 進度,請將網站新增至個人資料。