【性能優(yōu)化】性能測量工具-LightHouse
前言
工欲善其事，必先利其器。了解完性能指標之后，性能優(yōu)化的目標已經(jīng)明確了。接下來我們借助一些性能測量工具，明確網(wǎng)站距離優(yōu)化目標還有多大的差距，我將用3篇文章分別介紹3款主流的測量工具：
- Chrome DevTools Performance 主要用于日常開發(fā)過程中分析運行時的性能表現(xiàn)。
- Lighthouse 用來生成網(wǎng)頁的性能評測報告。
- WebPageTest 用來進行整體的網(wǎng)站質(zhì)量評估、一站式性能評估。
有了這3個工具我們就可以從多個維度對網(wǎng)站性能進行全方位的評估。
性能測量工具-Lighthouse
Lighthouse是Google開發(fā)的一款開源工具，提供一套全面的測試來評估網(wǎng)頁質(zhì)量，包括加載性能、可訪問性、最佳實踐和PWA。在chrome 60之后的版本，DevTool里已經(jīng)內(nèi)置了Lighthouse。
Lighthouse的目標是“Do Better Web”，旨在幫助Web開發(fā)者改進他們現(xiàn)有的Web應用程序。通過運行一整套的測試，開發(fā)者可以發(fā)現(xiàn)新的 Web 平臺 API，意識到性能的隱患，并學習(新的)最佳實踐。換句話說，就是讓開發(fā)者在 Web 開發(fā)上做得更好。
1. 使用方式
1.1 使用命令行工具 Node CLI 進行測試
1.命令行工具則允許開發(fā)者將 Lighthouse 集成到持續(xù)集成系統(tǒng)。
2.安裝 Lighthouse 作為一個全局節(jié)點模塊 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命令行參數(shù)，chrome命令行參數(shù)是Chrome為了實現(xiàn)實驗性功能、方便調(diào)試、延伸選項而做的特殊功能，目前已經(jīng)提供了一千多個參數(shù)，完整列表點這里，其中有些參數(shù)在服務器部署和運行chrome的時候很有用。
- --disable-storage-reset：在運行前不清空瀏覽器緩存和其他storage API，可以用來測二次訪問的性能情況
- --disable-device-emulation：Lighthouse默認會用Nexus 5X的模擬器測試頁面，可以用這個選項禁用掉，尤其是測試PC端頁面的時候
- --disable-network-throttling：Lighthouse默認會模擬使用fast 3G的網(wǎng)速，使用這個參數(shù)禁用掉網(wǎng)速模擬
1.2 作為node模塊使用
我們還可以將Lighthouse作為一個node模塊，在自己的工程里調(diào)用，代碼如下：
- 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. 在相同的端口運行l(wèi)ighthouse
- 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端的網(wǎng)頁性能
4.點擊Generate report按鈕，我們可以在控制臺中直接生成有關(guān)性能的評估報告
1.4 通過 Chrome 應用商店安裝擴展程序
安裝地址：https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
點擊 Generate report 按鈕以針對當前打開的頁面運行 Lighthouse 測試
瀏覽器擴展程序和 devTools 面板的區(qū)別
LightHouse 的擴展程序主要用于測試國外的網(wǎng)站，因為國內(nèi)好多網(wǎng)站沒有國際cdn，測出來的結(jié)果往往不太準確。而 devTools中的 LightHouse 面板是在本地的網(wǎng)絡環(huán)境下測試。
比如我用本地的devTools lightHouse訪問抖音官網(wǎng)，評估得分是81分，而擴展程序評估的結(jié)果減少1倍的得分，只有40分左右，就是因為CDN資源請求過長導致的。當然如果做國外網(wǎng)站的性能評估，就不用考慮這個問題。
2. 評估報告分析
2.1 整體質(zhì)量評估
整體質(zhì)量評估主要有5個方面：性能(Performance)、可訪問性(Accessibility)、網(wǎng)絡最佳實踐(Best Practies)、搜索引擎優(yōu)化(SEO)漸進式應用PWA(Progressive Web Apps)
其中PWA 是Chrome一直推的一個漸進式Web應用開發(fā)，旨在增強 Web 能力，縮小與原生應用的差距并創(chuàng)建與其類似的用戶體驗。主要包含四大模塊，這里簡答介紹一下，如下圖：
2.2 性能評估
性能評估主要包含6大指標：
- 首次有內(nèi)容繪制時間(FCP，F(xiàn)irst Contentful Paint)：用于記錄頁面首次繪制文本、圖片、非空白 Canvas 或 SVG 的時間。
- 最大內(nèi)容繪制時間(LCP，Largest Contentful Paint)：用于記錄視窗內(nèi)最大的元素繪制的時間，該時間會隨著頁面渲染變化而變化，因為頁面中的最大元素在渲染過程中可能會發(fā)生改變，另外該指標會在用戶第一次交互后停止記錄。
- 速度指數(shù)(Speed Index): 指的是網(wǎng)頁以多快的速度展示內(nèi)容，標準時間是4s。
- 阻塞交互時間(TBT, Total Blocking Time)：用戶體驗指標，代表著頁面何時真正進入可用的狀態(tài)。畢竟光內(nèi)容渲染的快也不夠，還要能迅速響應用戶的交互。
- 用戶可交互時間(TTI, Time to Interactive)：這個指標并不是指的最早的可交互時間，而是可流暢交互的時間，具體的值為FMP之后，5秒后沒有l(wèi)ong task執(zhí)行(50ms以上的任務)的時間
- 累計布局偏移(CLS, Cumulative Layout Shift)：記錄了頁面上非預期的位移波動。
2.3 優(yōu)化建議
評估之后，LightHouse會給出一些優(yōu)化建議，如圖：
我們可以看到兩條紅色的建議：
- Preload Largest Contentful Paint image：預加載最大內(nèi)容繪制圖像時間，預加載LCP元素使用的圖像以縮短LCP時間(視窗最大可見圖片或者文本塊的渲染時間)。
- Avoid multiple page redirects：避免多頁重定向，重定向會在加載頁面之前引入額外的延遲。
3. 測試流程及核心模塊
在 LightHouse 測試過程中，命令面板中會輸出測試過程中的日志，截圖顯示如下：
通過lighthouse測試過程中輸出的日志，可以畫出 Lighthouse 的測試流程圖：
- Lighthouse 與瀏覽器建立連接。
- 測試的初始化配置與加載待測試頁面。
- 在頁面加載過程中，運行一系列的采集器(Gatherers)，每個采集器都會收集自己的目標信息，并生成中間產(chǎn)物(artifacts)。
- 運行一系列的審計項(Audits)，每個審計項都會從中間產(chǎn)物(artifacts)中獲取所需的數(shù)據(jù)，計算出各自的評分。
- 基于審計項的評分計算出大類的評分，匯總生成報告。
初步了解了基本的測試流程后，我們再看下官方給出的 Lighthouse 架構(gòu)圖：
這里簡單介紹一下這幾個模塊：
- Driver 模塊：驅(qū)動器負責與瀏覽器的雙向通信、記錄事件日志、模擬器的設置等。
- Gatherer 模塊：采集者模塊會通過 pass 這個配置，定義頁面如何加載，并運行配置的所有 gatherers 來采集頁面加載過程中的信息，并生成中間產(chǎn)物 artifacts。有了 artifacts，就可以進入下一步的 Audits 模塊。
- Audits 模塊：審計模塊，與 gatherers 類似，在配置文件中也會定義需要運行的 audits，每一個 audits 也都有與之對應的同名實現(xiàn)文件。當運行完配置文件中定義的所有審計項后，就得到了每個審計項的評分與詳情，后續(xù)就進入 Report 模塊。
- Report 模塊：報告模塊的配置文件中，會定義每個測試類別所需的審計項，以及每個審計項所占的權(quán)重。
在最終匯總階段，Lighthouse 會基于該配置文件以及上一個環(huán)節(jié)中計算出的每個審計項的評分，加權(quán)計算出 performance 的評分。并基于每個審計項的評分與種類，將審計項劃分為通過與不通過，對于不通過的審計項會給出詳細的測試詳情與優(yōu)化指引。
最后
Lighthouse可以作為集成性能測試工具。為我們提供標準的性能報告，在使用過程中我們可以將其集成于CD流程，作為測試的一種，保證我們上線的功能在大多環(huán)境下有著優(yōu)秀的表現(xiàn)。
