Lighthouse 是一項開放原始碼的自動化工具,可改善網頁品質。這項工具可以套用至任何網頁、公開執行,或要求進行驗證。以及效能、無障礙功能、漸進式網頁應用程式、搜尋引擎最佳化 (SEO) 等稽核項目。
您可以在 Chrome 開發人員工具中執行 Lighthouse,也可以透過指令列或節點模組執行。您將網址提供給 Lighthouse 要稽核,然後針對該網頁執行一系列稽核,然後產生一份報告,說明該頁面的效能。接著,查看失敗的稽核資料,做為改善頁面的指標。每項稽核都有參考文件,說明稽核的重要性及修正方式。
您也可以使用 Lighthouse CI 避免網站發生迴歸問題。
請觀看下方的 Google I/O 大會影片,進一步瞭解如何使用 Lighthouse 並貢獻心力。
立即開始
選擇最適合您的 Lighthouse 工作流程:
- 在 Chrome 開發人員工具中。輕鬆稽核需要驗證的網頁,並以容易使用的格式閱讀報表。
- 使用指令列。透過殼層指令碼自動執行 Lighthouse。
- 做為節點模組。將 Lighthouse 整合至您的持續整合系統。
- 透過網路 UI。不必安裝任何軟體,也能執行 Lighthouse 並連結至報表。
在 Chrome 開發人員工具中執行 Lighthouse
Lighthouse 在 Chrome 開發人員工具中提供了專屬面板。執行報表的方式如下:
- 下載 Google Chrome 電腦版。
- 在 Google Chrome 中,前往要稽核的網址。您可以稽核網路上的任何網址。
- 開啟 Chrome 開發人員工具。
按一下「Lighthouse」分頁標籤。
按一下「分析網頁載入」。開發人員工具會顯示稽核類別清單。讓這些變數全部啟用。
按一下「執行稽核」。30 到 60 秒後,Lighthouse 會在頁面上提供報表。
安裝並執行節點指令列工具
如要安裝節點模組:
- 下載 Google Chrome 電腦版。
- 安裝目前的 Node 長期支援版本。
- 安裝 Lighthouse。
-g
標記會將其安裝為全域模組。
npm install -g lighthouse
如何執行稽核:
lighthouse <url>
如要查看所有選項:
lighthouse --help
以程式輔助方式執行節點模組
如需以程式輔助方式執行 Lighthouse 的範例,請參閱「透過程式使用」這個節點模組。
執行 PageSpeed Insights
如要針對 PageSpeed Insights 執行 Lighthouse:
- 前往 PageSpeed Insights。
- 請輸入網頁網址。
點選「分析」。
將 Lighthouse 做為 Chrome 擴充功能執行
如何安裝擴充功能:
- 下載 Google Chrome 電腦版。
- 從 Chrome 線上應用程式商店安裝 Lighthouse Chrome 擴充功能。
如何執行稽核:
- 在 Chrome 中,前往您要稽核的網頁。
按一下 Lighthouse。這個按鈕應該位於 Chrome 網址列旁邊。如果沒有,請開啟 Chrome 擴充功能選單,並從中存取擴充功能。點選後,Lighthouse 選單就會展開。
按一下「產生報表」。Lighthouse 會針對目前聚焦的頁面執行稽核,然後開啟新分頁並顯示結果報告。
線上分享及查看報表
使用 Lighthouse 檢視器,在線上查看及共用報表。
以 JSON 格式分享報表
Lighthouse 檢視器需要 Lighthouse 報告 JSON 輸出內容。根據您使用的 Lighthouse 工作流程,下表說明如何取得 JSON 輸出內容:
- Lighthouse 報告。開啟右上方的 選單,然後點選 「另存為 JSON」。
- 指令列:執行:
shell lighthouse --output json --output-path <path/for/output.json>
如何查看報表資料:
- 開啟 Lighthouse 檢視器。
- 將 JSON 檔案拖曳至檢視器中,或按一下檢視器的任一處,開啟檔案導覽器並選取檔案。
以 GitHub Gist 的身分分享報告
如果不想手動傳送 JSON 檔案,也可以將報表以機密 GitHub 文件的形式分享。專家的其中一項優點是免費版本管控。
如要從報表中將報表匯出為集合:
- (如果你已在檢視器中,請略過這個步驟) 開啟右上方的 選單,然後按一下 「在檢視器中開啟」。報表會在「檢視器」(位於
https://googlechrome.github.io/lighthouse/viewer/
) 中開啟。 - 在「檢視器」中開啟右上方的 選單,然後按一下 「另存為 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 相關的其他事項。