網站速度優化分析工具：SEO Lighthouse

網站載入的速度不只會影響使用者體驗，也會影響 SEO，因為網頁載入的速度也是 Google 搜尋排序的一個指標，進而影響排名，也因為載入速度同時影響網站的排名和使用者體驗，所以更不該忽視。

但怎麼知道我們的網站效能？這個有一個小小燈塔圖形的 Chrome 外掛工具，就是一個超好用的網站速度優化工具：SEO Lighthouse 它可以幫上我們！

Lighthouse 是什麼？有什麼用途？

燈塔工具(Lighthouse)是 Google Chrome 的擴充應用程式，是一個網路開發者(Web developer)的工具，主要功能是針對網頁的性能做詳細與全面的分析(包含網頁載入速度)，並產生分析報告，報告上會有詳細的分析結果與如何優化改善的建議，以及每個頁面的各種數據和指標的表現。

開啟瀏覽器 Chrome 的「更多工具」裡的「擴充功能」直接輸入關鍵字Lighthouse搜尋進行安裝。

安裝完畢後在瀏覽器的又上方會有一個小燈塔的圖示，接著在我們想要測試的網頁上點擊這個小燈塔，並按下「Generate Report」小燈塔就會開始進行網頁分析，並於分析完後，直接跳出一個分析的報告視窗。

我們可以透過這份報告得知，網頁的哪一個部分最耗效能，並以五個綜合評分指標來說明網頁在不同層面的表現，接著再一一細部顯示各個指標的細部說明，並提供方向與建議來改善網頁。

如果不善英文，也可以使用 Google 翻譯，就能輕易理解 Lighthouse 的解說。

下圖的效能部分，可以得知網站詳細各頁的載入速度，再一一去修正與優化。

Opportunities 所列舉的是可以幫助更快地加載頁面的方法，例如刪除未使用的 CSS 或 JavaScript 可以節省多少時間等等。

而 Diagnostics 的區塊則是有關應用程序性能的更多訊息，例如如何確保網頁在 Webfont 載入期間保持可見度等等，按開每個訊息右邊的小三角形，可以找到一些解決的方式。

在查閱完 Lighthouse 給我們的訊息與可修正的方向後，就可以一一去對每個細部做修正與優化，但建議從排行越前面，也就是越影響效能的部分著手，這樣在優化後也能比較明顯的體驗到提升效能優化前和後的差異。

Lighthouse 也很貼心的將這些分析功能，合併整合到 google 的網頁測速工具(Page Speed Insights)當中，只要透過Google PageSpeed Insights工具就可以直接輸入網址，且以中文的界面顯示測試報告的結果分析，非常方便。（應該早點說的 XD）

當然，也建議看看官方更詳盡的說明使用 Lighthouse 審查網絡應用，在這些工具給的建議一一修正優化之後，相信在 SEO 的排名上也會有不少的提升。

網路工具越來越強大，平時常會忽略這些工具真的是件可惜的事，且還佛心的免費讓我們用，現能有一部份是圖片沒有優化所造成，不妨先研究圖片優化的方式，就會發現更多好用的優化圖片工具，能善用這些工具，真的是可以大大提升開發的品質啊！尤其網頁載入速度會影響 SEO，所以不得不正視網頁效能這部分啊！