網站效能
效能是使用者體驗的關鍵要素。網頁載入速度和回應使用者輸入內容的速度,會對使用者對網站的看法造成重大影響,並決定使用者是否會繼續瀏覽網站,或放棄使用。這個網頁提供豐富的網頁成效主題資訊,有助於加快網站載入速度並加快速度。
跳至本頁的其他部分:
瞭解效能
您是成效新手嗎?我們提供完整課程,協助您快速上手。
Core Web Vitals
瞭解三項 Core Web Vitals 指標的運作方式,以及為何對提供優質使用者體驗至關重要。
最佳化 Core Web Vitals
瞭解 Core Web Vitals 指標後,請參閱這些指南,瞭解如何最佳化這些指標。
進一步瞭解 Core Web Vitals
透過一系列指南深入瞭解 Core Web Vitals,進一步探索這些指標。
基準功能:新推出的成效功能
發掘可提升成效的新功能,這些功能現已納入基準功能。
個案研究
瞭解各家公司如何改善 Core Web Vitals,進而提升業務指標。
使用 Chrome 開發人員工具偵錯
瞭解如何使用 Chrome 開發人員工具,對網站的效能問題進行偵錯。
Core Web Vitals
網站使用體驗核心指標是一組以使用者體驗為重點的三項指標。這些指標可測量網頁的效能和可用性,包括感知載入時間、視覺穩定性和回應使用者輸入內容的速度。如果您是 Core Web Vitals 新手,請參閱這些指南,瞭解 Core Web Vitals 的運作方式,並掌握如何著手改善。
Largest Contentful Paint (LCP)
LCP 指標可用來評估最大型的內容出現在網頁上所需的時間。低 LCP 信號的網頁會向使用者傳達網頁載入速度快的訊息。
Cumulative Layout Shift (CLS)
CLS 是一種指標,可觀察網頁版面配置是否出現非預期變化,進而評估版面配置的穩定性。CLS 值偏低的網頁會向使用者傳達網頁版面配置穩定,不會在使用者嘗試與網頁互動時發生異常變化。
與下一個顯示的內容互動 (INP)
INP 是一種指標,用於評估網頁回應使用者輸入內容的速度。如果網頁的 INP 不足,使用者就會知道網頁能在與網頁互動時迅速回應,讓網站更可靠且愉悅。
最佳化 Core Web Vitals
每個 Core Web Vitals 指標都能經過最佳化調整,進而改善使用者體驗。每份指南都會深入說明如何運用已驗證的技術,提高網站效能和可靠性,讓使用者更願意與網站互動,並減少離開網站的可能性。
最佳化最大內容繪製 (LCP)
瞭解如何為使用者最佳化 LCP,讓他們能盡快查看網頁中最重要的內容。
改善累計版面配置位移 (CLS)
瞭解如何為使用者最佳化 CLS,讓他們能預期網站會保持穩定,並更容易使用。
最佳化與下一個顯示的內容 (INP) 互動
瞭解如何為使用者最佳化 INP,讓他們預期網站能快速回應互動。
進一步瞭解 Core Web Vitals
瞭解這三項 Core Web Vitals 指標及其最佳化方式,是個不錯的開始,但還有更多相關主題值得您吸收。這個內容集合可協助您瞭解如何評估及偵錯這些項目,以及處理 Cookie 通知、輪轉介面和其他常見使用者介面問題時適用的其他最佳做法。
個案研究
提升效能不僅能改善使用者體驗,還可能有助於拓展業務。瞭解這些公司如何改善 Core Web Vitals,並提升業務指標。
Disney+ Hotstar
瞭解 Disney+ Hotstar 如何透過減少 61% 的 INP,讓客廳裝置的每週廣告看板觀看次數增加 100%。
PubTech
瞭解 PubTech 的同意聲明管理平台如何將客戶網站上的 INP 減少最多 64%,同時提高廣告可視度最多 1.5%
Taboola
瞭解 Taboola 如何使用 Long Animation Frames API (LoAF),為其發布商合作夥伴網站提高 INP 至多達 36%。
基準新的網站效能功能
Baseline 會向網路開發人員發出信號,指出網路平台功能可在所有主要瀏覽器引擎中安全使用。以下是一些網站效能相關功能,現已成為 Baseline 新成員。
使用 Chrome 開發人員工具偵錯效能
Chrome 開發人員工具是一套供開發人員偵錯網頁應用程式的工具,其中包含了可協助您瞭解及改善網頁應用程式效能的工具。
「Network」面板
開發人員工具中的「網路」面板會顯示網頁載入的所有資源,以及載入這些資源所需的時間。瞭解如何使用這個面板找出與資源負載有關的效能問題。
「效能」面板
開發人員工具中的「效能」面板會顯示錄製工作階段期間網頁效能的詳細資訊,包括主執行緒的活動、網路活動,以及可協助您找出及修正效能問題的其他工具。
「記憶體」面板
「Memory」面板會顯示網頁 JavaScript 目前使用的記憶體用量。瞭解如何使用這個面板,您就能找出並修正網頁 JavaScript 造成的記憶體相關問題。