使用工具評估成效

Sam Dutton

如要建構高效能、高彈性且資料成本低的網站，有幾個核心目標。

每個目標都需要稽核。

目標	為什麼？	要測試哪些項目？
確保隱私權、安全性和資料完整性，並啟用強大的 API 用途	HTTPS 的重要性	所有網站頁面/路徑和素材資源都採用 HTTPS。
提升載入效能	53% 的使用者會放棄載入時間超過 3 秒的網站	可非同步載入或延遲載入的 JavaScript 和 CSS。設定 Time to Interactive 和酬載大小的目標，例如 3G 網路上的 TTI。設定效能預算。
降低網頁權重	• 降低數據用量有限的使用者數據成本 • 降低網頁應用程式儲存空間需求，這對使用低規格裝置的使用者來說尤其重要 • 降低代管和服務成本 • 提升服務效能、可靠性和韌性	設定網頁權重預算：例如，首次載入時不超過 400 kB。檢查是否有大量 JavaScript。 檢查檔案大小，找出過大的圖片、媒體、HTML、CSS 和 JavaScript。找出可延遲載入的圖片，並使用涵蓋率工具檢查未使用的程式碼。
減少資源要求	• 減少延遲問題 • 降低放送費用 • 提升放送效能、可靠性和彈性	請留意是否有任何類型的資源要求過多或不必要。例如：重複載入的檔案、載入多個版本的 JavaScript、從未使用過的 CSS、從未查看過的圖片 (或可延遲載入)。
記憶體用量最佳化	記憶體可能成為新的瓶頸，尤其是在行動裝置上	使用 Chrome 工作管理員，比較您的網站與其他網站在載入首頁和使用其他網站功能時的記憶體用量。
降低 CPU 負載	行動裝置的 CPU 有限，尤其是低規格裝置	檢查是否有大量 JavaScript。使用涵蓋率工具找出未使用的 JavaScript 和 CSS。檢查 DOM 大小是否過大，以及首次載入時是否有不必要的指令碼執行。找出載入多個版本的 JavaScript，或可透過小幅重構避免使用的程式庫。

稽核網站的工具和技術有很多種：

• 系統工具
• 內建瀏覽器工具
• 瀏覽器擴充功能
• 線上測驗應用程式
• 模擬工具
• Analytics
• 伺服器和業務系統提供的指標
• 螢幕錄影和錄製影片
• 手動測試

下文將說明各類稽核適用的方法。

注意： 在大多數網頁中，圖片是最占空間且最常要求的元素。連線能力越差，延遲時間就越長，因此隨著網路行動化，過多的圖片檔案要求會成為越來越嚴重的問題。圖片也會消耗電力：圖片要求越多，無線電用量越多，電池電量越低。即使只是算繪圖片，也會消耗電力，而且消耗量與圖片的大小和數量成正比。記憶體也是如此：像素尺寸稍微增加，記憶體用量就會大幅增加。在行動裝置上 (尤其是低規格裝置)，記憶體可能會成為新的瓶頸。如果使用者採用有限數據方案，圖片過大也會造成問題。移除多餘的圖片！如果無法移除，請進行最佳化：盡可能提高壓縮率、縮減像素尺寸，並使用檔案大小最小的格式。最佳化橫幅和背景等「主頁橫幅」是簡單的一次性工作。

記錄資源要求：數量、大小、類型和時間

稽核網站時，建議先使用瀏覽器的網路工具檢查網頁。如果不確定該如何操作，請參閱 Chrome 開發人員工具網路面板入門指南。Firefox、Safari、Internet Explorer 和 Edge 也有類似的工具。

請記得在進行變更前記錄結果，如果是網路要求，只要擷取螢幕截圖即可，您也可以將設定檔資料儲存為 JSON 檔案。請參閱下方資訊，瞭解如何儲存及分享測試結果。

開始稽核網路用量前，請務必停用瀏覽器快取，確保首次載入效能的統計資料準確無誤。如果您已透過 Service Worker 進行快取，請清除 Cache API 儲存空間。建議您使用無痕 (私密) 視窗，這樣就不必擔心停用瀏覽器快取或移除先前快取的項目。

以下是您應使用瀏覽器工具檢查的一些核心功能和指標：

• 載入效能：Lighthouse 提供載入指標摘要。Addy Osmani 針對載入網頁的重要使用者時刻撰寫了精彩的摘要。
• 時間軸事件：用於載入和剖析資源，以及記憶體用量。如要進一步瞭解，請執行記憶體和 JavaScript 剖析。
• 網頁總權重和檔案數量。
• JavaScript 檔案的數量和權重。
• 任何特別大的個別 JavaScript 檔案 (例如超過 100 KB)。
• 未使用的 JavaScript。您可以使用 Chrome 涵蓋率工具進行檢查。
• 圖片檔總數和權重。
• 任何特別大的個別圖片檔。
• 圖片格式：是否有可轉換為 JPEG 或 SVG 的 PNG？WebP 是否與備用格式搭配使用？
• 是否使用回應式圖片技術 (例如 srcset)。
• HTML 檔案大小。
• CSS 檔案的總數和權重。
• 未使用的 CSS。(在 Chrome 中，請使用涵蓋率面板)。
• 檢查其他素材資源 (例如網頁字型，包括圖示字型) 是否有問題。
• 查看開發人員工具時間軸，找出任何阻礙載入網頁的因素。

如果您使用快速 Wi-Fi 或快速行動網路連線，請模擬低頻寬和高延遲進行測試。請記得在行動裝置和電腦上進行測試，因為有些網站會使用使用者代理程式探測，為不同裝置提供不同的素材資源和版面配置。您可能需要使用遠端偵錯功能，在實際硬體上進行測試，而不只是使用裝置模擬。

注意： 通常只要使用瀏覽器工具檢查網路回應，並依大小排序，就能找出問題。舉例來說，這裡 349 KB 的 PNG 似乎有問題：

。果然，圖片寬度為 1600 像素，但元素的最大顯示寬度只有 400 像素。解壓縮後，圖片需要超過 4 MB 的記憶體，這對手機來說相當大。將圖片重新儲存為 800 像素寬的 JPEG (以因應 2x 螢幕上的 400 像素顯示寬度)，並使用 ImageOptim 進行最佳化，結果產生 17 KB 的檔案：比較原始 PNG 與最佳化 JPEG。

改善幅度高達 95%！

檢查記憶體和 CPU 負載

變更前，請先記錄記憶體和 CPU 使用率。

在 Chrome 中，您可以從「視窗」選單存取工作管理員。這是檢查網頁需求的簡單方法。

Chrome 工作管理員：找出耗用大量記憶體和 CPU 的項目

測試首次和後續載入效能

Lighthouse、WebPagetest 和 Pagespeed Insights 適合用來分析速度、資料成本和資源用量。WebPagetest 也會檢查靜態內容快取、Time to First Byte，以及網站是否有效使用 CDN。

注意： 只要設定伺服器加入適當的標頭，就能輕鬆啟用靜態內容快取功能，讓瀏覽器在首次要求時快取素材資源。如果瀏覽器可以快取資源，就不需要在後續造訪時從網路擷取資源。這可提升載入速度、降低資料成本，並減少網路和伺服器負載，即使瀏覽器不支援透過 Service Worker 快取，也能享有這些好處。即使您使用 Cache API，也務必啟用瀏覽器快取功能。如要瞭解詳情，請參閱 PageSpeed Tools 和網站基礎知識資源 (尤其是「撤銷及更新快取回應」一節)。

儲存結果

• WebPagetest：測試結果各有專屬網址。
• Pagespeed Insights：線上 Pagespeed Insights 工具現已納入 Chrome 使用者體驗報告資料，可醒目顯示實際效能統計資料。
• Lighthouse：在 Chrome 開發人員工具的「稽核」面板中，按一下下載按鈕，即可儲存報表：

  

測試漸進式網頁應用程式的核心需求

Lighthouse 可協助您測試安全性、功能、無障礙功能、效能和搜尋引擎效能。具體來說，Lighthouse 會檢查網站是否成功導入 PWA 功能，例如 Service Worker 和網頁應用程式資訊清單。

Lighthouse 也會測試網站是否能提供可接受的離線體驗。

您可以將 Lighthouse 報表下載為 JSON 格式，或使用 Lighthouse Chrome 擴充功能，將報表分享為 GitHub Gist：按一下「分享」按鈕，選取「在檢視器中開啟」，然後在新視窗中再次按一下「分享」按鈕，並選取「另存為 Gist」。

按一下分享按鈕，將 Lighthouse Chrome 擴充功能的報表匯出至 Gist

使用數據分析、事件追蹤和業務指標，追蹤實際成效

如果可以，請在實施變更前記錄分析資料：跳出率、網頁停留時間、離開網頁，以及與業務需求相關的任何資料。

如果可以，請記錄可能受影響的業務和技術指標，以便在變更後比較結果。舉例來說，電子商務網站可能會追蹤每分鐘訂單數，或記錄壓力與耐力測試的統計資料。如果減少網頁權重和資源要求，後端儲存空間成本、CPU 需求、放送費用和彈性都可能有所改善。

如果尚未導入數據分析，現在正是時候！業務指標和數據分析是判斷網站是否運作正常的最終依據。視情況為使用者動作 (例如點擊按鈕和播放影片) 納入事件追蹤。您也可以實作目標流程分析：使用者前往「轉換」的路徑。

您可以留意 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 開發人員工具中的擷取螢幕截圖功能類似。您可以取得網頁元件載入速度的實際記錄，瞭解哪些元件載入速度快，哪些元件載入速度慢。儲存錄影和螢幕側錄內容，以便日後比較改善成效。

並排比較前後差異，是展現改善成果的好方法！

還有呢？

如有需要，請取得網站膨脹分數。這項測試很有趣，但也可以用來展示程式碼膨脹，或顯示您已做出改善。

我的網站費用是多少？ (如下所示) 粗略說明在不同地區載入網站的財務成本。

還有許多其他獨立和線上工具可供使用：請參閱 perf.rocks/tools。