核心Web Vitals：Google的网络性能指标指南

理解谷歌的核心网页指标 (Core Web Vitals) 及其提升方法

核心要点:

• 核心网页指标 (Core Web Vitals) 是谷歌用于衡量真实用户体验的关键性能指标，旨在简化性能评估，帮助网站所有者和开发者专注于最重要的改进。这三个指标分别是：最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)，分别评估加载速度、交互性和视觉稳定性。
• LCP 衡量加载性能，报告视口中可见的最大图像或文本块的渲染时间。FID 衡量响应速度，记录用户与页面交互到浏览器开始处理事件处理程序之间的时间。CLS 衡量视觉稳定性，评估内容意外移动的情况——通常发生在广告或当前滚动位置上方图像加载完成后 DOM 发生变化时。
• 提升核心网页指标需要优化网站的各个方面，例如优化图像、利用浏览器缓存、最大限度地减少渲染阻塞资源以及优先处理关键渲染路径。谷歌会根据您网站的性能报告提供具体的建议。重视这些指标的网站往往具有更快的加载时间、更好的交互性和更稳定的视觉体验，从而提升用户满意度，并可能提高搜索引擎排名。

谷歌希望用户拥有良好的网页体验，因此在搜索结果中排名较高的网站加载速度也更快。当然，这是一个很大的简化，但假设您比较的是内容和受众相似的两个网站，那么加载速度较快的网站应该在结果中排名更高。但是，谷歌衡量这一指标的方法一直以来都有些难以捉摸，因此它引入了核心网页指标，为网站所有者和开发者提供一些急需的清晰度。

不幸的是，“性能”是一个涵盖数十个指标的总称……首字节时间、开始渲染、CPU 使用率、JavaScript 堆大小、首次内容绘制、首次有意义绘制、首次 CPU 空闲、DOM 加载、页面完全加载、交互时间、每秒样式重新计算等等。

不同的工具返回不同的结果集，很难知道从哪里开始。

谷歌的网页指标计划旨在简化性能评估，并帮助您专注于最重要的改进。核心网页指标是反映真实世界用户体验的关键性能指标。部分指标由 Chrome DevTools 中的 Lighthouse 面板、PageSpeed Insights 和 Google Search Console 报告。

web-vitals JavaScript 库可以帮助测量来自访问您网站的真实用户的更真实的指标。结果可以发布到 Google Analytics 或其他端点以进行进一步分析。

谷歌建议使用第 75 百分位数，即记录同一指标的多个结果，按从最好到最坏的顺序排列，然后分析四分之三点的数值。因此，四分之三的网站访问者将体验到这种性能水平。

当前的核心网页指标是最大内容绘制、首次输入延迟和累积布局偏移，它们分别评估加载、交互性和视觉稳定性。

最大内容绘制 (LCP)

LCP 衡量加载性能——内容显示的速度。

诸如页面加载和 DOMContentLoaded 等历史指标在这方面一直存在问题，因为它们并不总是能反映用户体验。例如，启动画面几乎可以立即出现，但通过进一步的 Ajax 请求加载的可使用内容可能需要更长时间才能出现。

最大内容绘制 (LCP) 报告视口中可见的最大图像或文本块的渲染时间。小于 2.5 秒的时间被认为是良好的，而超过 4.0 秒的时间则被认为是不良的。

LCP 中考虑的元素类型包括：

• <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173949835734928.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Core Web Vitals: A Guide to Google's Web Performance Metrics"> <p>徽标和菜单不会移动——它们是稳定的元素。广告添加到 DOM，其起始位置不会改变，因此它也是稳定的。但是，英雄图像将移动：</p> <ol> <li>英雄图像在 360 x 720 像素的视口中为 360 x 510 像素。因此，其影响分数为 (360 x 510) / (360 x 720) = 0.71</li> <li>它在 720 像素的视口高度中垂直移动 90 像素，因此其距离分数为 90 / 720 = 0.125</li> </ol> <p>因此，CLS 为 0.71 x 0.125 = 0.089</p> <p>CLS 得分低于 0.1 被认为是良好的，而高于 0.25 则被认为是不良的。在这种情况下，CLS 刚好处于可接受范围内，因为虽然受影响的区域很大，但移动的距离相对较小。但是，更大的广告需要进一步关注。</p> <p>CLS 算法不会记录任何用户交互后 500 毫秒内的布局偏移，这可能会触发 UI 更改或视口调整大小。因此，您的页面不会因界面更新、过渡和动画而受到惩罚，这些更新、过渡和动画对于操作是必要的，例如从汉堡图标打开全屏菜单。</p> <p>Chrome DevTools 中的“渲染”面板（菜单 > 更多工具 > 渲染）提供“布局偏移区域”选项。选中该框并刷新页面——布局偏移以蓝色突出显示。您还可以修改“网络”面板中的网络速度以减慢加载速度。</p> <p>可以通过以下方法改进 FID/TBT：</p> <ol> <li>通过使用 <code>width 和 height 属性、CSS aspect-ratio 属性或旧的填充技巧（视情况而定）为图像、视频和 iframe 元素预留空间
• 在加载网络字体时避免 FOUT（未样式文本闪烁）和 FOIT（不可见文本闪烁）。预加载或使用大小相似的备用字体将有所帮助
• 不要在初始页面加载期间在现有内容上方插入 DOM 元素，例如时事通讯注册和类似的通知框
• 使用 CSS transform 和 opacity 进行成本较低的动画。

性能优先级

核心网页指标会随着时间的推移而发展，但评估 LCP、FID 和 CLS 指标可以帮助识别最关键的问题。首先解决快速简单的难题——它们通常具有最大的投资回报率：

• 启用服务器压缩和 HTTP/2 或 HTTP/3
• 通过设置 HTTP 过期标头确保使用浏览器缓存
• 尽早预加载资源
• 合并和压缩 CSS 和 JavaScript
• 删除未使用的资源
• 考虑使用 CDN 或更好的托管
• 使用适当的图像大小和格式
• 优化图像和视频文件大小（专业的 CDN 可以提供帮助）

核心网页指标常见问题解答

• 什么是核心网页指标？ 核心网页指标是由谷歌引入的一组特定以用户为中心的指标，用于衡量网页的加载性能、交互性和视觉稳定性。它们对于评估网站的整体用户体验至关重要。
• 三个核心网页指标是什么？ 三个核心网页指标是：最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。
• 为什么核心网页指标对网站所有者很重要？ 核心网页指标非常重要，因为它们直接影响用户体验。重视这些指标的网站往往具有更快的加载时间、更好的交互性和更稳定的视觉体验，从而提升用户满意度，并可能提高搜索引擎排名。
• 如何衡量我网站的核心网页指标？ 可以使用各种工具来衡量核心网页指标，包括谷歌的 PageSpeed Insights、Lighthouse 和 Chrome 用户体验报告。这些工具可以深入了解网站根据 LCP、FID 和 CLS 指标的性能。
• 如何改进我网站的核心网页指标？ 改进核心网页指标需要优化网站的各个方面，例如优化图像、利用浏览器缓存、最大限度地减少渲染阻塞资源以及优先处理关键渲染路径。谷歌会根据您网站的性能报告提供具体的建议。
• 核心网页指标会影响搜索引擎排名吗？ 是的，核心网页指标是谷歌搜索算法中的排名因素。谷歌已表示，从 2021 年 5 月开始，页面体验信号（包括核心网页指标）将被纳入搜索结果的排名。在这些指标中反映出更好用户体验的网站可能在搜索排名中具有优势。

以上是核心Web Vitals：Google的网络性能指标指南的详细内容。更多信息请关注PHP中文网其他相关文章！