使用工具評估成效

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

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

目標 為什麼? 要測試哪些項目?
確保隱私權、安全性和資料完整性,並支援強大的 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 開發人員工具網路面板的入門指南FirefoxSafariInternet ExplorerEdge 也提供類似的工具。

請記得在變更前記錄結果。對於網路要求,您可以使用螢幕截圖,也可以將設定檔資料儲存為 JSON 檔案。請參閱下方更多資訊,瞭解如何儲存及分享測試結果

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

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

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

如果您使用的是速度快的 Wi-Fi 或行動網路,請使用低頻寬和高延遲模擬進行測試。別忘了在行動裝置和電腦上測試,有些網站會使用通用 Analytics 分析功能,針對不同裝置提供不同的素材資源和版面配置。您可能需要使用遠端偵錯功能,在實際硬體上進行測試,而非僅使用裝置模擬功能。

檢查記憶體和 CPU 負載

變更前,請保留記憶體和 CPU 用量的記錄。

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

Chrome 工作管理員:顯示四個已開啟的瀏覽器分頁的記憶體和 CPU 用量
Chrome 工作管理員:留意記憶體和 CPU 的耗用量!

測試最初和後續的載入效能

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

儲存結果

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

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

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

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

顯示如何將 Chrome Lighthouse 報表匯出為總裁的螢幕截圖
透過 Lighthouse Chrome 擴充功能將報表匯出至 gist - 按一下分享按鈕

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

如有可能,請在導入變更前記錄下分析資料:跳出率、網頁停留時間、離開網頁:所有與業務需求相關的資料。

盡可能記錄可能受到影響的業務和技術指標,以便您比較變更後的結果。舉例來說,電子商務網站可能會追蹤每分鐘的訂單,或是記錄壓力和耐力測試的統計資料。如果您減少頁面重量和資源要求,後端儲存空間費用、CPU 需求、服務成本和彈性可能會有所提升。

還沒導入數據分析的話,現在正是時候!商務指標和數據分析是判斷網站是否正常運作的最終依據。視情況納入事件追蹤,用於追蹤使用者動作,例如按鈕點擊和影片播放。您也可以導入目標流量分析:使用者前往「轉換」的路徑。

您可以密切留意 Google 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 開發人員工具中的擷取螢幕截圖功能類似。您會取得網頁元件載入速度的實際記錄,包括哪些元件載入速度快、哪些元件載入速度慢。儲存錄製的影片和螢幕錄影,以便日後比較改善情形。

並列比較前後的效果,是展現改善效果的好方法!

還有呢?

視需要取得 Web Bloat 分數。這項測試很有趣,但也可以用來展示程式碼膨脹的情況,或是您所做的改善。

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

What dosleepcost.com 的螢幕擷取畫面

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