谷歌效能測評工具lighthouse使用

1、谷歌外掛lighthouse的基本介紹

Lighthouse 是一個網站效能測評工具， 它是 Google Chrome 推出的一個開源自動化工具，能夠對 PWA 和網頁多方面的效果指標進行評測，並給出最佳實踐的建議以幫助開發者改進網站的質量。它的使用方法也非常簡單，我們只需要提供一個要測評的網址，它將針對此頁面執行一系列的測試，然後生成一個有關頁面效能的報告。通過報告我們就可以知道需要採取哪些措施來改進應用的效能和體驗。

2、lighthouse使用指南

在高版本（應該是 >= 60）的 Chrome 瀏覽器中，Lighthouse 已經直接整合到了除錯工具 DevTools 中了，因此不需要進行任何安裝或下載。

按 F12 開啟開發者工具，可以看到在 console、security 等選項後面有一個 Audits （安裝了lighthouse外掛或者是高版本的谷歌瀏覽器可能顯示的是 lighthouse）選項，選擇該選項，然後點選 generate report 即可。

針對不同的適用場景，我們可以通過多種方式來安裝並使用 Lighthouse：

• Chrome 瀏覽器外掛。Chrome 外掛的形式提供了更加友好的使用者介面，方便讀取報告。
• Chrome DevTools。該工具整合在最新版本的 Chrome 瀏覽器中，無需安裝即可使用。
• Lighthouse CLI 命令列工具。方便將 Lighthouse 整合到持續整合系統中。
• 程式設計的方式。我們也能通過 Node.js 模組引入 Lighthouse 工具包，以程式設計的形式來使用它。

3、lighthouse生成網站報告

先訪問需要評估的網站，比如 http://www.baidu.com，然後點選燈塔按鈕，選擇 generate report 即可。如下圖：

 

 

 

lighthouse 會執行一系列的測試審查這個頁面，然後它會把關於頁面執行的一些效能指標以報告的形式展示給你。你可以參考這份報告中的一些指標提示來提升你的網站應用。Lighthouse 能夠生成一份 JSON 或 HTML 報告，HTML 可以直接開啟，json 格式的報告可以通過 https://googlechrome.github.io/lighthouse/viewer/ 這個地址來開啟。如圖所示：

 

 

 

4、lighthouse 執行的生命週期

Lighthouse 執行測評的過程有一套完整的生命週期，可以劃分成三個主要流程：

Collecting（收集資料）：首先是 Collecting 流程，這一步會呼叫內建的驅動程式（Driver） ，其作用是通過谷歌開發工具協議（ Chrome DevTools Protocol） 調起瀏覽器，並建立新的 tab 請求待測評的站點，通過瀏覽器採集站點資料並將結果（稱之為 Artifacts）儲存在本地臨時目錄。

Auditing（分析資料）：然後進入 Auditing 流程，讀取 Artifacts 資料，根據內建的評判策略逐條進行檢查並計算出各項的數字形式得分。

Report（生成報告）：最後進行 Report 流程，將評分結果按照 PWA、效能、無障礙訪問、最佳實踐等緯度進行劃分，以 JSON、HTML 等格式輸出。

如下圖：

 

 

 

命令列工具基於此提供了生命週期的選項，我們可以讓 CLI 只執行整個測評過程的一個或多個特定生命週期。比如，使用 --gather-mode（-G）只進行資源採集的生命週期，命令列工具將會啟動瀏覽器，採集被測試站點的相關資料，並將結果以 json 的形式儲存到本地，預設是 ./latest-run/ 目錄，然後退出程式：

1. lighthouse https://example.com/ -G

如果想要跳過瀏覽器的互動，直接從本地讀取頁面的臨時資料，執行測評和產出結果報告，則可以使用 --audit-mode（-A），預設將從 ./latest-run/ 目錄讀取：

1. lighthouse https://example.com/ -A

兩個選項同時使用，就會執行整個測評的生命週期，與直接執行 lighthouse 命令相比，會在當前目錄儲存一份測試站點的資料。

1. lighthouse https://example.com -GA

如果不想使用預設的 ./latest-run/ 目錄，我們也能自定義站點的 json 資料的儲存目錄，如：

1. lighthouse -GA=./mycustomfolder https://example.com

參考：https://lavas-project.github.io/pwa-book/appendix01.html

5、lighthouse 報告的指標分析

使用 Lighthouse 對網站進行測評後，我們會得到一份評分報告，它包含了效能（Performance），訪問無障礙（Accessibility），最佳實踐（Best Practice），搜尋引擎優化（SEO），PWA（Progressive Web App）五個部分：

 

 

 

5.1、效能（Performance）

效能評分的分值區間是0到100，如果出現0分，通常是在執行 Lighthouse 時發生了錯誤，滿分100分代表了網站已經達到了98分位值的資料，而50分則是75分位值的資料。

影響評分的效能指標：效能測試結果會分成 Metrics，Diagnostic，Opportunities 三部分，但只有 Metrics 部分的指標項會對分數產生直接影響。

Lighthouse 會衡量以下 Metrics 效能指標項：

• 首次內容繪製（First Contentful Paint）。即瀏覽器首次將任意內容（如文字、影像、canvas 等）繪製到螢幕上的時間點。
• 首次有效繪製（First Meaningful Paint）。衡量了使用者感知頁面的主要內容（primary content）可見的時間。對於不同的站點，首要內容是不同的，例如：對於部落格文章，標題及首屏文字是首要內容，而對於購物網站來說，圖片也會變得很重要。
• 首次 CPU 空閒（First CPU Idle）。即頁面首次能夠對輸入做出反應的時間點，其出現時機往往在首次有效繪製完成之後。該指標目前仍處於實驗階段。
• 可互動時間（Time to Interactive）。指的是所有的頁面內容都已經成功載入，且能夠快速地對使用者的操作做出反應的時間點。該指標目前仍處於實驗階段。
• 速度指標（Speed Index）。衡量了首屏可見內容繪製在螢幕上的速度。在首次載入頁面的過程中儘量展現更多的內容，往往能給使用者帶來更好的體驗，所以速度指標的值約小越好。
• 輸入延遲估值（Estimated Input Latency）。這個指標衡量了頁面對使用者輸入行為的反應速度，其基準值應低於 50ms。

Metrics 部分的指標項會直接影響分數，可以作為我們的主要參考點。

 

另外的兩部分中， Opportunities 指的是優化機會，它提供了詳細的建議和文件，來解釋低分的原因，幫助我們具體進行實現和改進。Diagnostics 指的是現在存在的問題，為進一步改善效能的實驗和調整給出了指導。這兩者不會納入分數的計算。

5.1.1、效能評分標準

每一項效能指標對評分的貢獻都有其計算邏輯，Lighthouse 會將原始的效能值對映成為 0-100 之間的數字。

例如，FMP（First Meaningful Paint）的原始值是從頁面初始化開始到主要內容渲染成功的耗時，根據真實站點的資料，頂級效能的站點的 FMP 值約為 1220ms，這個值會被對映成 Lighthouse 的 99 分。

針對不同的評分，Lighthouse 用了不同的顏色進行標註，分值區間和顏色的對應關係如下：

• 0 - 49（慢）：紅色
• 50 - 89（平均值）： 橙色
• 90 - 100（快）： 綠色

各個指標對效能評分的貢獻並不相同，權重較大的指標，對效能評分的影響更大一些。各指標權重分配情況可參考：https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0

 

5.2、訪問無障礙（Accessibility）

訪問無障礙評分的分值由相關指標的加權平均值計算而來。可以在評分詳情查閱每項指標的具體權重。同理，較大權重的指標項對分數的影響較大。

無障礙性的每個指標項測試結果為pass或者fail，與效能指標項的計算方式不同，當頁面只是部分通過某項指標時，頁面的這項指標將不會得分。例如，如果頁面中的一些元素有螢幕閱讀器友好的命名，而其他的元素沒有，那麼這個頁面的 screenreader-friendly-names 指標項得分為0。

 

5.3、最佳實踐（優化）（Best Practice）

最佳實踐評分的分數區間為0-100。影響這項評分的指標項的權重都是相同的。

比如：推薦使用 https，跨域的跳轉連結需要使用 rel 標識，不能使用廢棄的 API等等。

 

5.4、搜尋引擎優化（SEO）

比如：圖片元素使用 alt 屬性等等提高搜尋引擎搜尋排名，便於搜尋引擎能找到你這個網站。

 

5.5、PWA（Progressive Web App）

Lighthouse 使用 PWA 基準檢查項列表（Baseline PWA Checklist）進行測評，測評結果將這些指標項分成了四個類別，共包含12個自動測試項和3個手動測試項，其中各個自動測試項的評分權重是相同的。PWA 的評測指標對我們來說非常重要，我們可以從這四個類別詳細瞭解一下基準指標項。

快速可靠：

1. 頁面在行動網路條件下能夠快速載入。
2. 在離線條件下頁面能夠返回狀態碼200。這裡我們可以通過 Service Worker 來實現離線可用。
3. start_url 在離線條件下返回狀態碼200。start_url 是前面章節我們提到過的 manifest.json 中的一個屬性，它指定了使用者開啟該 PWA 時載入的 URL。

可安裝：

1. 始終使用 HTTPS。
2. 註冊 Service Worker 來快取頁面以及 start_url。
3. 使用 manifest 檔案來實現安裝 PWA 的需求，瀏覽器能夠主動通知使用者將應用新增到桌面，增加留存率。

PWA 優化：

1. 將 HTTP 流量重定向到 HTTPS。
2. 配置自定義啟動畫面。
3. 設定位址列主題顏色。
4. 頁面內容針對視口大小自適應，對移動使用者的展示更友好。
5. 使用了 <meta name="viewport"> 標籤，並設定了 width 或 initial-scale 屬性。
6. 當 JavaScript 檔案不可用時，提供降級措施，頁面能顯示基本內容而不出現白屏。

手動測試項：

1. 站點跨瀏覽器可用，如主流瀏覽器 Chrome, Edge, Firefox 及 Safari 等。
2. 頁面間切換流暢，即使在較差的網路環境下，切換動畫也應該簡潔順暢，這是提高使用者感知體驗的關鍵。
3. 保證每個頁面都有獨一無二的 URL，能夠在新的瀏覽器視窗開啟，且方便在社交媒體上進行分享。

除了上述基準指標項之外，為了讓 PWA 的體驗更加完美，還有一些 Lighthouse 未實現檢查的進階指標，也就是可以作為示範性參考的 PWA 的指標，比如使用者體驗、快取、推送通知等等。

參考：https://lavas-project.github.io/pwa-book/appendix01/2-lighthouse-score-guide.html

 

6、node及Chrome版本要求

使用 lighthouse 時 node 和 Chrome 瀏覽器的版本有一定的要求。

node > =8.9 （未驗證）

Chrome 瀏覽器必須 >= 79 ，否則 lighthouse 可能會執行失敗，或者是某些指標無法顯示出來。比如下面我安裝的是 Chrome75.0.3770.80，使用命令列執行 lighthouse 時有兩個指標顯示異常：

 

 

 

performance 和 best practice 指標顯示異常，錯誤如下：

       

 

 

 ---------------------------------------------------------------------------------