Lighthouse 簡介

Lighthouse 是一項開放原始碼的自動化工具,可協助您改善網頁品質。您可以在任何網頁上執行這項操作,不論是公開網頁或需要驗證的網頁皆可。適用於效能、無障礙功能、漸進式網頁應用程式、搜尋引擎最佳化 (SEO) 等。

您可以在 Chrome 開發人員工具中,透過指令列或 Node 模組執行 Lighthouse。向 Lighthouse 提供網址進行稽核,接著針對網頁執行一系列稽核,然後產生報告頁面效能報告。使用失敗的稽核項目做為改善網頁的指標。每項稽核都有參考資料,說明稽核的重要性,以及如何修正。

您也可以使用 Lighthouse CI,避免網站出現迴歸情形。

開始使用

選擇最適合您的 Lighthouse 工作流程:

在 Chrome 開發人員工具中執行 Lighthouse

Lighthouse 在 Chrome 開發人員工具中有專屬的面板。執行報表的方式如下:

  1. 下載 Google Chrome 桌面版
  2. 開啟 Chrome,然後前往要稽核的網址。你可以稽核網路上的任何網址。
  3. 開啟 Chrome 開發人員工具
  4. 按一下「Lighthouse」分頁標籤。

    左側是待稽核網頁的可視區域。右側是 Chrome 開發人員工具的 Lighthouse 面板。

  5. 按一下「分析網頁載入作業」。開發人員工具會顯示稽核類別清單。請將所有選項都設為啟用。

  6. 按一下「執行稽核」。30 到 60 秒後,Lighthouse 會在頁面上提供報告。

    Chrome 開發人員工具中的 Lighthouse 報告。

安裝及執行節點指令列工具

如何安裝 Node 模組:

  1. 下載 Google Chrome 電腦版
  2. 安裝目前的 Node 長期支援版本。
  3. 安裝 Lighthouse。-g 標記會將其安裝為全域模組。
npm install -g lighthouse

如要執行稽核作業,請按照下列步驟操作:

lighthouse <url>

如要查看所有選項,請按照下列步驟操作:

lighthouse --help

以程式輔助方式執行 Node 模組

如需透過程式輔助方式執行 Lighthouse 做為節點模組的範例,請參閱「透過程式輔助方式使用」一文。

執行 PageSpeed Insights

如要在 PageSpeed Insights 中執行 Lighthouse,請按照下列步驟操作:

  1. 前往 PageSpeed Insights
  2. 輸入網頁網址。
  3. 按一下「Analyze」

    PageSpeed Insights 網站。

以 Chrome 擴充功能的形式執行 Lighthouse

如何安裝擴充功能:

  1. 下載 Google Chrome 桌面版
  2. 從 Chrome 線上應用程式商店安裝 Lighthouse Chrome 擴充功能

如何執行稽核:

  1. 在 Chrome 中,前往要稽核的網頁。
  2. 按一下 Chrome 網址列旁邊或 Chrome 擴充功能選單中的 Lighthouse。點選後,Lighthouse 選單就會展開。

    擴充功能會提示您產生報表。

  3. 按一下「產生報表」。Lighthouse 會針對目前聚焦的頁面執行稽核作業,然後開啟新分頁,並顯示結果的報表。

    透過擴充功能產生的 Lighthouse 報表。

線上分享及查看報表

使用 Lighthouse Viewer 在線上查看及分享報表。

燈塔檢查工具檢視器

以 JSON 格式分享報表

Lighthouse Viewer 需要 Lighthouse 報表的 JSON 輸出內容。產生 JSON 輸出內容,如下所示:

  • Lighthouse 報表。按一下選單的 ,然後點選 「Save as JSON」(另存為 JSON)
  • 指令列。執行:shell lighthouse --output json --output-path <path/for/output.json>

如要查看報表資料,請按照下列步驟操作:

  1. 開啟 Lighthouse 檢視器
  2. 將 JSON 檔案拖曳至檢視器,或是按一下檢視器中的任一處,開啟檔案瀏覽器並選取檔案。

以 GitHub Gist 格式分享報表

如果您不想手動傳遞 JSON 檔案,也可以將報告分享為 GitHub 私密摘要。Gist 的好處之一,就是提供免費的版本控制功能。

如何將報表匯出為 gist:

  1. 按一下 選單,然後點選 「Open In Viewer」。報表位於 https://googlechrome.github.io/lighthouse/viewer/
  2. 在檢視器中,依序按一下 選單和 「Save as Gist」。第一次執行這項操作時,系統會顯示彈出式視窗,要求您授予權限,以便存取基本 GitHub 資料,以及讀取及寫入 gist。

如要從 Lighthouse 的 CLI 版本頁面匯出報表,請手動建立 Gist,然後複製報表的 JSON 輸出內容,並貼入字詞含有 JSON 輸出的 gist 檔案名稱必須以 .lighthouse.report.json 結尾。如要瞭解如何透過指令列工具產生 JSON 輸出內容,請參閱「將報表分享為 JSON」一文。

如要查看已儲存為指標的報表,請按照下列步驟操作:

  • ?gist=<ID> 新增至檢視器的網址,其中 <ID> 是 gist 的 ID。 text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • 開啟檢視器,然後將 gist 的網址貼入其中。

Lighthouse 擴充功能

Lighthouse 旨在為所有網頁開發人員提供相關且可行的指引。為此,我們提供兩項功能,讓您根據特定需求調整 Lighthouse。

堆疊包

開發人員會使用許多不同的技術 (後端、內容管理系統和 JavaScript 架構) 來建構網頁。Lighthouse 不會顯示一般建議,而是根據所使用的工具提供相關且可行的建議。

堆疊包可讓 Lighthouse 偵測網站的建構平台,並顯示特定的堆疊相關建議。這些建議是由社群的專家決定及收錄。

如要提供堆疊包,請參閱貢獻指南

Lighthouse 外掛程式

Lighthouse 外掛程式可讓領域專家根據社群的特定需求擴充 Lighthouse 功能。您可以利用 Lighthouse 收集的資料建立新的稽核項目。核心為 Lighthouse 外掛程式為節點模組,可實作由 Lighthouse 執行的一組檢查,並新增為報表的新類別。

如要進一步瞭解如何建立自己的外掛程式,請參閱 Lighthouse GitHub 存放區中的外掛程式手冊

整合 Lighthouse

如果您是公司或個人,並將 Lighthouse 整合至提供的產品或服務中,那就太好了!我們希望盡可能讓更多人使用 Lighthouse。

請參閱整合 Lighthouse 的規範和品牌素材資源,瞭解如何在保護品牌的同時,顯示 Lighthouse 的使用情形。

為 Lighthouse 做出貢獻

Lighthouse 是開放原始碼,歡迎貢獻內容!請查看存放區的問題追蹤器,找出可修正的錯誤,或可建立或改善的稽核項目。這些問題很適合用來討論成效指標、新稽核的想法,或是任何與 Lighthouse 相關的任何其他問題。