【性能優化】性能測量工具-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流程,作為測試的一種,保證我們上線的功能在大多環境下有著優秀的表現。
文中如有錯誤,歡迎在評論區指正,如果這篇文章説明到了你,歡迎點讚和關注。
閱讀更多優質文章,可以關注我的微信公眾號【陽姐講前端】,每天推送高品質文章,我們一起交流成長。