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

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

瞭解成效！
您必須先評估網站成效，才能改善成效。PageSpeed Insights 是一項工具，可使用以使用者為本的重要指標評估網站成效，並協助您找出可改善網站成效的部分。
開始學習

網站使用體驗核心指標是一組以使用者體驗為重點的三項指標。這些指標可測量網頁的效能和可用性，包括感知載入時間、視覺穩定性和回應使用者輸入內容的速度。如果您是 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 造成的記憶體相關問題。
瞭解詳情