【性能優化】性能測量工具-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 進行測試
1.命令行工具則允許開發者將 Lighthouse 集成到持續集成系統。
2.安裝 Lighthouse 作為一個全局節點模塊 npm install -g lighthouse
針對一個頁面運行 Lighthouse 審查 lighthouse https://www.taobao.com
3.最后命令行中會輸出一個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 中使用
1.按下Command+Opiton+I(Mac)或者Control+shift+I (Windows, Linux) 來打開Devtools
2.點擊LightHouse面板(舊版本的Chrome瀏覽器是 Audits 面板)，可以看到如下界面
3.在 Device 選擇測試模擬的設備，在 Categorle 中選擇性能評估的類別，比如我們測試淘寶首頁，選擇測試PC端的網頁性能
4.點擊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流程，作為測試的一種，保證我們上線的功能在大多環境下有著優秀的表現。
