性能測試工具Lighthouse

wade

Lighthouse是一個開源的自動化的分析移動端和PC端網頁性能指標的工具，npm上的簡介：

Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.

Lighthouse有四種使用方法，chrome自帶的，chrome外掛程式，npm包，另外一種是用node，要敲代碼。 外掛程式和node的就不去查了，另外兩種已經很方便了。

chrome devtools：

可以選擇Mobile移動端還是Desktop PC端，生成的報告：

用nmp也很簡單，全域安裝：
npm install -g lighthouse

使用的時候：
lighthouse --view --preset desktop --locale zh https://www.baidu.com

執行過程會產生一些類報告的資料：

看是看不懂，直接看可視化的：

幾個配置view是自動打開結果在瀏覽器，preset是配置檢測PC端還是移動端，locale是用中文顯示，更多的配置可以去npm看：
https://www. npmjs.com/package/lighthouse

主要有5個方面：性能（Performance）、可訪問性（Accessibility）、網路最佳實踐（Best Practies）、搜尋引擎優化（SEO）漸進式應用PWA（Progressive Web Apps）。 之前分享的performance可以計算出來的數據這邊都可以獲取。

另外還列舉了很多可以優化的建議，像使用HTTP2、圖片太大、關鍵請求等，非常詳細，有一些我都覺得已經沒辦法優化了。 我是不知道哪個網站真的需要做到那麼極致的性能優化。

具體的各個參數就不介紹了，如果公司網站實在太慢了，可以用來生成個報告，然後看看哪些影響太大的，可以優化試試。

歡迎關注訂閱號：coding個人筆記