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