網頁效能

雖然瞭解 HTML、CSS 和 JavaScript 是實施許多網站效能改進建議所必需的，但瞭解如何構建應用程式並不是理解和衡量網站效能的必要先決條件。但是，我們建議您在學習本模組之前，至少透過我們的網路入門模組瞭解一下基本 Web 開發知識。

深入瞭解這些主題也將會很有幫助，例如以下模組：

• HTML 簡介
• CSS 初步
• JavaScript 初步

完成本模組後，您可能會很樂意更深入地瞭解 Web 效能——您可以在我們的主要 MDN Web 效能部分找到許多進一步的教學內容，包括效能 API 概述、測試和分析工具以及效能瓶頸陷阱。

本主題包含以下指南。以下是在學習過程中建議的順序；您絕對應該從第一個開始。

Web 效能的“原因”

本文討論了 Web 效能為何對可訪問性、使用者體驗和您的業務目標至關重要。

什麼是 Web 效能？

您知道 Web 效能很重要，但什麼是 Web 效能？本文介紹了效能的組成部分，從網頁載入和渲染開始，包括您的內容如何進入使用者瀏覽器以供檢視，到我們在考慮效能時需要考慮的人群。

使用者如何感知效能？

比網站以毫秒為單位的速度更重要的是，使用者感知網站的速度有多快。這些感知會受到實際頁面載入時間、空閒時間、對使用者互動的響應能力以及滾動和其他動畫的流暢性的影響。在本文中，我們討論了各種載入指標、動畫和響應指標，以及改進使用者感知（即使不是實際時間）的最佳實踐。

衡量效能

現在您已經瞭解了一些效能指標，我們將更深入地探討效能工具、指標和 API，以及如何將效能納入 Web 開發工作流程。

多媒體：影像

Web 效能中最容易實現的最佳化通常是媒體最佳化。可以根據每個使用者代理的功能、大小和畫素密度提供不同的媒體檔案。在本文中，我們將討論影像對效能的影響，以及減少每個影像傳送的位元組數的方法。

多媒體：影片

Web 效能中最容易實現的最佳化通常是媒體最佳化。在本文中，我們將討論影片內容對效能的影響，並介紹一些提示，例如從背景影片中刪除音訊軌道可以提高效能。

JavaScript 效能最佳化

JavaScript 如果使用得當，可以提供互動式且沉浸式的 Web 體驗——或者它會嚴重損害下載時間、渲染時間、應用內效能、電池壽命和使用者體驗。本文概述了一些應考慮的 JavaScript 最佳實踐，以確保即使是複雜的內容也能儘可能地提高效能。

HTML 效能最佳化

某些屬性和標記的源順序可能會影響網站的效能。透過最小化 DOM 節點數，確保使用最佳順序和屬性來包含內容（如樣式、指令碼、媒體和第三方指令碼），您可以極大地改善使用者體驗。本文詳細介紹瞭如何使用 HTML 來確保最大效能。

CSS 效能最佳化

CSS 可能是提高效能的次要最佳化重點，但某些 CSS 功能比其他功能對效能的影響更大。在本文中，我們將探討一些影響效能的 CSS 屬性，並建議處理樣式的方法，以確保效能不受負面影響。

字型和效能

瞭解您是否需要包含外部字型，以及如果需要，如何以對網站效能影響最小的方式包含設計所需的字型。

移動效能

隨著移動裝置上的 Web 訪問變得如此普及，並且所有移動平臺都擁有功能齊全的 Web 瀏覽器，但頻寬、CPU 和電池壽命可能有限，因此考慮 Web 內容在這些平臺上的效能非常重要。本文探討了移動裝置特有的效能注意事項。

Web 效能的商業案例

開發人員可以做很多事情來提高效能，但多快才算足夠快？您如何說服相關人員重視這些努力？最佳化後，如何確保不會出現膨脹問題？在本文中，我們將探討如何說服管理層、培養效能文化和效能預算，並介紹如何確保迴歸問題不會潛入您的程式碼庫。

Web 效能資源

除了 HTML、CSS、JavaScript 和媒體檔案等前端元件之外，還有一些功能會使應用程式變慢，還有一些功能會使應用程式在主觀和客觀上都變快。與 Web 效能相關的 API、開發人員工具、最佳實踐和不良實踐有很多。在這裡，我們將介紹許多這些功能的基礎知識，並提供連結以更深入地瞭解每個主題，從而提高效能。

響應式影像

在本文中，我們將學習響應式影像的概念——在螢幕尺寸、解析度和其他此類功能差異很大的裝置上都能良好執行的影像——並瞭解 HTML 提供了哪些工具來幫助實現它們。這有助於提高不同裝置上的效能。響應式影像只是響應式設計的一部分，響應式設計是您將來要學習的 CSS 主題。

MDN 上的主要 Web 效能部分

我們的主要 Web 效能部分——在這裡，您將找到更多關於 Web 效能的詳細資訊，包括效能 API 概述、測試和分析工具以及效能瓶頸陷阱。