Web 效能
構建網站需要 HTML、CSS 和 JavaScript。要構建人們願意使用的、能夠吸引並留住使用者的網站和應用程式，你需要創造良好的使用者體驗。良好的使用者體驗的一部分是確保內容載入速度快並且能夠響應使用者互動。這被稱為Web 效能，在本模組中，你將專注於建立高效能網站的基礎知識。
我們其餘的初學者學習材料會盡量堅持 Web 最佳實踐，例如效能和可訪問性，但專門關注這些主題也是很好的，並確保你熟悉它們。
預備知識
雖然瞭解 HTML、CSS 和 JavaScript 對於實施許多 Web 效能改進建議是必需的，但瞭解如何構建應用程式並不是理解和衡量 Web 效能的必要前提。然而，我們建議你在學習本模組之前，至少透過學習我們的你的第一個網站模組對 Web 開發有一個基本瞭解。
深入研究這些主題也會很有幫助，例如透過以下模組：
指南
- Web 效能的“為什麼”
-
本文討論了為什麼 Web 效能對可訪問性、使用者體驗和你的業務目標很重要。
- 什麼是 Web 效能？
-
你知道 Web 效能很重要，但 Web 效能是由什麼構成的？本文介紹了效能的組成部分，從網頁載入和渲染，包括你的內容如何進入使用者的瀏覽器被檢視，到我們在考慮效能時需要考慮的群體。
- 使用者如何感知效能？
-
比你的網站在毫秒內的速度更重要的是，你的使用者感知你的網站的速度。這些感知會受到實際頁面載入時間、空閒時間、對使用者互動的響應能力以及滾動和其他動畫的流暢度的影響。在本文中，我們討論了各種載入指標、動畫和響應能力指標，以及改進使用者感知（如果不是實際時間）的最佳實踐。
- 測量效能
-
現在你已經瞭解了一些效能指標，我們將深入探討效能工具、指標和 API，以及如何將效能融入 Web 開發工作流程。
- 多媒體：圖片
-
Web 效能中最容易實現的改進通常是媒體最佳化。可以根據每個使用者代理的功能、大小和畫素密度來提供不同的媒體檔案。在本文中，我們討論了圖片對效能的影響，以及減少每張圖片傳送位元組數的方法。
- 多媒體：影片
-
Web 效能中最容易實現的改進通常是媒體最佳化。在本文中，我們討論了影片內容對效能的影響，並介紹了一些技巧，例如從背景影片中刪除音訊軌道可以提高效能。
- JavaScript 效能最佳化
-
JavaScript，如果使用得當，可以實現互動式和沉浸式的 Web 體驗 — 或者會嚴重損害下載時間、渲染時間、應用內效能、電池壽命和使用者體驗。本文概述了一些 JavaScript 最佳實踐，應予以考慮，以確保即使是複雜的內容也能儘可能高效。
- HTML 效能最佳化
-
某些屬性和標記的源順序會影響你網站的效能。透過最小化 DOM 節點的數量，確保使用最佳順序和屬性來包含樣式、指令碼、媒體和第三方指令碼等內容，你可以極大地改善使用者體驗。本文詳細介紹瞭如何使用 HTML 來確保最大效能。
- CSS 效能最佳化
-
CSS 可能是改進效能的最佳化重點中不太重要的部分，但某些 CSS 功能對效能的影響比其他功能更大。在本文中，我們重點介紹一些影響效能的 CSS 屬性，以及處理樣式的建議方法，以確保效能不會受到負面影響。
- Web 效能的商業案例
-
開發人員可以做很多事情來提高效能，但多快才算足夠快？你如何說服當權者這些努力的重要性？一旦最佳化完成，如何確保膨脹不會捲土重來？在本文中，我們討論如何說服管理層、培養效能文化和效能預算，並介紹確保迴歸錯誤不會悄悄潛入你的程式碼庫的方法。
- Web 效能最佳實踐和技巧
-
本文以基本水平涵蓋了幾個主題，並提供了連結以深入瞭解每個主題以改進效能。除了 HTML、CSS、JavaScript 和媒體檔案等前端主題外，它還涵蓋了與 Web 效能相關的 API、開發人員工具、最佳實踐和壞實踐。
另見
- 響應式圖片
-
在本文中，我們將瞭解響應式圖片的概念 — 能夠很好地適應螢幕尺寸、解析度和其他功能的裝置的圖片 — 並探討 HTML 提供了哪些工具來幫助實現它們。這有助於提高不同裝置的效能。響應式圖片只是響應式設計的一部分，這是你將來要學習的 CSS 主題。
- MDN 上的主要 Web 效能部分
-
我們的主要 Web 效能部分 — 在這裡，你將找到有關 Web 效能的更多詳細資訊，包括效能 API 的概述、測試和分析工具以及效能瓶頸的陷阱。