Lighthouse前端性能測試工具的使用

一、為什么要測前端性能

日常性能測試，基本上針對接口的性能測試居多，很少涉及到前端頁面的性能測試。但影響用戶體驗的因素除了后端接口數據的返回，還有前端頁面的渲染等等。所以我們除了在開發的過程中注意代碼的質量，同時還需要專業的網站測試工具輔助，讓我們知道自己的網頁還有哪些需要更為優化的方面。

Lighthouse是一個開源的自動化工具，用於幫助改進網絡應用的質量。可將其作為一個 Chrome擴展程序運行，或從命令行運行。Lighthouse分析web應用程序和web頁面，收集關於開發人員最佳實踐的現代性能指標和見解，讓開發人員根據生成的評估頁面，來進行網站優化和完善，提高用戶體驗。

二、如何安裝

安裝方式一

通過chrome的應用商店搜索Lighthouse下載安裝

 

 

安裝方式二

使用Node Cli，lighthouse依賴node 8或者更高的node版本

使用 npm install -g lighthouse 進行全局安裝

安裝后，在cmd頁面中輸入lighthouse --help，如果出現此頁面說明命令行模式的lighthouse安裝成功

 

三、如何使用

1、瀏覽器中使用

瀏覽器在安裝好lighthouse之后，打開需要測試的網頁，按F12打開調試模式，會在瀏覽器右上角出現Lighthouse圖標，如圖所示，點擊Generate report 按鈕，即可以看到最終的性能檢測報告。

 

 

2、命令行中使用

打開cmd，在其中輸入如下命令並回車，lighthouse命令后面跟的是待壓測的頁面地址以及參數

lighthouse 待測頁面地址 --chrome-flags="--headless" --only-categories=performance --locale zh

--chrome-flags="--headless"：該參數代表測試時采用瀏覽器無頭模式請求，不加該參數則會打開瀏覽器進行請求（建議使用無頭模式，打開瀏覽器會存在打不開待測地址的現象）

--only-categories=performance：該參數代表只采集該頁面的性能數據，不加該參數則會采集全部數據，包括SEO、Accessibility等數據，該參數根據實際需求添加

--locale zh：該參數代表生成的報告顯示為中文，不加該參數則生成的分析報告默認為英文

3、生成報告

 

指標含義：

首次內容繪制（First Contentful Paint）：即瀏覽器首次將任意內容（如文字、圖像、canvas 等）繪制到屏幕上的時間點。

可交互時間（Time to Interactive）：指的是所有的頁面內容都已經成功加載，且能夠快速地對用戶的操作做出反應的時間點。

速度指標（Speed Index）：衡量了首屏可見內容繪制在屏幕上的速度。在首次加載頁面的過程中盡量展現更多的內容，往往能給用戶帶來更好的體驗，所以速度指標的值約小越好。

最大內容繪制（Largest Contentful Paint）：表示可視區“內容”最大的可見元素開始出現在屏幕上的時間點。

總的阻塞時間（Total Blocking Time）：表示此次分析過程中遇到的阻塞時間

四、踩坑記錄全集

1、存在部分網站地址在通過瀏覽器的Lighthouse分析時，無法分析成功，會一直卡住在分析頁面，具體原因未知，解決辦法是通過命令行模式的lighthouse進行分析即可解決

2、在使用命令行模式進行分析時，如果沒加--chrome-flags="--headless無頭模式，會存在瀏覽器無法打開對應地址的問題，故使用命令測試時，建議都加上該參數

3、使用命令行模式測試部分頁面地址時，一直無法跳轉到正確頁面，原因是該頁面地址需要登錄后才能正確跳轉，且跳轉的過程中存在重定向的地址。經過參考相關文檔及實踐，目前有兩種方式可參考使用

第一種：在命令行中使用重定向后地址，通過--extra-headers參數添加Cookie信息，這樣可以避免登錄並跳轉到正確的地址

 

 第二種：在命令行中使用最初的地址，在地址中拼接token參數，這樣可以直接跳轉至正確的地址

兩種方式均可解決該問題，實際測試過程中視情況而定使用哪種方案