SpeedVitals 免費網站性能分析工具，最佳化網站使用體驗

身為網站管理者經常會去改動網頁各項參數，或是調整看得到的版型設計等相關細節，在搜尋引擎即將開始提高網站使用體驗核心指標（Core Web Vitals）佔比之際，需要開始最佳化網站使用者體驗，有助於讓網站在搜尋結果獲得更多的曝光機會。大多數情況會使用 Google PageSpeed Insights 去進行測試評分，但它給的建議較少，搭配 GTmetrix 可以獲得更多的分析結果，不過 GTmetrix 有每日可免費使用次數限制，接下來的服務是免費替代方案。

本文要介紹「SpeedVitals」是免費網站性能分析工具，也是前段時間尋找 GTmetrix 同類服務意外發現，使用 Lighthouse 來衡量研究資料（Lab Data）以及 Chrome 用戶體驗 API 計算欄位資料（Field Data），輸入網址、選擇檢測裝置類型和節點就能得出評分和改善建議，透過調整來加快網站載入速度，也能協助找出網站可能潛在的技術問題。

SpeedVitals 和 GTmetrix 一樣會在檢測結果顯示評級得分，也會顯示網頁大小、TTFB、LCP、CLS 和 TBT 等各項指標，我覺得最有用的就是網站瀑布圖（Waterfall），有助於找出網頁那些元件可能影響到效能或開啟速度。

最終 SpeedVitals 會顯示最佳化建議，也有來自 Lighthouse 最佳化技巧說明，能讓網站管理者在調整和修改時做為參考，雖然透過瀏覽器內建的開發人員工具一樣能夠測試這些數據，但是 SpeedVitals 可以測得不同地區的網路連結情形，而且使用上沒有限制。

SpeedVitals
https://speedvitals.com/

使用教學

STEP 1

開啟 SpeedVitals 輸入要檢測的頁面網址，先不要送出，從下方選擇裝置類型和國家。

STEP 2

SpeedVitals 可以選擇標準行動裝置、標準桌面，或是以特定裝置瀏覽像是 MacBook、iPad、iPhone、Samsung Galaxy、小米或 Motorola 等等，對於測試行動裝置的相關數據很有用。

測試節點包括美國、荷蘭、日本、南韓、印度、澳大利亞、英國、德國和巴西，如果網站主要流量來源是亞洲地區，建議可以使用「日本」做為主要的測試點。

STEP 3

在測試結果頁面會顯示使用的 Lighthouse 版本、測試國家和裝置類型，最上方會列出各項測試指標得分，如果分數較好會以綠色顯示，較差或不佳則是橙色和紅色，可以注意一下這些指標有沒有很明顯的問題。

往下捲動找到「Web Vitals Lab Test」會列出六項指標，也就是 PageSpeed Insights 研究資料中顯示的六個項目，一樣是以顏色標記出有沒有發現問題，如果有紅字出現可能就要多花點時間研究看看要怎麼改善該項目來提供更好的使用者體驗。

下方也會有網頁的各項資源大小比例和數量計算，像是比較常見的網頁字型、JavaScript、圖片、CSS 或是其他媒體檔案等等，藉由檔案大小和數量可以判斷出是否有那些資源拖慢了網頁開啟速度效能。

STEP 4

切換到「Field Data」（欄位資料）頁面，會顯示和 PageSpeed Insights 相同的三項指標 LCP、FID 和 CLS 和 First Contentful Paint (FCP) 得分，一樣會分為行動裝置和桌面兩種，也會顯示顯示根據前 28 天收集到的資料有沒有通過網站使用體驗核心指標報告評量。

STEP 5

前面我有提到 SpeedVitals 最有用的其中一項功能「瀑布圖」，可以看到開啟網頁時分別會載入那些資源，包括路徑、狀態代碼、網域名稱、檔案大小和時間軸，透過狀態和時間軸能找到拖慢網頁速度的項目（也可能遇到無法開啟等等問題）。

點選每個資源查詢伺服器回應標頭（Response Headers）相關資訊。

STEP 6

最後再介紹一個 SpeedVitals 很實用的功能，點選「Boost Performance」會給出最佳化的相關提示，分為 SpeedVitals Pro Tips 和 Lighthouse Tips 兩大項目，依照指引進行調整有助於獲得更好的網站成效，不過每個項目的調整難易度不一，點選會有更多詳細的說明（以及使用什麼解決方案可以解決類似問題）。