Lighthouse前端性能優化測試工具

在前端開發中，對於本身開發的app或者web page性能的好壞，一直是讓前端開發很在乎的話題。咱們須要專業的網站測試工具，讓咱們知道本身的網頁還有哪些須要更爲優化的方面，我本身嘗試了一款工具：Lighthouse，感受還不錯，記錄下來，也順便分享給用得着的夥伴。

Lighthouse分析web應用程序和web頁面，收集關於開發人員最佳實踐的現代性能指標和看法，讓開發人員根據生成的評估頁面，來進行網站優化和完善，提升用戶體驗。

一、在chrome開發者工具中使用lighthouse

Lighthouse是直接集成到chrome開發者工具中的，位於‘Audits’面板下。

首先，你得下載安裝 了chrome瀏覽器，相信每一個作開發的人員都應該擁有chrome瀏覽器。

其次，在chrome瀏覽器中打開你須要測試的網站，按f12進入開發者調試模式，點擊‘Audits’選項，看到以下界面：

而後點擊「Run audits」，以後就是等待生成評估界面。

二、使用Node Cli

lighthouse依賴node 8或者更高的node版本

首先全局安裝lighthouse:

npm install -g lighthouse # or use yarn: # yarn global add lighthouse

 

而後在終端輸入命令，我使用的是博客園首頁地址

$ lighthouse https://www.cnblogs.com/

 

而後會生成一個評估的html頁面，直接在瀏覽器中打開進行查看便可。

在這裏面你能夠看到它給你各個方面的建議，好比圖片、css、js這些文件的處理，還有html裏面標籤的使用，緩存處理等建議，能夠根據這些來對網站進行優化。

三、附上Lighthouse的git地址，更爲詳細的內容，能夠去參考git：https://github.com/GoogleChrome/lighthouse