谷歌性能測評工具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 指標顯示異常，錯誤如下：

       

 

 

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