性能是用户体验的关键方面。页面加载速度以及对用户输入的响应速度会对用户如何看待您的网站产生重大影响，并且可以决定用户是留在您的网站上还是放弃它。在此页面上，您将找到有关各种 Web 性能主题的丰富信息，这些信息将帮助您使您的网站快速运行—并保持快速运行。

跳转到此页面上的内容
性能新手？我们为您准备了全面的课程，帮助您入门。
开始使用 PageSpeed Insights 在您的网站上衡量性能，从而开始改进性能。
快速了解三个 Core Web Vitals 指标、它们的工作原理以及为什么它们对良好的用户体验至关重要。
一旦您了解了 Core Web Vitals 指标，这些指南可以帮助您了解如何最好地优化它们。
通过一系列更详细地探索这些指标的指南，更深入地了解 Core Web Vitals。
了解现在 Baseline 最新提供的用于改进性能的新功能。
了解公司如何改进其 Core Web Vitals 并因此看到其业务指标的增长。
了解如何使用 Chrome DevTools 调试您网站上的性能问题。
COURSE

Web 性能是一个复杂且多方面的学科领域，但并非不可能学习！如果您是性能新手，我们的课程将通过首先向您介绍性能基础知识，帮助您快速入门，让您可以逐步学习更高级的主题。完成课程后，您将能够立即应用您所学的知识！

学习性能！
如果不先衡量网站的性能，就无法改进它。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 并看到其业务指标的增长。
了解 QuintoAndar 如何通过将 INP 提高 80% 将同比增长转化率提高 36%。
了解更多
了解 Disney+ Hotstar 如何通过将 INP 降低 61% 将客厅设备上的每周卡片浏览量提高 100%。
了解更多
了解 PubTech 的 Consent Management Platform 如何将其客户网站上的 INP 降低高达 64%，同时还将广告可见度提高了高达 1.5%
了解更多

Baseline 向 Web 开发者发出信号，告知何时可以在所有主要浏览器引擎中安全地使用 Web 平台功能。以下是一些现在 Baseline 最新提供的与 Web 性能相关的功能。
content-visibility CSS 属性于 2024 年 9 月成为 Baseline 最新可用。
AVIF 图像格式于 2024 年 1 月成为 Baseline 最新可用。
模块预加载于 2023 年 9 月成为 Baseline 最新可用。
Server-Timing HTTP 响应标头于 2023 年 3 月成为 Baseline 最新可用。

Chrome DevTools 是一套供开发者调试 Web 应用程序的工具，包括帮助您理解和改进 Web 应用程序性能的工具。
DevTools 中的 Network 面板向您显示页面加载的所有资源以及加载它们所花费的时间。了解如何使用此面板来识别与资源加载相关的性能问题。
了解更多
DevTools 中的 Performance 面板向您显示有关页面在录制会话期间的性能的极其详细的信息，包括主线程上的活动、网络活动以及可以帮助您识别和修复性能问题的其他工具。
了解更多
Memory 面板向您显示页面的 JavaScript 正在使用的内存量。通过学习如何使用此面板，您可以发现和修复由页面的 JavaScript 引起的与内存相关的问题。
了解更多