谷歌性能測評工具lighthouse使用

1、谷歌插件lighthouse的基本介紹

Lighthouse 是一個網(wǎng)站性能測評工具，它是 Google Chrome 推出的一個開源自動化工具，能夠?qū)?PWA 和網(wǎng)頁多方面的效果指標(biāo)進行評測，并給出最佳實踐的建議以幫助開發(fā)者改進網(wǎng)站的質(zhì)量。它的使用方法也非常簡單，我們只需要提供一個要測評的網(wǎng)址，它將針對此頁面運行一系列的測試，然后生成一個有關(guān)頁面性能的報告。通過報告我們就可以知道需要采取哪些措施來改進應(yīng)用的性能和體驗。

2、lighthouse使用指南

在高版本（應(yīng)該是 >= 60）的 Chrome 瀏覽器中，Lighthouse 已經(jīng)直接集成到了調(diào)試工具 DevTools 中了，因此不需要進行任何安裝或下載。

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

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

Chrome 瀏覽器插件。Chrome 插件的形式提供了更加友好的用戶界面，方便讀取報告。
Chrome DevTools。該工具集成在最新版本的 Chrome 瀏覽器中，無需安裝即可使用。
Lighthouse CLI 命令行工具。方便將 Lighthouse 集成到持續(xù)集成系統(tǒng)中。
編程的方式。我們也能通過 Node.js 模塊引入 Lighthouse 工具包，以編程的形式來使用它。

3、lighthouse生成網(wǎng)站報告

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

lighthouse 會運行一系列的測試審查這個頁面，然后它會把關(guān)于頁面執(zhí)行的一些性能指標(biāo)以報告的形式展示給你。你可以參考這份報告中的一些指標(biāo)提示來提升你的網(wǎng)站應(yīng)用。Lighthouse 能夠生成一份 JSON 或 HTML 報告，HTML 可以直接打開，json 格式的報告可以通過 https://googlechrome.github.io/lighthouse/viewer/ 這個地址來打開。如圖所示：

4、lighthouse 運行的生命周期

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

Collecting（收集數(shù)據(jù)）：首先是 Collecting 流程，這一步會調(diào)用內(nèi)置的驅(qū)動程序（Driver），其作用是通過谷歌開發(fā)工具協(xié)議（ Chrome DevTools Protocol）調(diào)起瀏覽器，并創(chuàng)建新的 tab 請求待測評的站點，通過瀏覽器采集站點數(shù)據(jù)并將結(jié)果（稱之為 Artifacts）保存在本地臨時目錄。

Auditing（分析數(shù)據(jù)）：然后進入 Auditing 流程，讀取 Artifacts 數(shù)據(jù)，根據(jù)內(nèi)置的評判策略逐條進行檢查并計算出各項的數(shù)字形式得分。

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

如下圖：

命令行工具基于此提供了生命周期的選項，我們可以讓 CLI 只運行整個測評過程的一個或多個特定生命周期。比如，使用 --gather-mode（-G）只進行資源采集的生命周期，命令行工具將會啟動瀏覽器，采集被測試站點的相關(guān)數(shù)據(jù)，并將結(jié)果以 json 的形式存儲到本地，默認是 ./latest-run/ 目錄，然后退出進程：

lighthouse https://example.com/ -G

如果想要跳過瀏覽器的交互，直接從本地讀取頁面的臨時數(shù)據(jù)，運行測評和產(chǎn)出結(jié)果報告，則可以使用 --audit-mode（-A），默認將從 ./latest-run/ 目錄讀取：

lighthouse https://example.com/ -A

兩個選項同時使用，就會運行整個測評的生命周期，與直接運行 lighthouse 命令相比，會在當(dāng)前目錄保存一份測試站點的數(shù)據(jù)。

lighthouse https://example.com -GA

如果不想使用默認的 ./latest-run/ 目錄，我們也能自定義站點的 json 數(shù)據(jù)的保存目錄，如：

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

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

5、lighthouse 報告的指標(biāo)分析

使用 Lighthouse 對網(wǎng)站進行測評后，我們會得到一份評分報告，它包含了性能（Performance），訪問無障礙（Accessibility），最佳實踐（Best Practice），搜索引擎優(yōu)化（SEO），PWA（Progressive Web App）五個部分：

5.1、性能（Performance）

性能評分的分值區(qū)間是0到100，如果出現(xiàn)0分，通常是在運行 Lighthouse 時發(fā)生了錯誤，滿分100分代表了網(wǎng)站已經(jīng)達到了98分位值的數(shù)據(jù)，而50分則是75分位值的數(shù)據(jù)。

影響評分的性能指標(biāo)：性能測試結(jié)果會分成 Metrics，Diagnostic，Opportunities 三部分，但只有 Metrics 部分的指標(biāo)項會對分數(shù)產(chǎn)生直接影響。

Lighthouse 會衡量以下 Metrics 性能指標(biāo)項：

首次內(nèi)容繪制（First Contentful Paint）。即瀏覽器首次將任意內(nèi)容（如文字、圖像、canvas 等）繪制到屏幕上的時間點。
首次有效繪制（First Meaningful Paint）。衡量了用戶感知頁面的主要內(nèi)容（primary content）可見的時間。對于不同的站點，首要內(nèi)容是不同的，例如：對于博客文章，標(biāo)題及首屏文字是首要內(nèi)容，而對于購物網(wǎng)站來說，圖片也會變得很重要。
首次 CPU 空閑（First CPU Idle）。即頁面首次能夠?qū)斎胱龀龇磻?yīng)的時間點，其出現(xiàn)時機往往在首次有效繪制完成之后。該指標(biāo)目前仍處于實驗階段。
可交互時間（Time to Interactive）。指的是所有的頁面內(nèi)容都已經(jīng)成功加載，且能夠快速地對用戶的操作做出反應(yīng)的時間點。該指標(biāo)目前仍處于實驗階段。
速度指標(biāo)（Speed Index）。衡量了首屏可見內(nèi)容繪制在屏幕上的速度。在首次加載頁面的過程中盡量展現(xiàn)更多的內(nèi)容，往往能給用戶帶來更好的體驗，所以速度指標(biāo)的值約小越好。
輸入延遲估值（Estimated Input Latency）。這個指標(biāo)衡量了頁面對用戶輸入行為的反應(yīng)速度，其基準(zhǔn)值應(yīng)低于 50ms。

Metrics 部分的指標(biāo)項會直接影響分數(shù)，可以作為我們的主要參考點。

另外的兩部分中， Opportunities 指的是優(yōu)化機會，它提供了詳細的建議和文檔，來解釋低分的原因，幫助我們具體進行實現(xiàn)和改進。Diagnostics 指的是現(xiàn)在存在的問題，為進一步改善性能的實驗和調(diào)整給出了指導(dǎo)。這兩者不會納入分數(shù)的計算。

5.1.1、性能評分標(biāo)準(zhǔn)

每一項性能指標(biāo)對評分的貢獻都有其計算邏輯，Lighthouse 會將原始的性能值映射成為 0-100 之間的數(shù)字。

例如，FMP（First Meaningful Paint）的原始值是從頁面初始化開始到主要內(nèi)容渲染成功的耗時，根據(jù)真實站點的數(shù)據(jù)，頂級性能的站點的 FMP 值約為 1220ms，這個值會被映射成 Lighthouse 的 99 分。

針對不同的評分，Lighthouse 用了不同的顏色進行標(biāo)注，分值區(qū)間和顏色的對應(yīng)關(guān)系如下：

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

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

5.2、訪問無障礙（Accessibility）

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

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

5.3、最佳實踐（優(yōu)化）（Best Practice）

最佳實踐評分的分數(shù)區(qū)間為0-100。影響這項評分的指標(biāo)項的權(quán)重都是相同的。

比如：推薦使用 https，跨域的跳轉(zhuǎn)鏈接需要使用 rel 標(biāo)識，不能使用廢棄的 API等等。

5.4、搜索引擎優(yōu)化（SEO）

比如：圖片元素使用 alt 屬性等等提高搜索引擎搜索排名，便于搜索引擎能找到你這個網(wǎng)站。

5.5、PWA（Progressive Web App）

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

快速可靠：

頁面在移動網(wǎng)絡(luò)條件下能夠快速加載。
在離線條件下頁面能夠返回狀態(tài)碼200。這里我們可以通過 Service Worker 來實現(xiàn)離線可用。
start_url 在離線條件下返回狀態(tài)碼200。start_url 是前面章節(jié)我們提到過的 manifest.json 中的一個屬性，它指定了用戶打開該 PWA 時加載的 URL。

可安裝：