效能是使用者體驗的關鍵要素。網頁載入速度和回應使用者輸入內容的速度,會對使用者對網站的看法造成重大影響,並決定使用者是否會繼續瀏覽網站,或放棄使用。這個網頁提供豐富的網頁成效主題資訊,有助於加快網站載入速度並加快速度。
您是成效新手嗎?我們提供完整課程,協助您快速上手。
瞭解三項 Core Web Vitals 指標的運作方式,以及為何對提供優質使用者體驗至關重要。
瞭解 Core Web Vitals 指標後,請參閱這些指南,瞭解如何最佳化這些指標。
透過一系列指南深入瞭解 Core Web Vitals,進一步探索這些指標。
發掘可提升成效的新功能,這些功能現已納入基準功能。
瞭解各家公司如何改善 Core Web Vitals,進而提升業務指標。
瞭解如何使用 Chrome 開發人員工具,對網站的效能問題進行偵錯。
課程

網頁效能是一個複雜且多面向的領域,但並非無法學習的內容!如果您是新手,這門課程將先介紹成效基礎知識,讓您掌握基本概念,再逐步深入進階主題。完成課程後,您立即就能應用所學了!

網站使用體驗核心指標是一組以使用者體驗為重點的三項指標。這些指標可測量網頁的效能和可用性,包括感知載入時間、視覺穩定性和回應使用者輸入內容的速度。如果您是 Core Web Vitals 新手,請參閱這些指南,瞭解 Core Web Vitals 的運作方式,並掌握如何著手改善。

LCP 指標可用來評估最大型的內容出現在網頁上所需的時間。低 LCP 信號的網頁會向使用者傳達網頁載入速度快的訊息。
CLS 是一種指標,可觀察網頁版面配置是否出現非預期變化,進而評估版面配置的穩定性。CLS 值偏低的網頁會向使用者傳達網頁版面配置穩定,不會在使用者嘗試與網頁互動時發生異常變化。
INP 是一種指標,用於評估網頁回應使用者輸入內容的速度。如果網頁的 INP 不足,使用者就會知道網頁能在與網頁互動時迅速回應,讓網站更可靠且愉悅。
每個 Core Web Vitals 指標都能經過最佳化調整,進而改善使用者體驗。每份指南都會深入說明如何運用已驗證的技術,提高網站效能和可靠性,讓使用者更願意與網站互動,並減少離開網站的可能性。
瞭解如何為使用者最佳化 LCP,讓他們能盡快查看網頁中最重要的內容。
瞭解如何為使用者最佳化 CLS,讓他們能預期網站會保持穩定,並更容易使用。
瞭解如何為使用者最佳化 INP,讓他們預期網站能快速回應互動。
瞭解這三項 Core Web Vitals 指標及其最佳化方式,是個不錯的開始,但還有更多相關主題值得您吸收。這個內容集合可協助您瞭解如何評估及偵錯這些項目,以及處理 Cookie 通知、輪轉介面和其他常見使用者介面問題時適用的其他最佳做法。
提升效能不僅能改善使用者體驗,還可能有助於拓展業務。瞭解這些公司如何改善 Core Web Vitals,並提升業務指標。
瞭解 Disney+ Hotstar 如何透過減少 61% 的 INP,讓客廳裝置的每週廣告看板觀看次數增加 100%。
瞭解 PubTech 的同意聲明管理平台如何將客戶網站上的 INP 減少最多 64%,同時提高廣告可視度最多 1.5%
瞭解 Taboola 如何使用 Long Animation Frames API (LoAF),為其發布商合作夥伴網站提高 INP 至多達 36%。

Baseline 會向網路開發人員發出信號,指出網路平台功能可在所有主要瀏覽器引擎中安全使用。以下是一些網站效能相關功能,現已成為 Baseline 新成員。

content-visibility CSS 屬性已於 2024 年 9 月成為新基準。
AVIF 圖片格式於 2024 年 1 月成為基準新格式。
模組預先載入功能已於 2023 年 9 月成為 Baseline 新功能。
Server-Timing HTTP 回應標頭已於 2023 年 3 月成為新基準。

Chrome 開發人員工具是一套供開發人員偵錯網頁應用程式的工具,其中包含了可協助您瞭解及改善網頁應用程式效能的工具。

開發人員工具中的「網路」面板會顯示網頁載入的所有資源,以及載入這些資源所需的時間。瞭解如何使用這個面板找出與資源負載有關的效能問題。
開發人員工具中的「效能」面板會顯示錄製工作階段期間網頁效能的詳細資訊,包括主執行緒的活動、網路活動,以及可協助您找出及修正效能問題的其他工具。
「Memory」面板會顯示網頁 JavaScript 目前使用的記憶體用量。瞭解如何使用這個面板,您就能找出並修正網頁 JavaScript 造成的記憶體相關問題。