WebPageTest 網站效能檢測工具，協助將使用體驗核心等各項指標最佳化

大家都知道 Google 今年已將網站使用體驗核心指標（Core Web Vitals）列為搜尋排序因素之一，也就是說管理者需要努力讓網站三項指標：LCP、FID 和 CLS 維持在良好狀態，因此除了速度也要考量到各種網頁元件放置，透過不斷修改調整和測試來使瀏覽者獲得更好的體驗，如果是 Cloudflare 使用者不妨開啟「啟用 Cloudflare Browser Insights 收集網站 Web Vitals 和效能指標」功能來分析數據，Google 自家提供的 PageSpeed Insights 也能在輸入網址後進行檢測並獲得相關數據表現。

本文要推薦「WebPageTest」是一個相當知名的免費網站測速工具，我在「16 個免費網站測速工具，分析網頁效能表現」一文有簡單介紹，透過這項服務可從全球 30 個國家節點測試網站速度，而且可選擇 25 種不同瀏覽器（包括智慧型手機、平板電腦），或是設定不同的連線速度、桌面瀏覽器尺寸、重新執行測試次數等等，當然更重要的是它還有檢測 Web Vitals 功能，可以協助改善網站的體驗核心指標分數。

WebPageTest 檢測結果會將幾個主要項目以英文和顏色評分，它顯示資訊量相當龐大，例如在效能方面測試結果、以 CrUX（Chrome User Experience Report）測得 FCP、LCP、CLS 和 FID 狀態、幾次反覆檢測的瀑布圖等等，可能需要花點時間仔細研讀、找出改善網站的方法。

對開發者來說線上測試工具確實解決了很多的問題，而且幾乎是一站包辦所有功能，非常實用。

WebPageTest
https://www.webpagetest.org/

使用教學

STEP 1

開啟 WebPageTest 預設是選擇進階測試功能，輸入要檢測的網頁網址即可測試，如果你只想簡易測試或僅測試網頁體驗指標也有對應的選項。

STEP 2

從「Test Location」選擇測試節點，節點遍及歐洲、非洲、中東、亞洲、大洋洲，大部分節點都是使用亞馬遜 AWS EC2 或 Google GCE 主機，有些則是 Microsoft Azure 和騰訊主機，比較特別的是如果需要實體機器最底下也有 Mac mini 和 Android 裝置可以選擇。

預設情況下會使用桌面版 Chrome 瀏覽器進行測試，從選項選擇其他的瀏覽器，像是 Firefox、Brave 或模擬為行動裝置 Google Piexel、Nexus、Samsung Galaxy、iPhone、iPad 等等，此外，進階設定裡有連線頻寬、桌面瀏覽器尺寸、測試次數和重複檢視等選項，測試時有特殊需求就能自訂項目。

STEP 3

將測試的頁面網址貼上、點選「Start Test」按鈕開始進行測試，測試時需要一段等待時間，預設情況會重複測試三次以獲得不同的測試結果。

因為檢查項目會顯示的結果非常多，在這裡就只簡單介紹幾個重點（或許是對我比較有用的部分）。

WebPageTest 會將各個測試項目以字母 F 至 A 評級，例如安全評分、FTTB、Keep-alive、壓縮傳輸、圖片壓縮、快取靜態內容和內容傳遞網路（CDN），就能從總覽先找出得分較低的項目進行最佳化。

STEP 4

從 CrUX 得到的真實使用者資料可以反應出 FCP、LFP、CLS 和 FID 網站使用體驗核心指標得分，下方瀑布圖會有載入網頁時每個元件網址、檔案名稱、時間和回應結果，有助於找出延遲載入速度或造成網頁問題的元件。

點選每個元件會有詳細資訊，這些紀錄對於要找出問題、排除錯誤非常有幫助。

STEP 5

切換到「Web Vitals」分頁會有 Google Web Vitals 三項指標的診斷資訊，如果出現綠色以外的得分表示結果不佳，可能需要花點時間好好檢視一下，好處是 WebPageTest 也會在下方呈現相關結果，雖然不會明確提示網站開發者應該怎麼解決，但還是能從網站提供的資訊線索找到可能的問題癥結點。

STEP 6

另一個內容項目會將網頁的各種檔案類型、請求數、大小列出，搭配底下的連線視圖就能找出那些物件可能對網頁開啟速度造成影響（或是讓頁面容量變得太肥大），也是在最佳化網站時會用到的功能，或是以網域名稱（Domains）列出網頁的所有元件功能，會顯示對於不同網址發送的請求數和檔案大小，從上方選單列可以切換不同的檢測項目結果，大家可以自己動手試試看。