使用工具評估成效

Sam Dutton

我們有幾個核心目標，希望能以低成本打造高效、彈性的網站。

您必須為每個目標進行稽核。

您可以使用多種工具和技巧來稽核網站：

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

以下將說明每種稽核類型適用的做法。

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

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

請記得在變更前記錄結果。網路要求的做法可以像是螢幕截圖一樣簡單，您也可以將設定檔資料儲存為 JSON 檔案。請參閱下方更多資訊，瞭解如何儲存及分享測試結果。

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

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

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

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

檢查記憶體和 CPU 負載

變更前，請記錄記憶體和 CPU 用量。

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

先測試後載入效能

Lighthouse、WebPagetest 和 PageSpeed Insights 可用於分析速度、資料成本和資源使用情形。WebPagetest 也會檢查靜態內容快取、首次字節時間，以及網站是否有效使用 CDN。

儲存結果

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

  

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

Lighthouse 可協助您測試安全性、功能、無障礙設計、效能和搜尋引擎效能。具體來說，Lighthouse 會檢查網站是否已成功實作 PWA 功能，例如服務工作者和網路應用程式資訊清單。

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

您可以將 Lighthouse 報表下載為 JSON 格式，如果您使用 Lighthouse Chrome 擴充功能，則可以將報表分享為 GitHub Gist：按一下分享按鈕，選取「在檢視器中開啟」，然後在新視窗中再次按一下分享按鈕，然後點選「另存為 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 開發人員工具中的擷取螢幕截圖功能類似。您會取得網頁元件載入速度的實際記錄，包括哪些元件載入速度快、哪些元件載入速度慢。儲存錄製的影片和螢幕錄製內容，以便日後比較改善情形。

並列比較前後的效果，是展示改善效果的好方法！

還有呢？

如有需要，請取得Web Bloat Score。這項測試很有趣，但也可以用來展示程式碼膨脹的情形，或是顯示您已做出改善。

如要瞭解網站的費用，請參閱這篇文章，瞭解在不同區域載入網站的費用。

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