網頁效能是網站開發的重要一環，會著重於網頁載入的速度，以及網頁對使用者輸入內容的回應速度。只要改善網站效能，就能讓使用者享有更優質的體驗。更出色的使用者體驗能長久協助您達成網站目標。
網頁效能看似小眾主題，但事實上，其廣度和深度都不相同。由於課程深度是學科領域，因此網頁效能課程必須淺顯易懂，而且實用。本課程的初始版本著重在網站效能基礎知識，新手應從中獲得資訊。
本系列中每個單元的目標，都應盡可能提供一組示範，以補充每個模組的內容，並展示重要效能概念。由於本課程是初始版，因此我們預計在未來幾個月內發布其他模組。
以下是「學習成效」的第一堂課程，內容如下：
速度的重要性
開始學習成效之前，您必須先瞭解這個領域在使用者體驗中扮演的角色，以及這個方式如何提升使用者體驗。本課程會先簡單介紹這些主題，提供重要的背景資訊，讓您瞭解學習效能的重要性。
一般 HTML 效能注意事項
每個網站一開始都會請求 HTML 文件，要求將決定網站載入速度。本單元會說明 HTML 快取、剖析器封鎖、轉譯封鎖等重要概念，因此您可以確保對網站 HTML 發出的第一個要求正確無誤。
瞭解關鍵路徑
重要轉譯路徑是網站效能的一個概念，旨在處理網頁的初始轉譯速度，在瀏覽器中顯示的速度。本單元深入探討重要轉譯路徑背後的理論，講解了會轉譯和剖析器封鎖資源等概念，並說明這些概念如何影響網頁在瀏覽器中顯示的速度。
最佳化資源載入
載入網頁時，HTML 中會參照許多資源，這些資源會透過 CSS 提供網頁的外觀和版面配置，以及透過 JavaScript 呈現的網頁互動性。在這個單元中，會介紹一些與這些資源相關的重要概念，以及這些資源對網頁載入時間的影響。
透過資源提示協助瀏覽器
資源提示是 HTML 中的一系列功能，可協助瀏覽器提早載入資源，甚至支援更高的資源優先順序。本單元將介紹一些有助於加快頁面載入速度的資源提示。
圖片效能
圖片反映了現今許多網頁上傳輸的大部分資料。本單元說明如何最佳化圖片及有效率地提供圖片，無論使用者的裝置為何，都能盡可能減少浪費的位元組。
影片成效
影片是經常在網頁上使用的媒體類型，但自認如何有效放送影片是不該忽視成效的一環。本單元介紹一些關於嵌入影片的重要技巧，目的是確保網站運作順暢，以及因使用時可能產生的效能考量。
最佳化網路字型
網頁字型是網路上常用的資源，在右側就是如此，因為這類字型加到網站設計時，是其他資源無法做到的。即使如此，網頁字型還是會影響效能。本單元將探討一些有關網頁字型的效能考量和技術。
程式碼分割 JavaScript
有些資源對網頁初始載入來說並無重要，JavaScript 是這類資源，可藉由「程式碼分割」的技術延後，直到需要時間為止。如此一來，您就能降低頻寬和 CPU 爭用情況來改善效能，這對於改善初始頁面載入速度和啟動期間的輸入回應速度至關重要。
延遲載入圖片和 <iframe> 元素
圖片和 <iframe> 元素可能會耗用大量頻寬和 CPU 處理時間。不過，並非所有圖片和 <iframe> 元素都需要在初始頁面載入期間載入，並延後到使用者最容易看到這些元素的時間。這種技巧稱為「延遲載入」。在這個單元中，我們會說明延遲載入圖片和 <iframe> 元素，讓網頁載入速度更快，而且只在必要時才耗用頻寬和處理時間。
預先擷取、預先算繪和服務工作站預先快取
雖然多數效能會佔用您該如何最佳化，以及消除不必要的資源，但建議有些資源必須在必要前載入，看起來有點複雜。但在某些情況下，可能應該預先載入某些資源。在這個單元中，我們會探討預先擷取、預先算繪和服務工作站預先快取等方面的效能。
網路工作站總覽
使用者在瀏覽器中看到的大部分內容都是在單一執行緒上，稱為「主執行緒」。不過，在某些情況下，您可以啟動新的執行緒來執行運算成本高昂的工作，讓主執行緒能夠因應面向使用者的重要工作。執行這項作業的 API 稱為 Web Worker API，在本單元中，我們會介紹其基本概念。
具體的網路工作站用途
現在您對網路工作站及其功能和限制已有基本瞭解，接下來我們來看看網路工作站的具體用途。在本示範中，網路工作站將用於擷取 JPEG 檔案、擷取其中繼資料，然後傳回主執行緒，讓使用者在瀏覽器中查看。
準備好開始學習網站效能了嗎？請先閱讀速度的重要性一文，瞭解何謂速度。