【性能優化】性能測量工具-LightHouse

前言

工欲善其事，必先利其器。瞭解完性能指標之後，性能優化的目標已經明確了。接下來我們藉助一些性能測量工具，明確網頁距離優化目標之前還有多大的差距。一個好的工具可以讓你事半功倍，接下來我將用3篇文章分別介紹3款主流的測量工具：

Chrome DevTools Performance 主要用於日常開發過程中分析運行時的性能表現。
Lighthouse 用來生成網頁的性能評測報告。
WebPageTest 用來進行整體的網站質量評估、一站式性能評估。

有了這3個工具我們就可以從多個維度對網站性能進行全方位的評估。

性能測量工具-Lighthouse

Lighthouse是Google開發的一款開源工具，提供一套全面的測試來評估網頁品質，包括載入性能、可訪問性、最佳實踐和PWA。在chrome 60之後的版本，DevTool里已經內置了Lighthouse。

Lighthouse的目標是"Do Better Web"，旨在説明Web開發者改進他們現有的Web應用程式。通過運行一整套的測試，開發者可以發現新的 Web 平臺 API，意識到性能的隱患，並學習（新的）最佳實踐。換句話說，就是讓開發者在 Web 開發上做得更好。

1. 使用方式

1.1 使用命令行工具 Node CLI 進行測試

命令行工具則允許開發者將 Lighthouse 集成到持續整合系統。

安裝 Lighthouse 作為一個全域節點模組 npm install -g lighthouse
針對一個頁面運行 Lighthouse 審查 lighthouse https://www.taobao.com

最後命令行中會輸出一個html頁面，打開頁面我們就可以查看評估報告了

默認情況下，命令行生成的報告頁面會從性能（Performance）、易用性（Accessibility）、最佳實踐（Best Practices）、SEO、PWA支援程度等幾個方面生成評估報告。如果我們想設定類別，只進行performance 類別測試，可以在命令後面添加 --only-categories=performance 。
除此之外，lighthouse命令提供了很多選項，以下幾個是需要注意的：

--chrome-flags：用來傳入chrome命令行參數，chrome命令行參數是Chrome為了實現實驗性功能、方便調試、延伸選項而做的特殊功能，目前已經提供了一千多個參數，完整清單點這裡，其中有些參數在伺服器部署和運行chrome的時候很有用。
--disable-storage-reset：在運行前不清空瀏覽器緩存和其他storage API，可以用來測二次訪問的性能情況
--disable-device-emulation：Lighthouse預設會用Nexus 5X的模擬器測試頁面，可以用這個選項禁用掉，尤其是測試PC端頁面的時候
--disable-network-throttling：Lighthouse預設會類比使用fast 3G的網速，使用這個參數禁用掉網速類比

1.2 作為node模組使用

我們還可以將Lighthouse作為一個node模組，在自己的工程裡調用，代碼如下：

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

function launchChromeAndRunLighthouse(url, opts, config = null) {
  // 1. 使用chrome launcher打开一个chrome窗口
  return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => {
    opts.port = chrome.port;
    // 2. 在相同的端口运行lighthouse
    return lighthouse(url, opts, config).then(results =>
      chrome.kill().then(() => results));
  });
}

const opts = {
  chromeFlags: ['--show-paint-rects']
};

// Usage:
launchChromeAndRunLighthouse('https://example.com', opts).then(results => {
  // Use results!
});

1.3 在Chrome DevTools 中使用

按下Command+Opiton+I（Mac）或者Control+shift+I （Windows， Linux）來打開Devtools
點擊LightHouse面板（舊版本的Chrome瀏覽器是 Audits 面板），可以看到如下介面

Device 用來測試設備，移動端或者桌面端
Categorles 中選擇性能評估的類別

比如我們測試淘寶首頁，選擇測試PC端的網頁性能，點擊Generate report按鈕，我們可以在控制台中直接生成有關性能的評估報告

1.4 通過 Chrome 應用商店安裝擴展程式

安裝位址：https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

點擊 Generate report 按鈕以針對當前打開的頁面運行 Lighthouse 測試

瀏覽器擴展程式和 devTools 面板的區別

LightHouse 的擴展程式主要用於測試國外的網站，因為國內好多網站沒有國際cdn，測出來的結果往往不太準確。而 devTools 中的 LightHouse 面板是在本地的網路環境下測試。

比如我用本地的devTools lightHouse訪問抖音官網，評估得分是81分，而擴展程式評估的結果減少1倍的得分，只有40分左右，就是因為CDN資源請求過長導致的。當然如果做國外網站的性能評估，就不用考慮這個問題。

2. 評估報告分析

2.1 整體質量評估

整體質量評估主要有5個方面：性能（Performance）、可訪問性（Accessibility）、網路最佳實踐（Best Practies）、搜尋引擎優化（SEO）漸進式應用PWA（Progressive Web Apps）

其中PWA 是Chrome一直推的一個漸進式Web應用開發，旨在增強 Web 能力，縮小與原生應用的差距並創建與其類似的用戶體驗。主要包含四大模組，這裡簡答介紹一下，如下圖：

2.2 性能評估

性能評估主要包含6大指標：

首次有內容繪製時間（FCP，First Contentful Paint）：用於記錄頁面首次繪製文本、圖片、非空白 Canvas 或 SVG 的時間。
最大內容繪製時間（LCP，Largest Contentful Paint）：用於記錄視窗內最大的元素繪製的時間，該時間會隨著頁面渲染變化而變化，因為頁面中的最大元素在渲染過程中可能會發生改變，另外該指標會在使用者第一次交互後停止記錄。
速度指數（Speed Index）：指的是網頁以多快的速度展示內容，標準時間是4s。
阻塞交互時間（TBT， Total Blocking Time）：使用者體驗指標，代表著頁面何時真正進入可用的狀態。畢竟光內容渲染的快也不夠，還要能迅速響應使用者的交互。
用戶可交互時間（TTI， Time to Interactive）：這個指標並不是指的最早的可交互時間，而是可流暢交互的時間，具體的值為FMP之後，5秒后沒有long task執行（50ms以上的任務）的時間
累計佈局偏移（CLS， Cumulative Layout Shift）：記錄了頁面上非預期的位移波動。

2.3 優化建議

評估之後，LightHouse會給出一些優化建議，如圖：

我們可以看到兩條紅色的建議：

Preload Largest Contentful Paint image：預載入最大內容繪製圖像時間，預載入LCP元素使用的圖像以縮短LCP時間（視窗最大可見圖片或者文本塊的渲染時間）。
Avoid multiple page redirects：避免多頁重定向，重定向會在載入頁面之前引入額外的延遲。

3. 測試流程及核心模組

在 LightHouse 測試過程中，命令面板中會輸出測試過程中的日誌，截圖顯示如下：

通過lighthouse測試過程中輸出的日誌，可以畫出 Lighthouse 的測試流程圖：

Lighthouse 與瀏覽器建立連接。
測試的初始化配置與載入待測試頁面。
在頁面載入過程中，運行一系列的採集器（Gatherers），每個採集器都會收集自己的目標訊息，並生成中間產物（artifacts）。
運行一系列的審計項（Audits），每個審計項都會從中間產物（artifacts）中獲取所需的數據，計算出各自的評分。
基於審計項的評分計算出大類的評分，匯總生成報告。

初步瞭解了基本的測試流程后，我們再看下官方給出的 Lighthouse 架構圖：

這裡簡單介紹一下這幾個模組：

Driver 模組：驅動器負責與瀏覽器的雙向通信、記錄事件日誌、模擬器的設置等。
Gatherer 模組：採集者模組會通過 pass 這個配置，定義頁面如何載入，並運行配置的所有 gatherers 來採集頁面載入過程中的訊息，並生成中間產物 artifacts。有了 artifacts，就可以進入下一步的 Audits 模組。
Audits 模組：審計模組，與 gatherers 類似，在配置檔中也會定義需要運行的 audits，每一個 audits 也都有與之對應的同名實現檔。當運行完配置檔中定義的所有審計項后，就得到了每個審計項的評分與詳情，後續就進入 Report 模組。
Report 模組：報告模組的配置檔中，會定義每個測試類別所需的審計項，以及每個審計項所佔的權重。

在最終匯總階段，Lighthouse 會基於該配置檔以及上一個環節中計算出的每個審計項的評分，加權計算出 performance 的評分。並基於每個審計項的評分與種類，將審計項劃分為通過與不通過，對於不通過的審計項會給出詳細的測試詳情與優化指引。

最後

Lighthouse可以作為集成性能測試工具。為我們提供標準的性能報告，在使用過程中我們可以將其集成於CD流程，作為測試的一種，保證我們上線的功能在大多環境下有著優秀的表現。

文中如有錯誤，歡迎在評論區指正，如果這篇文章説明到了你，歡迎點讚和關注。

閱讀更多優質文章，可以關注我的微信公眾號【陽姐講前端】，每天推送高品質文章，我們一起交流成長。

【性能優化】性能測量工具-LightHouse

【性能優化】性能測量工具-LightHouse

前言

性能測量工具-Lighthouse