網頁效能調教工具
工具
- Lighthouse
- Chrome & Edge 內建，以電腦上的資源評量網站的效能指標
- PageSpeed Insights
- 透過線上工具取得目標網站效能指標
- Performance Audits
- 關於效能的評量指標說明與優化建議
- Chrome 使用者體驗報告(CrUX)
- 記錄真實世界的 Chrome 使用者，瀏覽知名網站的使用者體驗資料集
- ChatGPT
- 藉由「輸入指令/咒語」取得對網站的 HTML、CSS、JavaScript 優化的建議
其他線上效能評測工具
- Pingdom Website Speed Test
- 網站效能測試與監控 (SaaS)
- Gtmetrix
- Webpagetest
Edge/Chrome 擴充套件
- Web Vitals
- CLS Visualizer
- Core Web Vitals
- Core Web Vitals Visualizer (RUM Visualizer)
- Lighthouse > 已內建於 Chromium-based 瀏覽器之中
- Performance insights > 僅內建於 Chrome 瀏覽器之中 ⭐️⭐️⭐ ️
檢測指標
Field data v.s Lab data
網頁效能測試方式依測試環境可以分為兩種
| Field Data | Lab Data | |
|---|---|---|
| 定義 | 直接從自然環境中收集的資料，通常以測量或觀察的形式呈現 | 在實驗室環境中收集的資料，通常以實驗的形式呈現 |
| 收集方式 | 從 google 的主機去測試 | 用 使用者電腦去測試 |
| 環境控制 | 無法完全控制自然環境 | 能夠控制實驗環境 |
| 精確度 | 較低，受到外界因素的影響 | 較高，能夠控制實驗變因 |
| 優點 | 可以選擇特定的設備/位置/連接並模擬數據， 利於 Debug 效能問題 | 擷取真實世界的使用者體驗 |
| 缺點 | 並非所有網站都包含在數據庫中 | 無法關聯真實世界的頁面關鍵績效指標 |
| 代表工具 | PageSpeed Insights 、CrUx | Lighthouse |
資訊
實驗室數據和現場數據都是有效績效衡量的重要部分。它們各有優缺點，如果只使用其中一種，可能會錯失改善用戶體驗的機會。