性能是用户体验的一个重要方面。网页的加载速度和响应用户输入的速度会显著影响用户对您网站的看法,并且还会决定用户是继续浏览您的网站还是放弃您的网站。在本页面上,您可以找到有关各种 Web 性能主题的丰富信息,这些信息有助于您加快网站速度并保持其快速运行。
刚开始接触效果?我们提供了全面的课程来帮助您轻松上手。
首先,使用 PageSpeed Insights 衡量您网站的性能,以便着手提升性能。
了解 Core Web Vitals 的三个指标、它们的运作方式,以及为什么它们对打造良好的用户体验至关重要。
了解 Core Web Vitals 指标后,这些指南可以帮助您了解如何最好地优化这些指标。
通过一系列指南,您可以更深入地了解 Core Web Vitals,这些指南会更详细地介绍这些指标。
探索新推出的“基准”功能,提升广告效果。
了解各公司如何改进 Core Web Vitals 并因此提升业务指标。
了解如何使用 Chrome 开发者工具调试网站上的性能问题。
课程

网站性能是一个复杂且多方面的主题领域,但并非无法学习!如果您刚开始接触性能,我们的课程将帮助您快速上手,首先向您介绍性能基础,帮助您逐步完成更高级的主题。完成本课程后,您将能够立即运用所学知识!

您必须先衡量网站的性能,然后才能提升其性能。PageSpeed Insights 是一款工具,可使用以用户为中心的重要指标衡量网站的性能,并帮助您找出可以改进网站性能的方面。

Core Web Vitals 指标是一组侧重于用户体验的三个指标。这些指标用于衡量网页的性能和易用性,包括感知的加载时间、视觉稳定性和对用户输入的响应速度。如果您刚开始接触核心 Web 指标,请参阅以下指南,熟悉这些指标的运作方式,并了解如何着手优化这些指标。

LCP 是一个指标,用于衡量最重要的内容在网页上显示所需的时间。LCP 较低的网页可向用户表明其网页加载速度很快。
CLS 是一个指标,用于通过观察网页是否出现意外的布局变化来衡量布局稳定性。CLS 较低的网页会向用户发出信号,表明网页的布局稳定,在用户尝试与其互动时不会意外更改。
INP 是一项指标,用于衡量网页对用户输入的响应速度。INP 较低的网页会向用户发出信号,表明网页在用户与其互动时会快速响应,从而让用户觉得您的网站更可靠、更易用。
您可以优化 Core Web Vitals 指标中的每项指标,以提升用户体验。这些指南中的每一份都深入介绍了如何运用久经考验的技术来提升网站的性能和可靠性,从而提高用户互动度并降低用户流失的可能性。
了解如何为用户优化 LCP,以便他们能够尽快看到您网页上最重要的内容。
了解如何为用户优化 CLS,让用户预期您的网站会保持稳定且更易于使用。
了解如何为用户优化 INP,让他们可以预期您的网站会对互动做出快速响应。
了解这三个 Core Web Vitals 指标及其优化方法是一个很好的起点,但与之相关的主题还有更多。此内容集将帮助您了解如何衡量和调试这些指标,以及有关 Cookie 通知、轮播界面和其他常见界面问题的一些其他最佳实践。
提升性能不仅能改善用户体验,还有助于您的业务发展壮大。了解这些公司如何改进 Core Web Vitals 并提升业务指标。
了解 Disney+ Hotstar 如何将 INP 降低 61%,从而将客厅设备上的每周卡片观看次数提高 100%。
了解 PubTech 的意见征求管理平台如何将客户网站上的 INP 最多降低 64%,同时将广告可见度最多提高 1.5%
了解 Taboola 如何使用 Long Animation Frames API (LoAF) 为其发布商合作伙伴网站将 INP 提升高达 36%。

向 Web 开发者发出基准信号,指明 Web 平台功能可以在所有主流浏览器引擎中安全使用。以下是一些现已纳入 Baseline 新版的与 Web 性能相关的功能。

content-visibility CSS 属性于 2024 年 9 月变为“新基准”。
AVIF 图片格式于 2024 年 1 月成为“新推出的基准”。
模块预加载已更名为“基准”。此功能将于 2023 年 9 月推出。
Server-Timing HTTP 响应标头已于 2023 年 3 月成为“新推出的基准”。

Chrome DevTools 是一套供开发者调试 Web 应用的工具,其中包括有助于您了解和提升 Web 应用性能的工具。

开发者工具中的 Network 面板会显示页面加载的所有资源,以及加载这些资源所用的时间。了解如何使用此面板来识别与资源加载相关的性能问题。
开发者工具中的“性能”面板会显示有关录制会话期间页面性能的极其详细信息,包括主线程上的活动、网络活动,以及可帮助您识别和解决性能问题的其他工具。
“内存”面板会显示网页的 JavaScript 所使用的内存量。通过学习如何使用此面板,您可以发现并解决由网页的 JavaScript 导致的内存相关问题。