如果您想以低數據成本打造具韌性且有彈性的網站，需要考量幾個核心目標。
每個目標都需要稽核。
| 目標 | 為什麼？ | 要測試哪些項目？ |
|---|---|---|
| 確保隱私權、安全性和資料完整性，並提供強大的 API 使用方式 | HTTPS 的重要性 | 為所有網站網頁/路徑和資產實作 HTTPS。 |
| 改善載入效能 | 53% 的使用者會放棄瀏覽載入時間超過 3 秒的網站 | 能夠以非同步或延遲載入的 JavaScript 和 CSS。設定互動時間及酬載大小的目標，例如 3G 的 TTI。設定效能預算。 |
| 網頁輕量化 | • 為資料方案設有上限的使用者降低數據用量 • 減少網頁應用程式儲存空間的需求，特別是對低階裝置使用者而言特別重要 • 降低託管和服務成本 • 改善服務效能、可靠性和彈性 | 請設定網頁權重預算，例如首次載入低於 400 KB 的值。檢查網頁是否含有大量 JavaScript。 檢查檔案大小，找出過大的圖片、媒體、HTML、CSS 和 JavaScript。找出可以延遲載入的圖片，並使用涵蓋率工具查看未使用的程式碼。 |
| 減少資源要求 | • 減少延遲問題 • 降低服務成本 • 改善服務效能、可靠性和彈性 | 檢查任何類型的資源是否過多或不必要的要求。例如：重複載入的檔案、在多個版本載入的 JavaScript、永不使用的 CSS、從未檢視的圖片 (或可能延遲載入)。 |
| 記憶體用量最佳化 | 記憶體會成為新的瓶頸，尤其是行動裝置 | 使用 Chrome 工作管理員，您可以在載入首頁及使用其他網站功能時，比較您的網站與其他網站的記憶體用量。 |
| 減少 CPU 負載 | 行動裝置的 CPU 效能有限，尤其是低規格的裝置 | 檢查是否有大量的 JavaScript。運用涵蓋率工具找出未使用的 JavaScript 和 CSS。請檢查DOM 是否過大，以及初次載入時是否執行不必要的指令碼。請找出在多個版本中載入的 JavaScript，或執行小幅重構即可避免的程式庫。 |
稽核網站時使用多種工具和技術：
- 系統工具
- 內建瀏覽器工具
- 瀏覽器擴充功能
- 線上測試應用程式
- 模擬工具
- 數據分析
- 伺服器和業務系統提供的指標
- 錄製螢幕畫面和錄影
- 手動測試
以下將說明每種稽核適用的方法。
記錄資源要求：數字、大小、類型和時間
稽核網站時，不妨先使用瀏覽器的網路工具檢查網頁。 如果您不確定操作方法，請參閱 Chrome 開發人員工具網路面板的入門指南。 Firefox、Safari、Internet Explorer 和 Edge 提供類似的工具。
別忘了先保留結果記錄，再進行變更。如果是網路要求，它可以像螢幕擷取畫面一樣簡單，您也可以將設定檔資料儲存為 JSON 檔案。如要進一步瞭解如何儲存及分享測試結果，請參閱本文。
開始稽核網路用量之前，請務必停用瀏覽器快取，以確保您取得初次載入效能的統計資料準確。如果您已透過服務工作站執行快取，請清除 Cache API 儲存空間。建議您使用無痕模式 (私人) 視窗，這樣您就不必擔心停用瀏覽器快取或移除之前的快取項目。
以下是一些瀏覽器工具檢查的核心功能和指標：
- 載入效能：Lighthouse 提供載入指標摘要。Addy Osmani 針對網頁載入期間撰寫了精彩的重要使用者時刻摘要，
- 時間軸事件：用於載入及剖析資源，以及記憶體用量。如果您想進一步瞭解，請執行記憶體和 JavaScript 剖析。
- 網頁權重和檔案總數。
- JavaScript 檔案的數量和權重。
- 任何特別大型的 JavaScript 檔案 (例如 100 KB 以上)。
- 未使用的 JavaScript。您可以使用 Chrome 涵蓋範圍工具進行檢查。
- 圖片檔的總數和權重。
- 任何特別大型的個別圖片檔。
- 圖片格式：是否有可以是 JPEG 或 SVG 的 PNG？是否將 WebP 與備用項搭配使用？
- 是否使用回應式圖片技術 (例如 srcset)。
- HTML 檔案大小。
- CSS 檔案的總數和權重。
- 未使用的 CSS。(在 Chrome 中，請使用封面面板。)
- 檢查網路字型 (包括圖示字型) 等其他素材資源是否有問題。
- 查看開發人員工具時間軸，查看是否有任何會妨礙網頁載入的內容。
如果您使用快速 Wi-Fi 或行動網路連線快速，請使用低頻寬和高延遲模擬進行測試。請記得在行動裝置和電腦上進行測試，有些網站會使用通用 Analytics (分析) 專為不同裝置提供不同的素材資源和版面配置。您可能需要使用遠端偵錯，在實際硬體上進行測試，而不只是使用裝置模擬。
檢查記憶體和 CPU 負載
進行變更前，請先保留記憶體和 CPU 使用率記錄。
在 Chrome 中，您可以從視窗選單存取工作管理員。這個簡單的方法可讓您檢查網頁需求。
測試優先與後續的載入效能
Lighthouse、WebPagetest 和 PageSpeed Insights 適合用來分析速度、資料費用和資源用量。WebPagetest 也會檢查靜態內容快取、所需時間到第一個位元組的時間，以及您的網站是否確實利用 CDN。
儲存結果
- WebPagetest：測試結果都有各自的網址。
- PageSpeed Insights：線上 PageSpeed Insights 工具「現在包含 Chrome 使用者體驗報告資料」，可醒目顯示實際的成效統計資料。
- Lighthouse：按一下下載按鈕，即可透過 Chrome 開發人員工具稽核面板儲存報表：
測試核心漸進式網頁應用程式需求條件
Lighthouse 可協助您測試安全性、功能、無障礙功能、效能和搜尋引擎效能。具體來說，Lighthouse 會檢查網站是否成功實作 PWA 功能，例如服務工作站和 Web App 資訊清單。
Lighthouse 也會測試你的網站能否提供可接受的離線體驗。
您可以將 Lighthouse 報表下載為 JSON 格式，或者，如果使用 Lighthouse Chrome Extension，則可以 GitHub Gist 的形式分享報表：按一下「分享」按鈕，選取「在檢視器中開啟」，然後在新視窗中再次點選「分享」按鈕，並將「另存為 Gist」。
使用數據分析、事件追蹤和業務指標，追蹤廣告實際成效
如果可以的話，請先保留一份數據分析資料記錄，再著手進行變更：跳出率、網頁停留時間、離開網頁 (與業務需求相關的任何項目)。
如果可以，請記錄可能受到影響的業務和技術指標，以便比較變更後的結果。例如，電子商務網站可以追蹤每分鐘訂單數或記錄統計資料，以便用於壓力和耐力測試。如果減少頁面權重和資源要求，後端儲存空間費用、CPU 需求、供應成本和恢復能力可能會提高。
如果沒有導入 Analytics (分析)，現在正是時候！至於網站是否正常運作，則最終依據業務指標和分析進行判斷。如有需要，請為使用者動作 (例如按鈕點擊和影片播放) 加入事件追蹤。建議您也導入目標流程分析，也就是使用者完成「轉換」的路徑。
您可以隨時掌握 Google Analytics (分析) 的網站速度，檢查成效指標與業務指標之間的關聯。例如：「首頁載入的速度多快？」和「透過首頁進入商品帶來銷售業績？」
Google Analytics (分析) 會使用 Navigation Timing API 中的資料。
您可以使用其中一個 JavaScript 效能 API 或自己的指標記錄資料，例如：
const subscribeBtn = document.querySelector('#subscribe');
subscribeBtn.addEventListener('click', (event) => {
// Event listener logic goes here...
const lag = performance.now() - event.timeStamp;
if (lag > 100) {
ga('send', 'event', {
eventCategory: 'Performance Metric'
eventAction: 'input-latency',
eventLabel: '#subscribe:click',
eventValue: Math.round(lag),
nonInteraction: true,
});
}
});
您也可以使用 ReportingObserver 檢查瀏覽器淘汰和乾預警告。這是許多用於取得實際使用者即時測量資料的 API 之一。
真實體驗：錄製畫面和錄影
錄製行動裝置和電腦上網頁載入的畫面。在高影格速率、新增計時器顯示的情況下，這項功能會更好。
建議你一併儲存螢幕側錄內容。有許多適用於 Android、iOS 和電腦平台的螢幕側錄應用程式 (也有同樣的做法)。
影片錄製頁面載入的運作方式，與 WebPagetest 中的幻燈片檢視畫面或 Chrome 開發人員工具的擷取螢幕截圖類似。您會取得網頁元件載入速度的真實記錄，包括快速和速度緩慢。儲存錄影和螢幕側錄內容，與日後的改良比較。
對照比較前後比較，是展現成效的絕佳方式！
還有呢？
取得網路 Bloat 分數。雖然這很有趣，但也可以用這種方式示範程式碼增益，或證明應用程式已有改善。
我的網站費用是多少？ (如下圖所示)，針對在不同地區載入網站所產生的財務成本粗略指南。
還有許多其他的獨立和線上工具可用：查看 perf.rocks/tools 說明。