頁面審核工具 Chrome Lighthouse 簡介

頁面審核工具 Chrome Lighthouse 簡介

作者:Bolaji Ayodeji
翻譯:瘋狂的技術宅
原文: freecodecamp.org/news/i
未經允許嚴禁轉載

Chrome Lighthouse 已經存在了一段時間了,但如果我要求你解釋一下它能做什麼,你能解釋清楚嗎?

我發現許多 Web 開發人員包括初學者,都沒有聽說過這個工具,而那些尚未嘗試過的人,一點也不酷 。

在本文中,我將向你介紹 Chrome Lighthouse 的作用以及如何使用它。

讓我們開始吧


根據維琪百科,lighthouse是一座塔樓、建築物或其他類型的結構,它用燈和鏡頭系統發出光線,作為海上或內陸水道船舶的導航設備

好吧,讓我們把它變成一個技術術語;

Lighthouse 是一個塔樓,建築物或其他類型的結構,它在 Chrome 開發者工具的"審核"面板下的系統發出光線,並作為開發人員的指南

有道理嗎?

好吧,Lighthouse 是 Google 開發的一款工具,用於分析網路應用和網頁,收集現代性能指標並提供對開發人員最佳實踐的意見。

可以將 Lighthouse 看作是汽車中用來檢查和平衡汽車速度限制的車速表。

一般情況下 Lighthouse 與開發最佳實踐和性能指標一起使用。 它在 Web 應用上運行檢查,併為你提供有關錯誤的反饋、低於標準的實踐、更好的性能提示以及如何解決這些問題。

根據Google Developers Docs上的描述

Lighthouse 是一種開源的自動化工具,用於提高網頁品質。 你可以在任何網頁上運行它。 它能夠針對性能、可訪問性、漸進式 Web 應用等進行審核。
你可以在 Chrome DevTools 中從命令行運行 Lighthouse,也可以作為 Node.js 模組運行。 當你向 Lighthouse 提供了一個 URL 來進行審核時,它會針對該頁面運行一系列審核,然後生成一個關於該頁面執行情況的報告。 這份報告可以作為如何改進頁面的指標。 每次審核都會產生一份參考文檔,解釋了這些審核為什麼重要,以及如何解決等內容。

這幾乎都與 Lighthouse 有關,它會審核 Web 應用的 URL 並根據 Web 標準和開發人員最佳實踐生成一份報告,告訴你 Web 應用的糟糕程度。 報告的每個部分還附有文檔,說明你的應用哪些部分已經通過審核,為什麼你應該改進應用的某一部分以及如何去解決它。

以下是此部落格https://bolajiayodeji.com的lighthouse審核報告演示

左:我的部落格 右:Lighthouse 審核報告

很酷吧?

應該注意的是,在我的第一次審計中,並沒有得到這樣的好成績。 所以我用第一份報告來修復和改善自己程式的性能和品質。

這是 Lighthouse 目的:它識別和修復影響你網站性能、可訪問性和用戶體驗的常見問題。


現在,讓我們進入到有趣的部分,如何開始使用它!!

LightHouse 有三種工作流程

  • Chrome 開發者工具
  • 命令列 (Node.js)
  • Chrome 擴充程式

我個人更喜歡在 Dev Tools 中使用 LightHouse。 使用擴展程式沒有意義,因為開發工具和擴展程式在同一個 Chrome 瀏覽器中工作,我們的偏好不同,你可以選擇最適合自己的方法。

Lighthouse 在添加到 Chrome DevTools 之前首先只能使用 Chrome 擴展程式。

在命令行上使用 lighthouse 也很酷,(對於極客來說 )

讓我們開始吧!!!


[1] 在Chrome DevTools 中運行 Lighthouse

  • 下載谷歌瀏覽器網頁瀏覽器這個處

注意:Lighthouse 只能在桌面上運行

  • 轉到你要在Google Chrome中審核的URL。

你可以審核網路上的任何 URL。

  • 打開 Chrome DevTools
(Mac)
(Windows, Linux, Chrome OS).
  • 按兩下 Audits 面板

左側是將被審核的頁面,這是我的部落格 。 右側是 Chrome DevTools 的 Audits 面板,現在由 Lighthouse 提供支援

  • 點擊 Run audits

DevTools 顯示審計類別清單。 確保將它們全部被選中。 如果你想個人化要審核的哪個部分,可以通過選中要審核的類別來設置。

  • 60 至 90 秒後 —— 根據你的網速,Lighthouse 會在頁面上為你提供報告。

並非只有網速和預安裝的擴展可能會影響lighthouse審核。 為了獲得更好的體驗,請在 Icognito 模式下進行審核來避免所有的干擾

[2] 在命令行中運行lighthouse

npm install -g lighthouse
# or use yarn:
yarn global add lighthouse

用 -g 選項將其安裝為全域模組。

  • 運行審核
lighthouse <url>

例如:

lighthouse https://bolajiayodeji.com/

Lighthouse 預設生成 HTML 格式的報告檔。 你可以通過添加控制選項來控制輸出的格式。

報告能夠以 HTMLJSON 格式顯示。

輸出樣本:

lighthouse
# saves ./<HOST>_<DATE>.report.html

lighthouse --output json
# json output sent to stdout

lighthouse --output html --output-path ./report.html
# saves ./report.html# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves ./myfile.report.json and ./myfile.report.html

lighthouse --output json --output html
# saves ./<HOST>_<DATE>.report.json and ./<HOST>_<DATE>.report.html

lighthouse --output-path=~/mydir/foo.out --save-assets
# saves ~/mydir/foo.report.html# saves ~/mydir/foo-0.trace.json and ~/mydir/foo-0.devtoolslog.json

lighthouse --output-path=./report.json --output json
# saves ./report.json

通過運行 $ lighthouse --help 來查看為 CLI 選項

[3] 使用 Chrome 擴展程式運行 Lighthouse

正如我之前所說,DevTools工作流程是最好的,因為它除了與擴展工作流程相同之外,還有額外的好處:無需進行安裝。

To use this method you need to install the extension, but If you have your reasons, here is the guide; 要使用此方法,你需要安裝擴展程式,如果你有自己的理由的話。 這是按照指南:

它應該在 Chrome 位址欄旁邊。 如果沒有,請打開Chrome的主功能表(右上角的三個點),然後在功能表頂部訪問它。 點擊後會展開 Lighthouse 功能表。

  • 按兩下 Generate report

Lighthouse 會針對打開的頁面運行審核,然後打開一個新選項卡,其中包含結果報告。

Bingo! 你做到了~


就這些,Lighthouse 是一個很好的工具,尤其適合初學者。

在審核 Progressive Web 應用時,它是一個非常有用的工具。

當我開始使用 Lighthouse 時,實際上學到了很多優化和性能標準。 相信你很快就能夠成為能夠構建具有出色性能、可訪問性和用戶體驗的Web應用專家。 🙂

Lighthouse 不是魔術,它是由人類創造的。 它是開源的,歡迎對其作出你的貢獻。 可以通過查看 github 上的 issue 追蹤器,找到可以修復的錯誤,或者創建和改進審核過程。 issue 跟蹤器也是討論審計指標,新審計想法或與 Lighthouse 相關的任何內容的好去處。

歡迎關注前端公眾號:前端先鋒,獲取前端工程化實用工具包。

想了解更多關於 Facebook 與 Google 廣告投放?

谷歌的5大搜尋引擎優化工具

Lighthouse – Chrome 團隊開源的網站性能評測工具