什麼是 Web 效能？
網頁效能主要關注如何使網站載入速度更快，包括讓緩慢的過程看起來很快。網站載入是否快速？使用者是否可以快速開始與之互動？如果某些內容載入需要時間（例如載入旋轉器），是否會提供令人放心的反饋？滾動和動畫是否流暢？本文簡要介紹了客觀、可衡量的網頁效能*，探討了網頁最佳化中涉及的技術、技巧和工具。
* 相對於主觀、感知效能，將在下一篇文章中介紹
什麼是 Web 效能？
網頁效能是指網站或應用程式的客觀衡量和使用者感知體驗。這包括以下主要方面
- 減少整體載入時間：渲染網站所需的檔案下載到使用者計算機上需要多長時間？這往往受延遲、檔案大小、檔案數量以及其他因素的影響。一個通用的策略是儘可能減小檔案大小，儘可能減少 HTTP 請求數量，並使用巧妙的載入技術（例如預載入）使檔案更快地可用。
- 儘快使網站可用：這基本上意味著以合理的順序載入網站資源，以便使用者能夠非常快速地開始實際使用它。其他任何資源都可以在後臺繼續載入，而使用者則可以執行主要任務，有時我們只在真正需要時載入資源（這稱為延遲載入）。網站從開始載入到可用啟動所花費的時間被稱為互動時間。
- 流暢性和互動性：應用程式使用起來是否可靠且令人愉悅？滾動是否流暢？按鈕是否可點選？彈出視窗是否快速開啟，以及在開啟時動畫是否流暢？在使應用程式感覺流暢方面，有很多最佳實踐需要考慮，例如使用 CSS 動畫而不是 JavaScript 進行動畫，以及最大程度地減少由於 DOM 更改而導致的 UI 重繪次數。
- 感知效能：網站在使用者眼中載入速度快慢，對使用者體驗的影響大於網站的實際載入速度。使用者如何感知您的效能與任何客觀統計資料一樣重要，甚至可能更重要，但它是主觀的，而且不容易衡量。感知效能是使用者視角，而不是指標。即使某個操作需要很長時間（由於延遲或其他原因），也可以透過顯示載入旋轉器或一系列有用的提示和技巧（或笑話，或您認為合適的任何其他內容）來保持使用者的參與度，讓他們在等待時不感到無聊。這種方法遠比什麼都不顯示要好，因為什麼都不顯示會讓人感覺載入時間長得多，並可能導致使用者認為網站已損壞而放棄。
- 效能測量：網頁效能包括測量應用程式的實際和感知速度，在可能的情況下進行最佳化，然後監控效能，以確保您最佳化的內容保持最佳化狀態。這涉及許多指標（可以指示成功或失敗的可衡量指標）和用於衡量這些指標的工具，我們將在本模組中進行討論。
總而言之，許多功能會影響效能，包括延遲、應用程式大小、DOM 節點數、發出的資源請求數、JavaScript 效能、CPU 負載等等。重要的是要最小化載入和響應時間，並新增其他功能來隱藏延遲，使體驗儘可能快地可用和互動，同時非同步載入體驗的較長尾部分。
注意：網頁效能既包括載入時間、每秒幀數和互動時間等客觀測量，也包括使用者對內容載入時間的感知體驗。
內容是如何呈現的
為了有效地理解網頁效能、其背後的問題以及我們上面提到的主要主題領域，您確實應該瞭解一些有關瀏覽器工作原理的具體內容。這包括
- 瀏覽器的工作原理。當您請求一個 URL 並按下Enter / Return 時，瀏覽器會找出儲存該網站檔案的伺服器在哪裡，建立與該伺服器的連線，並請求這些檔案。請參閱填充頁面：瀏覽器的工作原理，以獲取詳細概述。
- 原始碼順序。HTML 索引檔案的原始碼順序會顯著影響效能。從索引檔案中連結到的其他資源的下載通常是順序進行的，基於原始碼順序，但這可以進行操作，並且絕對應該進行最佳化，意識到某些資源會阻止其他下載，直到其內容被解析並執行。
- 關鍵渲染路徑。這是瀏覽器在從伺服器下載檔案後構建網頁文件的過程。瀏覽器遵循一組明確定義的步驟，最佳化關鍵渲染路徑以優先顯示與當前使用者操作相關的內容，將顯著縮短內容渲染時間。請參閱關鍵渲染路徑，以獲取更多資訊。
- 文件物件模型。文件物件模型或 DOM 是一個樹形結構，它將 HTML 的內容和元素表示為節點樹。這包括所有 HTML 屬性以及節點之間的關係。頁面載入後進行大量的 DOM 操作（例如，新增、刪除或移動節點）可能會影響效能，因此瞭解 DOM 的工作原理以及如何緩解此類問題非常有價值。請訪問文件物件模型，瞭解更多資訊。
- 延遲。我們之前簡要提到了這一點，但簡而言之，延遲是指網站資源從伺服器傳輸到使用者計算機所需的時間。建立 TCP 和 HTTP 連線會產生開銷，並且在網路上傳輸請求和響應位元組時存在一些不可避免的延遲，但有一些方法可以減少延遲（例如，透過下載較少的檔案來減少 HTTP 請求數量，使用CDN 使您的網站在全球範圍內具有更好的效能，並使用 HTTP/2 更有效地從伺服器提供檔案）。您可以在理解延遲中詳細瞭解此主題。