總覽

Lighthouse 是一項開放原始碼的自動化工具,可改善網頁品質。這項工具可以套用至任何網頁、公開執行,或要求進行驗證。以及效能、無障礙功能、漸進式網頁應用程式、搜尋引擎最佳化 (SEO) 等稽核項目。

Lighthouse 標誌

您可以在 Chrome 開發人員工具中執行 Lighthouse,也可以透過指令列或節點模組執行。您將網址提供給 Lighthouse 要稽核,然後針對該網頁執行一系列稽核,然後產生一份報告,說明該頁面的效能。接著,查看失敗的稽核資料,做為改善頁面的指標。每項稽核都有參考文件,說明稽核的重要性及修正方式。

您也可以使用 Lighthouse CI 避免網站發生迴歸問題。

請觀看下方的 Google I/O 大會影片,進一步瞭解如何使用 Lighthouse 並貢獻心力。

立即開始

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

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

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

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

    Chrome 開發人員工具的 Lighthouse 面板
    左側是要稽核的網頁可視區域。右側是 Chrome 開發人員工具的 Lighthouse 面板,這個面板採用 Lighthouse 技術

  5. 按一下「分析網頁載入」。開發人員工具會顯示稽核類別清單。讓這些變數全部啟用。

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

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

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

如要安裝節點模組:

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

如何執行稽核:

lighthouse <url>

如要查看所有選項:

lighthouse --help

以程式輔助方式執行節點模組

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

執行 PageSpeed Insights

如要針對 PageSpeed Insights 執行 Lighthouse:

  1. 前往 PageSpeed Insights
  2. 請輸入網頁網址。
  3. 點選「分析」

    PageSpeed Insights UI
    PageSpeed Insights UI

將 Lighthouse 做為 Chrome 擴充功能執行

如何安裝擴充功能:

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

如何執行稽核:

  1. 在 Chrome 中,前往您要稽核的網頁。
  2. 按一下Lighthouse 擴充 icion Lighthouse。這個按鈕應該位於 Chrome 網址列旁邊。如果沒有,請開啟 Chrome 擴充功能選單,並從中存取擴充功能。點選後,Lighthouse 選單就會展開。

    Lighthouse 擴充功能
    Lighthouse 擴充功能面板

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

    Lighthouse 擴充功能報告
    擴充功能提供的 Lighthouse 報告

線上分享及查看報表

使用 Lighthouse 檢視器,在線上查看及共用報表。

Lighthouse 檢視器
Lighthouse 檢視者

以 JSON 格式分享報表

Lighthouse 檢視器需要 Lighthouse 報告 JSON 輸出內容。根據您使用的 Lighthouse 工作流程,下表說明如何取得 JSON 輸出內容:

  • Lighthouse 報告。開啟右上方的 選單圖示 選單,然後點選 「Save as JSON」(另存為 JSON) 按鈕「另存為 JSON」
  • 指令列:執行:shell lighthouse --output json --output-path <path/for/output.json>

如何查看報表資料:

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

以 GitHub Gist 的身分分享報告

如果不想手動傳送 JSON 檔案,也可以將報表以機密 GitHub 文件的形式分享。專家的其中一項優點是免費版本管控。

如要從報表中將報表匯出為集合:

  1. (如果你已在檢視器中,請略過這個步驟) 開啟右上方的 選單圖示 選單,然後按一下 在檢視器中開啟 按鈕「在檢視器中開啟」。報表會在「檢視器」(位於 https://googlechrome.github.io/lighthouse/viewer/) 中開啟。
  2. 在「檢視器」中開啟右上方的 選單圖示 選單,然後按一下 在檢視器中開啟 按鈕「另存為 Gist」。首次執行這項操作時,彈出式視窗會要求存取您的基本 GitHub 資料,以及讀取和寫入管理器的權限。

如要從 Lighthouse 版本匯出報表,請手動建立密鑰,然後將報表 JSON 輸出內容複製貼到 BigQuery 中。包含 JSON 輸出內容的 gist 檔案名稱結尾必須是 .lighthouse.report.json。如需透過指令列工具產生 JSON 輸出的範例,請參閱以 JSON 格式分享報表

若要查看儲存為分項的報表:

  • ?gist=<ID> 加到檢視者的網址,其中 <ID> 是熱門的 ID。 text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • 開啟「Viewer」(檢視者) 並貼上關聯網址。

Lighthouse 擴充性

Lighthouse 旨在為所有網站開發人員提供相關指引,並協助他們採取行動。為此,我們提供了兩項功能,可讓您根據特定需求自訂 Lighthouse。

堆疊包

開發人員使用多種不同技術 (後端/CMS/JavaScript 架構) 建立網頁。Lighthouse 現在能根據使用者採用的工具,提供更切合需求的實用建議,而不只是顯示一般建議。

「堆疊包」可讓 Lighthouse 偵測您的網站採用哪個平台,並顯示特定的堆疊式建議。這些建議是由社群的專家定義及收錄。

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

Lighthouse 外掛程式

Lighthouse 外掛程式可讓網域專家根據社群的特定需求,擴充 Lighthouse 的功能。您現在可以運用 Lighthouse 收集的資料來建立新的稽核作業。Lighthouse 外掛程式本質上是節點模組,會實作一組由 Lighthouse 執行的檢查,並加入報表,做為新類別。

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

整合 Lighthouse

如果貴公司或個人要將 Lighthouse 整合至自家產品 / 服務,請先完成相關程序,我們非常高興你!我們希望盡可能讓更多人使用 Lighthouse,而這份《整合 Lighthouse 指南和品牌素材資源》旨在協助你直接說明 Lighthouse 的運作,同時保護我們的品牌。

為 Lighthouse 貢獻心力

Lighthouse 是開放原始碼,歡迎貢獻心力!請查看存放區的 Issue Tracker,找出可修正的錯誤,或是可以建立或改進的稽核項目。問題追蹤器也很適合用來討論成效指標、新稽核的提案,或是與 Lighthouse 相關的其他事項。