歡迎來到「學習成效」課程!

網頁效能是網站開發的重要一環,會著重於網頁載入的速度,以及網頁對使用者輸入內容的回應速度。只要改善網站效能,就能讓使用者享有更優質的體驗。更出色的使用者體驗能長久協助您達成網站目標。

網頁效能看似小眾主題,但事實上,其廣度和深度都不相同。由於課程深度是學科領域,因此網頁效能課程必須淺顯易懂,而且實用。本課程的初始版本著重在網站效能基礎知識,新手應從中獲得資訊。

本系列中每個單元的目標,都應盡可能提供一組示範,以補充每個模組的內容,並展示重要效能概念。由於本課程是初始版,因此我們預計在未來幾個月內發布其他模組。

以下是「學習成效」的第一堂課程,內容如下:

速度的重要性

開始學習成效之前,您必須先瞭解這個領域在使用者體驗中扮演的角色,以及這個方式如何提升使用者體驗。本課程會先簡單介紹這些主題,提供重要的背景資訊,讓您瞭解學習效能的重要性。

一般 HTML 效能注意事項

每個網站一開始都會請求 HTML 文件,要求將決定網站載入速度。本單元會說明 HTML 快取、剖析器封鎖、轉譯封鎖等重要概念,因此您可以確保對網站 HTML 發出的第一個要求正確無誤。

瞭解關鍵路徑

重要轉譯路徑是網站效能的一個概念,旨在處理網頁的初始轉譯速度,在瀏覽器中顯示的速度。本單元深入探討重要轉譯路徑背後的理論,講解了會轉譯和剖析器封鎖資源等概念,並說明這些概念如何影響網頁在瀏覽器中顯示的速度。

最佳化資源載入

載入網頁時,HTML 中會參照許多資源,這些資源會透過 CSS 提供網頁的外觀和版面配置,以及透過 JavaScript 呈現的網頁互動性。在這個單元中,會介紹一些與這些資源相關的重要概念,以及這些資源對網頁載入時間的影響。

透過資源提示協助瀏覽器

資源提示是 HTML 中的一系列功能,可協助瀏覽器提早載入資源,甚至支援更高的資源優先順序。本單元將介紹一些有助於加快頁面載入速度的資源提示。

圖片效能

圖片反映了現今許多網頁上傳輸的大部分資料。本單元說明如何最佳化圖片及有效率地提供圖片,無論使用者的裝置為何,都能盡可能減少浪費的位元組。

影片成效

影片是經常在網頁上使用的媒體類型,但自認如何有效放送影片是不該忽視成效的一環。本單元介紹一些關於嵌入影片的重要技巧,目的是確保網站運作順暢,以及因使用時可能產生的效能考量。

最佳化網路字型

網頁字型是網路上常用的資源,在右側就是如此,因為這類字型加到網站設計時,是其他資源無法做到的。即使如此,網頁字型還是會影響效能。本單元將探討一些有關網頁字型的效能考量和技術。

程式碼分割 JavaScript

有些資源對網頁初始載入來說並無重要,JavaScript 是這類資源,可藉由「程式碼分割」的技術延後,直到需要時間為止。如此一來,您就能降低頻寬和 CPU 爭用情況來改善效能,這對於改善初始頁面載入速度和啟動期間的輸入回應速度至關重要。

延遲載入圖片和 <iframe> 元素

圖片和 <iframe> 元素可能會耗用大量頻寬和 CPU 處理時間。不過,並非所有圖片和 <iframe> 元素都需要在初始頁面載入期間載入,並延後到使用者最容易看到這些元素的時間。這種技巧稱為「延遲載入」。在這個單元中,我們會說明延遲載入圖片和 <iframe> 元素,讓網頁載入速度更快,而且只在必要時才耗用頻寬和處理時間。

預先擷取、預先算繪和服務工作站預先快取

雖然多數效能會佔用您該如何最佳化,以及消除不必要的資源,但建議有些資源必須在必要前載入,看起來有點複雜。但在某些情況下,可能應該預先載入某些資源。在這個單元中,我們會探討預先擷取、預先算繪和服務工作站預先快取等方面的效能。

網路工作站總覽

使用者在瀏覽器中看到的大部分內容都是在單一執行緒上,稱為「主執行緒」。不過,在某些情況下,您可以啟動新的執行緒來執行運算成本高昂的工作,讓主執行緒能夠因應面向使用者的重要工作。執行這項作業的 API 稱為 Web Worker API,在本單元中,我們會介紹其基本概念。

具體的網路工作站用途

現在您對網路工作站及其功能和限制已有基本瞭解,接下來我們來看看網路工作站的具體用途。在本示範中,網路工作站將用於擷取 JPEG 檔案、擷取其中繼資料,然後傳回主執行緒,讓使用者在瀏覽器中查看。

 

準備好開始學習網站效能了嗎?請先閱讀速度的重要性一文,瞭解何謂速度。