性能測評工具lighthouse的使用

本文轉載自查看原文 2021-01-05 16:09 5019

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

Lighthouse 是一個網站性能測評工具，它是 Google Chrome 推出的一個開源自動化工具，能夠對 PWA 和網頁多方面的效果指標進行評測，並給出最佳實踐的建議以幫助開發者改進網站的質量。

它能夠生成一個有關頁面性能的報告，通過報告我們就可以知道需要采取哪些措施來改進應用的性能和體驗。

1.1、什么是PWA

PWA，全稱直譯過來就是漸進式網頁應用（ProgressiveWebApp）。它是一種網頁應用，它可以離線使用，可以變成獨立應用安裝到系統中。它非常的輕量化，在多平台上面擁有一致的界面。

PWA 可以在瀏覽器上訪問，也可以單獨安裝成一個應用在系統上。

在電腦端，最簡單的就是使用Chrome瀏覽器。當Chrome檢測到當前訪問的網頁支持PWA的時候，在地址欄的右端就會出現一個安裝按鈕，點擊即可將這個PWA變成一個應用安裝到瀏覽器中。而在Android上，使用Chrome瀏覽PWA站點時也會有相應的提示，添加到應用之后就會自動進行編譯安裝。iOS上面使用Safari打開網站然后在菜單中選擇添加到Home Screen就可以了，之后點開應用圖標就會以獨立應用形式出現，而不是通過Safari加載網頁。

一些可用的 PWA 應用：微博 PWA（https://m.weibo.cn/beta）和飛豬（https://h5.m.taobao.com/trip/home-pwa/index.html?_projVer=0.1.131）。有興趣的打開看看，可以看到瀏覽器右上角有一個安裝按鈕，點擊即可將該應用安裝到系統中

參考：https://www.jiangweishan.com/article/html9234jsldkjflsdjf.html

有多種方法可以使用lighthouse來對我們的網站進行性能測評，在需要使用到 node 時，node 的版本會對 lighthouse 有影響，低版本的 node 將執行不了 lighthouse，node版本應該保持 8.9 及以上版本（或更新）。

各使用方法如下：

2、使用Chrome插件lighthouse

（注意，插件的下載和報告的查看可能都需要牆后才能看）

可以在 Chrome 擴展商城里搜索 lighthouse ，或者通過以下地址來下載 lighthouse 添加至 Chrome瀏覽器中。

插件商城下載地址：https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

（上面地址應該需要牆才能訪問，這里給大家分享一個網盤下載鏈接：鏈接：https://pan.baidu.com/s/1qFv9F8mtnp1gzGI_kg3lXQ 提取碼：4ysn ）

插件安裝成功后，點擊瀏覽器的右上方可以看到燈塔的按鈕標記。

先訪問需要評估的網站，比如 http://www.baidu.com，然后點擊燈塔按鈕，選擇 generate report 即可。lighthouse 會運行一系列的測試審查這個頁面，然后它會把關於頁面執行的一些性能指標以報告的形式展示給你。你可以參考這份報告中的一些指標提示來提升你的網站應用。Lighthouse 能夠生成一份 JSON 或 HTML 報告，比如下圖：

lighthouse 可以生成 HTML 和 json 格式的報告，HTML 可以直接打開，json 格式的報告可以通過 https://googlechrome.github.io/lighthouse/viewer/ 這個地址來打開。

3、直接使用Chrome瀏覽器開發者工具（F12）自帶功能

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

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

4、使用npm包lighthouse

通過下載 npm 全局包 lighthouse，我們可以直接在命令行當中使用 lighthouse 來對網站進行性能測評。

首先，需要先安裝 Node，需要 Node 8 LTS(8.9) 及以上版本。然后安裝全局包 lighthouse：

npm install -g lighthouse

安裝完成后我們就可以直接對某一個網站運行 lighthouse 命令了：

lighthouse http://www.baidu.com/

默認情況下，會在執行命令的當前目錄下生成一個 HTML 文件，直接打開該文件即可查看報告

Lighthouse 命令提供了多個參數，通過參數的配置，能夠更靈活地進行測評並輸出報告結果。常用的參數有：

lighthouse <url> <options>

lighthouse --help   //輸入 --help 選項可以查看可用的輸入、輸出選項

lighthouse http://www.baidu.com --view   //直接通過瀏覽器打開HTML報告

lighthouse http://www.baidu.com --output json  //結果以 json 格式文件輸出

lighthouse http://www.baidu.com --output json --output-path ./myfile.json   //指定結果文件輸出的目錄

lighthouse https://baidu.com --output html --output-path ./report.html   //指定結果文件輸出的目錄

其他參數可參考 lighthouse的 github 官網：https://github.com/GoogleChrome/lighthouse

5、直接克隆github上的lighthouse開源項目

我們可以通過直接克隆 github 上的 lighthouse 開源項目，然后通過開源項目來執行 lighthouse 命令。

先克隆項目，下載依賴：

git clone https://github.com/GoogleChrome/lighthouse    //克隆項目

cd lighthouse   //切換至項目根目錄

npm install   //下載依賴

npm run build-all    //貌似這一步不執行也可以。這一步編譯可能會有錯，但不影響后面執行

然后執行 lighthouse 命令對網站進行測評：

node lighthouse-cli http://www.baidu.com

6、在node中以編程方式引入lighthouse模塊

我們可以直接在我們的代碼當中引入 lighthouse 模塊，以編程開發的方式引入 lighthouse 功能。但需注意，lighthouse 是一個 node 節點模塊，我們只能在服務器當中運行它（比如可以使用 nodejs），不能在類似於 vue 等項目當中引用它。

比如我們創建一個 nodejs 項目，先使用 npm init 初始化一個項目。然后安裝 lighthouse 和 chrome-launcher 依賴，最后執行即可。chrome-launcher 用於調起瀏覽器。

比如創建了一個 lighthouseTEST 文件夾，先使用 npm 初始化該項目：

npm init   //在項目根目錄下執行npm init，初始化項目

下載依賴：

npm install lighthouse chrome-launcher --save

創建一個 js 文件，比如 server.js：

const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');   //chrome-launcher 用於調起瀏覽器

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});   //chromeLauncher 工具包提供了 launch 方法，接收一個啟動所需的參數對象，這個參數用於配置 chrome 的啟動環境、啟動方式等。該方法返回一個Chrome實例

  //lighthouse運行的一些配置信息
  const options = {logLevel: 'info', output: 'html',  port: chrome.port};

  //執行lighthouse得到執行結果，執行結果是一個JS對象
  const runnerResult = await lighthouse('https://www.baidu.com', options);

  //通過lighthouse的運行結果的report屬性值拿到運行報告，運行報告是用於 HTML/JSON/CSV 輸出結果的一個字符串
  const reportHtml = runnerResult.report;

  //生成結果文件
  fs.writeFileSync('lhreport.html', reportHtml);

  //關閉Chrome瀏覽器進程
  await chrome.kill();
})();

執行 server.js 文件：

node server.js

執行完 node server.js 命令后將會在當前目錄下生成一份 HTML 報告文件，打開HTML文件即可查看報告。

項目目錄結構如下：

參考：https://github.com/GoogleChrome/lighthouse/blob/master/docs/readme.md#using-programmatically

6.1、代碼及配置分析

const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});

  //lighthouse運行的一些配置信息
  const options = {logLevel: 'info', output: 'html',  port: chrome.port};

  //執行lighthouse得到執行結果，執行結果是一個JS對象
  const runnerResult = await lighthouse('https://www.baidu.com', options);

  //通過lighthouse的運行結果的report屬性拿到運行報告，運行報告是一個string
  const reportHtml = runnerResult.report;

  //生成結果文件
  fs.writeFileSync('lhreport.html', reportHtml);

  //關閉Chrome瀏覽器進程
  await chrome.kill();
})();

默認的運行結果有五個指標（performance、accessiblity、best practices、seo、progressive web app）。

6.1.1、options配置對象

有時候可能我們只關注某一些指標，比如性能指標 performance，這時候我們可以給 options 里面添加屬性 onlyCategories ，此時運行結果將只會包含 performance 指標：

const options = {onlyCategories: ['performance']};

options 里面的 logLevel: 'info' 表示 lighthouse 運行過程中輸出的日志級別，如果不想要運行過程中輸出日志，將該屬性去掉即可。

6.1.2、額外的config配置對象

另外，我們可以將額外的一個配置對象作為第三個參數傳遞給 lighthouse 函數，這個 config 參數能夠幫助我們更細粒度地去控制整個測評。

比如可以將下面的 config 對象作為第三個參數傳遞給 lighthouse 函數，它在繼承默認的配置的基礎上進行了一定的自定義：

const config = {
    extends: 'lighthouse:default',
    audits: [
        'autocomplete',
        'large-javascript-libraries',
        'script-treemap-data',
    ],
    categories: {
        // @ts-ignore: `title` is required in CategoryJson. setting to the same value as the default
        // config is awkward - easier to omit the property here. Will defer to default config.
        'performance': {
        　　auditRefs: [
            　　{id: 'large-javascript-libraries', weight: 0, group: 'diagnostics'},
        　　],
        },
        // @ts-ignore: `title` is required in CategoryJson. setting to the same value as the default
        // config is awkward - easier to omit the property here. Will defer to default config.
        'best-practices': {
        　　auditRefs: [
           　　 {id: 'autocomplete', weight: 0, group: 'best-practices-ux'},
      　　  ],
        },
    },
};

使用額外的自定義配置，你可以限制審核的運行，在特殊條件下添加頁面的其他負載，添加自己的自定義檢查，調整評分等。

可以在通過命令行使用Lighthouse或自己使用 node 模塊時指定自定義配置文件：

//下面是自定義配置文件 custom-config.js 的內容：
module.exports = {
  extends: 'lighthouse:default',
  settings: {
    onlyAudits: [
      'first-meaningful-paint',
      'speed-index',
      'first-cpu-idle',
      'interactive',
    ],
  },
};

在命令中使用：

lighthouse --config-path=path/to/custom-config.js https://example.com

在 node 模塊中使用：

const lighthouse = require('lighthouse');
const config = require('./path/to/custom-config.js');
lighthouse('https://example.com/', {port: 9222}, config);

參考：https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md

7、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/ 目錄，然后退出進程：

lighthouse https://example.com/ -G

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

lighthouse https://example.com/ -A

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

lighthouse https://example.com -GA

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

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

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

8、lighthouse報告的指標分析

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

8.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 指的是現在存在的問題，為進一步改善性能的實驗和調整給出了指導。這兩者不會納入分數的計算。

8.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

8.2、訪問無障礙（Accessibility）

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

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

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

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

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

8.4、搜索引擎優化（SEO）

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

8.5、PWA（Progressive Web App）

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

快速可靠：

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

可安裝：