使用 Lighthouse檢查及優化Web應用

使用 Lighthouse檢查及優化Web應用

Lighthouse 是Google開源的一個自動化工具,用於改進網路應用的品質,適用於網頁版和移動端,比如找出哪些資源適合延遲載入,以及可以在初始頁面載入中節省多少流量。 能生成一個包括頁面性能、PWA(Progressive web apps,漸進式 Web 應用)、可訪問性(無障礙)、最佳實踐、SEO的報告清單提供參考,看看可以採取哪些措施來改進您的應用。

如何使用

運行 Lighthouse 的方式有四種:

  1. 作為 Chrome 擴展程式運行,擴展程式提供了一個對使用者更友好的介面,方便讀取報告,要去應用商店安裝。
  2. 作為命令行工具運行,命令行工具允許您將 Lighthouse 集成到持續集成系統,需要有Node環境。
  3. 使用Node Module,通過Node Module以程式設計方式使用Lighthouse。
  4. 在瀏覽器的開發者工具裡運行,這個最簡單,Chrome瀏覽器都會自帶開發者工具,不需要額外安裝,和擴展程式一樣提供了友好的介面。 需要Google Chrome 52 或更高版本。

在開者發工具中運行

由於我的瀏覽器版本比較搞,自帶了Lighthouse,所以就不在另外安裝擴展程式了,如果要安裝擴展程式,可以存取程式安裝位址

在chrome瀏覽器中打開你需要測試的網站,然後打開DevTools介面,選擇Audist面板就可以看到介面了。

開發者工具 Audits 介面

介面說明

Device: 可以在移動端和桌面端之間切換代理。

Audists:需要測試並生成的報告種類,包括頁面性能、PWA(Progressive web apps,漸進式 Web 應用)、可訪問性、最佳實踐、SEO的報告。

Throttling:此項可以類比在行動裝置上瀏覽的條件。 比如限制類比4G速度,事實上這並不會在審查期間進行限制,只是類比計算出在限速條件下的性能指標值,它將有助於計算在相應的移動端條件下載入頁面所需的時間。

運行結果

點擊 Run aduits 即可開始測試,測試結果如下:

Run Aduits 結果

測試結束后,會生成如上圖的結果報告,包括了勾選的5 大類別的測試評分,針對每個類別會給出特定的優化建議與診斷結果幫助開發者有針對性地進行優化。

在命令行上運行

通過Node CLI 運行可以指定明確的參數訊息,可以同時輸出多個格式的報告文件(預設是HTML),有比較大的靈活性。

npminstall-glighthouse#oruseyarn:#yarnglobaladdlighthouse

用上面的命令進行安裝,安裝完成後通過以下命令運行(參數只生成性能和最佳實踐):

lighthouse--only-categories=performance,best-practiceshttp://suibo.co/
命令行運行介面

運行時會打開瀏覽器,測試完成後會自動關閉。 在命令行的最下方,會有報告輸出的位址,內容跟上圖的報告截圖一致。 更多參數可以參考 github文件

使用Node Module運行

使用Node Module可以以程式設計方式使用Lighthouse,喜歡折騰的可以參考官方例子,其實測試的話用上面的方法也夠了,這裡就不說明瞭。

總結

文章簡單的介紹了下 Lighthouse,也是因為自己網站需要用到,所以在這裡做了個記錄分享給大家,還沒有試過的朋友可以看下,歡迎大家進行交流。

想了解更多關於 Facebook 與 Google 廣告投放?

開發人員必備! 6大不可缺少的工具

谷歌的5大搜尋引擎優化工具