Lighthouse - 網站開發必備測量工具介紹

Lab Dev Note
1

Chrome LightHouse

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://university.tenten.co的lighthouse審核報告Demo

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

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

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

LightHouse 有三種工作流程

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

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

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

在命令行上使用 lighthouse 也很酷，（對於極客來說 ）

讓我們開始吧！！！

[1] 在Chrome DevTools 中運行 Lighthouse

  • 下載Google瀏覽器網頁瀏覽器此處

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

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

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

  • 打開 Chrome DevTools
Command+Option+C (Mac)
Control+Shift+C (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 選項將其安裝為全局模塊。

  • 運行審核

bash lighthouse

例如：

bash lighthouse https://tenten.co/

Lighthouse 默認生成 HTML 格式的報告文件。你可以通過添加控制選項來控制輸出的格式。

報告能夠以 HTML 或 JSON 格式顯示。

輸出樣本：

lighthouse
# saves `./_.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 `./_.report.json` and `./_.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 會針對打開的頁面運行審核，然後打開一個新選項卡，其中包含結果報告。

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

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

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