网站性能不仅仅取决于页面加载的速度。即使您的内容在几秒钟内就显示出来，按钮响应迟缓或布局意外偏移也会让访问者感到不满，影响他们的使用体验。那么，如何判断您的网站性能是否良好呢？Core Web Vitals（核心网页指标）是 Google 用于衡量加载速度、交互性和视觉稳定性的关键性能指标。在本指南中，您将了解 Core Web Vitals 的三项指标、它们的推荐阈值，以及可用于衡量和改进网站性能的工具。
什么是 Core Web Vitals？
Core Web Vitals 是 Google 推出的一组性能指标，用于衡量网站用户体验的重要方面。这些指标主要关注三个因素：加载性能、交互性和视觉稳定性。换句话说，它们可以帮助网站所有者了解页面的加载速度有多快、用户与页面的交互是否流畅，以及页面内容在加载过程中是否保持稳定。
网站性能并不只关乎页面打开的速度。一个网站可能在很短的时间内就加载完内容，但如果用户必须等待才能点击按钮，或者页面布局意外发生变化，整体体验仍然可能很差。Core Web Vitals 有助于发现这些问题，并为改进网站性能提供可衡量的目标。
Google 目前采用三项 Core Web Vitals 指标：Largest Contentful Paint（LCP，最大内容绘制）、Interaction to Next Paint（INP，与下一次绘制的交互）和 Cumulative Layout Shift（CLS，累积布局偏移）。每项指标衡量的是用户体验的不同部分，因此改进其中一项并不一定意味着另外两项也会随之改善。
为什么 Core Web Vitals 很重要？
网站应当为访问者提供流畅、可靠的体验。当页面加载时间过长时，用户可能还没获取到所需信息就离开了。同样，如果按钮响应缓慢或页面元素意外移动，访问者可能会感到沮丧，难以完成他们想做的事情。
Core Web Vitals 帮助网站所有者借助可衡量的性能数据来发现这些问题，而不是仅凭个人感觉。例如，开发人员在一台高性能电脑上测试网站，可能会发现它加载得很快。然而，使用较旧移动设备或较慢网络连接的访问者，可能需要等待更长的加载时间。
正是这些差异使得性能监控变得重要。通过分析 Core Web Vitals 数据，开发人员可以确定网站的哪些部分需要改进，并判断其优化工作是否达到了预期效果。
Core Web Vitals 也与搜索引擎优化（SEO）相关。Google 在其排名系统中会使用页面体验信号，但良好的 Core Web Vitals 分数并不能保证更高的排名。相关的内容以及许多其他因素依然很重要。因此，改进这些指标应被视为打造实用、易用且可靠网站这一更广泛策略的一部分。
Core Web Vitals 的三项指标是什么？
每项 Core Web Vitals 指标都关注网站性能的某个特定方面。了解它们的工作原理，可以更容易地发现性能问题并选择合适的优化技术。
什么是 Largest Contentful Paint（LCP）？
Largest Contentful Paint（LCP，最大内容绘制）衡量的是初始视口中可见的最大图片或文本块显示出来所需的时间。该指标有助于估算页面主要内容何时对用户可见。
例如，假设一位访问者打开了一篇博客文章。页面背景和导航菜单可能几乎立即出现，但主标题或特色图片可能需要几秒钟才能加载完成。在这种情况下，即使页面的部分元素已经可见，访问者仍可能觉得页面还在加载中。良好的 LCP 分数应为 2.5 秒或更短。如果数值介于 2.5 秒到 4 秒之间，则页面需要改进。LCP 值超过 4 秒则被视为较差。
影响 LCP 的因素有很多，包括服务器响应时间慢、图片过大、阻塞渲染的 CSS 和 JavaScript，以及主要内容被发现的时间延迟。
为改进 LCP，网站所有者可以采取以下措施：
- 优化图片：减小图片文件大小，并在适当情况下使用 WebP 或 AVIF 等现代格式。
- 缩短服务器响应时间：根据网站情况，使用高效的托管资源、缓存以及内容分发网络（CDN）。
- 优先加载主要内容：确保浏览器能够直接从 HTML 源代码中发现重要图片，并在必要时优先加载它们。
- 减少阻塞渲染的资源：优化那些会阻止浏览器显示主要内容的 CSS 和 JavaScript 文件。
- 避免对 LCP 图片使用延迟加载：如果某张图片很可能是 LCP 元素，延迟其加载会让页面显得更慢。
这些技术可以缩短用户等待主要内容显示的时间。不过，最有效的解决方案取决于造成延迟的原因，因此在进行修改之前先对页面进行测量非常重要。
什么是 Interaction to Next Paint（INP）？
Interaction to Next Paint（INP，与下一次绘制的交互）衡量的是用户与网站交互时网站的响应速度。它评估的是从用户交互（例如点击按钮或按下按键）到浏览器显示下一次视觉更新之间的延迟。
以一家在线商店为例，访问者点击了“加入购物车”按钮。如果浏览器需要明显较长的时间才能更新购物车，访问者可能会以为按钮没有反应而再次点击。这会造成困惑，甚至可能导致重复操作。
INP 通过衡量用户整个访问过程中页面的响应能力来帮助发现这类问题。First Input Delay（FID，首次输入延迟）只衡量浏览器开始处理第一次交互之前的延迟，而 INP 则考虑页面整个生命周期内更全面的交互体验。良好的 INP 分数为 200 毫秒或更短。大于 200 毫秒且不超过 500 毫秒的数值需要改进，而超过 500 毫秒则被视为较差。
JavaScript 是导致 INP 较差的常见原因，因为浏览器可能需要先执行脚本，才能响应用户输入并显示更新。长时间运行的任务会妨碍浏览器及时处理交互。
为改进 INP，开发人员可以采用以下几种技术：
- 减少不必要的 JavaScript：删除未使用的代码，避免加载当前页面不需要的脚本。
- 拆分长任务：将大型 JavaScript 任务拆分为较小的任务，让浏览器有更多机会处理用户交互。
- 优化事件处理程序：让与交互相关的函数尽可能简单、高效。
- 避免不必要的 DOM 更新：一次更新过多元素会增加渲染时间，并延迟下一次视觉更新。
- 减少第三方脚本：分析工具、广告脚本和嵌入式服务可能会占用处理资源，影响响应速度。
改进 INP 不仅仅是减小 JavaScript 文件的总体大小。开发人员还需要了解脚本何时执行，以及交互发生后浏览器需要完成多少工作。
什么是 Cumulative Layout Shift（CLS）？
Cumulative Layout Shift（CLS，累积布局偏移）衡量的是网页的视觉稳定性。它关注的是页面显示过程中可见元素位置的意外变化。
例如，假设一位访问者正在阅读一篇文章，突然发现文字向下移动，原因是上方出现了一则广告。如果访问者此时正准备点击某个链接，这种意外移动可能导致他们点错元素。此类布局变化会让网站难以使用，尤其是在可视区域有限的移动设备上。良好的 CLS 分数为 0.1 或更低。大于 0.1 且不超过 0.25 的分数需要改进，而高于 0.25 则被视为较差。
有几种常见问题会导致意外的布局偏移。未设置尺寸的图片、动态插入的广告、延迟加载的内容，以及会改变文字外观的网页字体，都可能影响视觉稳定性。
以下技术有助于改进 CLS：
- 设置图片尺寸：指定图片的宽度和高度，或使用 CSS 宽高比，在图片加载前预留所需空间。
- 为广告预留空间：为广告容器分配足够的空间，防止广告出现时周围内容发生移动。
- 避免在现有内容上方插入内容：如果需要显示新元素，请将其放在不会意外移动用户正在浏览内容的位置。
- 优化字体加载：采用合适的字体加载策略和后备字体，以减少文字布局的意外变化。
- 使用合适的 CSS 动画：尽可能优先使用基于 transform 和 opacity 等属性的动画，而不是会引起布局变化的属性。
需要注意的是，并非所有布局偏移都是有害的。直接响应用户交互而发生的变化可能是预期之中的。CLS 关注的是意外的视觉不稳定，并采用基于布局偏移影响范围和距离的评分方法。
Core Web Vitals 的推荐阈值是多少？
Google 提供了具体的阈值，帮助网站所有者判断其页面是否提供了良好的用户体验。这些阈值将性能分为三个等级：良好、需要改进和较差。
这些阈值可以帮助开发人员分别评估每项指标。然而，仅凭一次测试并不足以判断网站是否能持续提供良好的体验。
Google 建议以页面访问量的第 75 百分位来评估 Core Web Vitals，并分别考虑移动端和桌面端的结果。这意味着，每项指标中至少有 75% 的被测访问应达到“良好”阈值。
例如，假设某网站在第 75 百分位的 LCP 值为 2 秒。这意味着 75% 的被测页面访问的 LCP 为 2 秒或更短，符合推荐阈值。
网站应努力让三项指标全部达到“良好”阈值，而不是只关注表现最好的那一项。
有哪些 Core Web Vitals 测量工具？
可以使用 Google 提供的多种工具来测量 Core Web Vitals。这些工具可以帮助开发人员了解网站的性能表现，并找出需要改进的地方。
PageSpeed Insights
PageSpeed Insights 是检查 Core Web Vitals 最实用的工具之一。它既提供真实用户数据（如有），也提供通过模拟测试收集的实验室数据，同时还会给出改进页面性能的建议。
Google Search Console
Google Search Console 包含一份 Core Web Vitals 报告，显示哪些页面组提供了良好的用户体验，哪些需要改进。它使用真实数据，帮助网站所有者发现多个页面中存在的性能问题。
Chrome DevTools 和 Lighthouse
Chrome DevTools 和 Lighthouse 可帮助开发人员在受控环境中测试页面性能。它们能够发现与 JavaScript 执行、图片加载、布局偏移以及其他影响 Core Web Vitals 的因素相关的问题。
真实数据与实验室数据有什么区别？
Core Web Vitals 可以通过两类数据进行评估：真实数据（Field Data）和实验室数据（Lab Data）。了解二者的区别，有助于开发人员解读测试结果，并选择正确的方法来改进网站性能。
真实数据
真实数据是在真实用户浏览网站时收集的。它反映了实际的浏览条件，包括不同的设备、网络连接和用户交互。
这类数据对于了解网站在真实环境中是否达到 Google 推荐的 Core Web Vitals 阈值特别有用。
实验室数据
实验室数据是使用 Lighthouse 等工具在受控测试环境中收集的。它可以帮助开发人员重现性能问题并排查其可能的原因。
与真实数据不同，实验室数据并不能代表所有真实用户的体验。因此，网站在实验室测试和真实用户测量中可能会得到不同的结果。
如何改进 Core Web Vitals
改进 Core Web Vitals 需要找出影响加载速度、交互性和视觉稳定性的问题。正确的解决方案取决于哪项指标表现不佳。
改进 Largest Contentful Paint（LCP）
要改进 LCP，开发人员应专注于尽快加载最大的可见内容元素。常见的改进措施包括优化图片、选择可靠的网站托管服务、缩短服务器响应时间、启用缓存，以及避免重要资源加载出现不必要的延迟。
改进 Interaction to Next Paint（INP）
可以通过减少长时间运行的 JavaScript 任务、尽量减少主线程上不必要的工作来改进 INP。开发人员还应优化事件处理程序，避免在用户点击、轻触或输入后让浏览器执行过多的工作。
改进 Cumulative Layout Shift（CLS）
为降低 CLS，开发人员应在图片、视频、广告及其他元素加载之前为其预留空间。避免在现有内容上方意外插入新内容，并尽可能为视觉元素使用一致的尺寸。
总结
Core Web Vitals 帮助开发人员从加载性能、交互性和视觉稳定性三个方面了解用户对网站的体验。通过测量 LCP、INP 和 CLS，网站所有者可以发现性能问题，并优先进行能让页面更易用的改进。
定期监控、真实用户数据和有针对性的优化，可以帮助网站长期保持良好的 Core Web Vitals 结果。
常见问题
1. 真实数据与实验室数据有什么区别？
真实数据来自访问网站的真实用户，而实验室数据是在受控测试环境中收集的。真实数据反映实际的用户体验，而实验室数据则帮助开发人员重现和诊断性能问题。
2. 如何提高我的 Core Web Vitals 分数？
您可以通过优化图片、减少不必要的 JavaScript、缩短服务器响应时间、启用缓存以及防止意外的布局偏移来提高 Core Web Vitals 分数。
