跳至主要内容

如何測試前端效能

效能不佳的網站可能會讓使用者感到沮喪，並耗盡他們的行動網路數據與電池壽命。您可以透過確保您的前端服務，盡可能快速且輕量來解決這個問題。

這也意味著您的服務可以在多種裝置上正常運作。

為什麼前端效能很重要​

透過專注於前端效能，您可以提高服務的速度與整體使用者體驗。這將允許使用者快速有效地完成他們需要做的事情，並且您將擁有易於維護的高品質程式碼。

每個人都可以使用政府服務非常重要。提高前端效能意味著您盡可能的包容以下使用者：

  • 無法負擔最新設備的使用者——因為即使在較舊、速度較慢的硬體上，您的服務也會載入得更快
  • 使用有限行動網路數據的使用者——因為您的服務將使用更少的行動數據
  • 居住在行動網路訊號較差地區的使用者

具有最佳化前端效能的服務也更適合環境，因為它們消耗的電量更少。由於使用者不必經常升級設備來滿足性能需求，因此被棄用的設備會更少。

使用性能作為指標​

最佳化前端效能不僅僅是開發人員的任務。整個服務團隊都應該要：

  • 將前端效能納入在服務文件中
  • 盡早在瀏覽器中進行原型設計 (prototyping) 與設計——這有助於早期發現性能與設計問題。
  • 在各種設備上進行測試——這可以幫助您發現僅在高階筆記型電腦上測試時找不到的問題
  • 建立原型以展示設計決策的影響，並突顯效能問題

設定績效預算​

績效預算是您為網頁特定功能設定限制的地方，可以是特定的載入時間、網頁發出的請求數量、頁面的大小或這些因素的組合。

一旦設定了預算，您就需要遵循它。每次修改頁面或新增內容時，請檢查是否仍在預算之內。如果超出預算，您可以透過以下方式解決此問題：

  • 最佳化頁面上的功能
  • 從頁面中刪除功能
  • 不將新功能增加到網頁中

績效預算提供了整個服務團隊可以使用的架構。這將有助於引導團隊圍繞在網頁可以新增哪些功能的對談，還能使團隊能夠清楚地解釋他們對服務前端 (frontend) 所做的決策。

在設計服務過程中，儘早設定績效預算非常重要。在建立服務的過程中途引入績效預算會限制其效果，因為團隊可能必須回去修訂之前設計頁面的績效預算。

如何運行效能測試​

您可以使用免費的測試工具來測試服務的前端效能：

您應該在整個開發過程中衡量效能。設定效能指標，並將效能測試整合到發布過程中，可以更輕鬆地處理出現的效能問題。

開發人員可以遵循的簡單效能工作流程如下：

  1. 使用一種或多種工具對目前效能進行基礎測試。
  2. 最佳化您發現的任何瓶頸。
  3. 量化出最佳化前後的效能差異與使用者體驗。
  4. 重複此操作，直到您的前端達到所需的效能指標。

原始資料連結