Lighthouse與PageSpeed Insights的比較
網站技術 》關於Lighthouse與PageSpeed Insights的比較｜天矽網頁設計
| 目錄 ➤Lighthouse介紹 ➤Lighthouse應用情境 ➤PageSpeed Insights介紹 ➤PageSpeed Insights應用情境 ➤Lighthouse & PageSpeed Insights的比較 ➤小結 |
網站效能或SEO優化過程，Lighthouse與PageSpeed Insights這兩種是常常被使用與檢測的工具，兩種皆由Google支援，目的都是協助開發者檢核網站效能。不過，此兩種檢測工具的功能、應用情境略有不同。
本文將會比較這兩種檢測工具的特點、在什麼情境下應選擇哪種檢測工具。
➤Lighthouse介紹
Lighthouse是開源自動化網站檢測工具，可針對效能、無障礙功能、漸進式網頁應用程式、搜尋引擎最佳化等方面進行檢核，無論是公開網頁或需要驗證的網頁皆可。
開發者可在 Chrome開發人員工具，透過指令列或Node模組執行Lighthouse，只要提供網址，系統就會針對網址產生網頁效能分析，包含的檢測項目含以下：
-
Performance（效能）
-
Accessibility（無障礙設計）
-
Best Practices（最佳實踐）
-
SEO（搜尋引擎最佳化）
➤Lighthouse的應用情境
如果還在開發階段（網站尚未對外公開），Lighthouse可在本地或開發環境執行，由於可不用公開網址，因此可協助開發者排除正式上線前可能遇到的問題，或進行效能、SEO優化。
如有以下情境，可採用Lighthouse進行檢測：
| Lighthouse應用情境 |
|
1.網站尚未上線(未對外公開)、模擬使用者體驗。 |
|
2.全面檢查網站結構or效能，例：無障礙、SEO基本設定(標籤)等。 |
|
3.模擬不同裝置或網路情境。 |
|
4.前端效能優化，例：圖片太大、JS等。 |
➤PageSpeed Insights介紹
PageSpeed Insights會回報網頁於行動裝置和電腦裝置上的使用者體驗，並提供真實使用者數據與網頁改善建議。如需顯示特定網頁的使用者體驗資料，則網頁必須有足夠資料。若是近期發布的新網頁，或使用者體驗提供的樣本數較少，PSI就會沒有足夠的資料顯示。
PageSpeed Insights會將使用者體驗分三類：良好、需要改善、不佳，以下為範例畫面：
▲使用者網站體驗核心指標評估
使用者體驗分類的各核心指標評估，分別有FCP、LCP、CLS、INP、TTFB、每個指標對應的評估項目，分別是以下：
FCP（First Contentful Paint）
- 第一眼看到內容的速度（感知速度）
- 定義：使用者進入網站後，第一次看到有內容的時間長短。
LCP（Largest Contentful Paint）
- 主要內容何時出現（內容完整性）
- 定義：頁面中最大或主要的內容元素，例如Banner、標題或段落文字。
CLS（Cumulative Layout Shift）
- 頁面是否穩定（是否跳來跳去）
- 定義：頁面的穩定度，畫面會不會不穩，按鈕是否會移位。
INP（Interaction to Next Paint）
- 點擊後反應快不快（互動體驗）
- 定義：點擊按鈕或表單後的反應是否有及時，對使用者而言，若點擊某按鈕沒反應或延遲太久，使用者可能會覺得是不是壞掉了。
TTFB（Time to First Byte）
- 伺服器回應速度（後端效能）
- 定義：使用者送出請求後，從伺服器收到第一個位元組資料所花的時間，如果伺服器回應的速度較慢也會影響網頁載入的速度。
➤PageSpeed Insights的應用情境
如果網站已經正式對外公開，則可使用PageSpeed Insights檢測，因PageSpeed Insights除了模擬不同裝置，還會結合實際使用者體驗數據，以下為適合使用PageSpeed Insights檢測的情境：
| PageSpeed Insights應用情境 |
| 1.檢測真實線上環境的效能。 |
| 2.發現潛在瓶頸，例如圖片未壓縮、阻塞 JavaScript。 |
| 3.即時監控各裝置載入的表現，例如行動端 LCP 慢、CLS 高。 |
| 4.追蹤效能優化成果。 |
➤Lighthouse & PageSpeed Insights的比較
PageSpeed Insights 與 Lighthouse此兩種檢測工具雖然都能提供網站效能建議，但使用時機、數據來源還是有不同，以下提供PageSpeed Insights 與 Lighthouse的比較表，開發者或行銷可針對不同情境選擇適合的分析工具：
➤小結
Lighthouse 與 PageSpeed Insights 雖然都是由 Google 推出，但Lighthouse偏向於「本地環境與開發階段」，適合開發者進行深入的性能診斷與調校，可以深入分析網站各項表現指標，提供結構化的診斷與建議。
PageSpeed Insights 注重實際用戶體驗與快速的分數評估。
因此，網站如果還屬開發階段，可以選擇Lighthouse；若是已經公開上線的網站，就可以選擇PageSpeed Insights！
