測量效能
衡量效能提供了重要的指標，幫助您評估您的應用程式、網站或 Web 服務的成功程度。
例如，您可以使用效能指標來確定您的應用程式與競爭對手相比的效能如何，或者比較您應用程式在不同釋出版本之間的效能。您的指標應與您的使用者、網站和業務目標相關。它們應以非技術利益相關者能夠理解和接受的格式進行收集、一致地衡量和分析。
本文介紹了可用於訪問 Web 效能指標的工具，這些工具可用於衡量和最佳化您網站的效能。
| 預備知識 | 已安裝基本軟體，並具備 客戶端 Web 技術 的基礎知識。 |
|---|---|
| 目標 |
提供可透過各種 Web 效能 API 收集的 Web 效能指標資訊，以及可用於視覺化這些資料的工具。 |
效能工具
有幾種不同的工具可幫助您衡量和改進效能。這些通常可以分為兩類：
- 指示或衡量效能的工具，例如 PageSpeed Insights 或 Firefox 的 Network Monitor 和 Performance Monitor。這些工具向您展示您的網站載入速度有多快或有多慢。它們還指出了可以改進以最佳化您的 Web 應用程式的領域。
- 可用於構建自定義效能工具的 Performance APIs。
通用效能報告工具
PageSpeed Insights 等工具可以提供快速的效能測量。您可以輸入一個 URL，並在幾秒鐘內獲得性能報告。該報告包含指示您的網站在移動裝置和桌面裝置上表現如何的分數。這是瞭解您做得好的地方和可以改進的地方的一個很好的起點。
在撰寫本文時，MDN 的效能報告摘要如下所示：
效能報告包含有關以下方面的資訊：使用者在頁面顯示任何內容之前需要等待多長時間，顯示頁面需要下載多少位元組，以及更多資訊。它還告訴您測得的值被認為是好還是壞。
webpagetest.org 是另一個自動測試您的網站並返回有價值指標的工具示例。
您可以嘗試執行您喜歡的網站並使用這些工具，檢視得分。
網路監控工具
現代瀏覽器提供了可用於在已載入頁面上執行並確定其效能的工具；大多數工具的工作方式類似。例如，Firefox 的 Network Monitor 返回有關從網路下載的所有資源的詳細資訊，以及一個瀑布式時間圖，顯示每個資源下載所花費的時間。
您還應該檢視 Chrome 的 Network Monitor 文件。
效能監控工具
您還可以使用瀏覽器效能工具，例如 Firefox Performance Monitor，在執行不同操作時測量 Web 應用程式或網站使用者介面的效能。這可以指示可能導致您的 Web 應用程式或網站變慢的功能。
Performance APIs
在為 Web 編寫程式碼時，許多 Web API 可用於建立您自己的效能衡量工具。
您可以使用 Navigation Timing API 來衡量客戶端 Web 效能，包括解除安裝前一個頁面所需的時間、域名查詢花費的時間、執行視窗 load 處理程式所花費的總時間等等。您可以使用該 API 獲取與下方圖表中所有導航事件相關的指標。
提供對當前頁面效能相關資訊訪問的 Performance API，包括幾個 API，例如 Navigation Timing API、User Timing API 和 Resource Timing API。這些介面允許精確測量 JavaScript 任務完成所需的時間。
PerformanceEntry 物件是效能時間線的一部分。透過在應用程式的顯式點建立效能mark 或measure（例如，透過呼叫 mark() 方法）可以直接建立效能條目。效能條目也可以透過間接方式建立，例如載入影像等資源。
可以使用 PerformanceObserver API 來觀察效能測量事件，並在瀏覽器效能時間線上記錄新的 效能條目時通知您。
雖然本文沒有深入介紹如何使用這些 API，但瞭解它們的存在是有幫助的。有關使用效能 Web API 的更多示例，請參閱 Navigation and timings 文章。
總結
本文簡要概述了一些可幫助您在 Web 應用程式或網站上衡量效能的工具。在下一篇文章中，我們將探討如何最佳化網站上的影像以提高其效能。