为什么 Web Vitals 分数如此重要以及如何监控它们

谷歌最近在web.dev 上 发布了一篇文章，宣布了 Web Vitals作为量化网页用户体验 (UX) 和改进机会的指标。任何优化过网站以符合 Google 建议的人都会知道，很难就关注的内容获得一致的指导。Web Vitals 旨在通过遵循一组最佳实践来消除这种歧义。网站所有者应优化分数并随着时间的推移对其进行监控，以确保它们保持在建议的阈值之上。

什么是 Web Vitals？

数以百计的因素会影响网页的加载方式，例如页面大小、网络速度、服务器位置、压缩等。不可能为每个指标都获得好分数，选择关注哪些项目是一个挑战，因为不清楚哪些指标具有更大的权重。

Google 有多种工具可以帮助网站管理员做出这些决定，例如 PageSpeed Insights、Lighthouse、Chrome UX Report、Search Console、Chrome Dev Tools 和 WebPageTest。然而，随着时间的推移，它们发生了不同的演变，并以不同的方式报告事情。

例如，PageSpeed Insights 提供 1-100 的性能评分，而“测试我的网站”将性能报告为以秒为单位的加载时间，因此无法比较这些检查。

Web Vitals 是这个问题的解决方案——三个衡量用户体验最重要的指标

1. 最大的内容绘制 (LCP)
2. 首次输入延迟 (FID)
3. 累积布局偏移 (CLS)

它们在许多 Google 工具中复制，并提供网站用户体验和性能的统一视图。

Web Vitals 的一个关键方面是，虽然它们只是三个指标，但它们代表了与用户体验和性能相关的更广泛的类别。例如，LCP 是在屏幕上绘制最大元素所需的时间。如果您获得了良好的 LCP 分数，则可以安全地假设 LCP 事件之前的其他性能指标已得到优化。这就是 Web Vitals 的美妙之处，我们将在下面更详细地讨论每一个。

最大的内容绘制 (LCP)

最大的内容绘制是一种性能测量。它代表最大和最有意义的元素呈现在屏幕上的时刻，以及页面准备好与用户交互的时刻。移动设备和桌面设备上的得分为 2.5 秒。

优化

通过遵循通常的最佳实践，可以获得良好的 LCP分数：

• 确保服务器响应时间快且靠近用户
• 使用 CDN 从边缘服务器提供静态内容
• 缓存不经常更改的内容
• 通过缩小、内联关键 CSS 并推迟其余 CSS 来优化 CSS
• 尽可能使用 JavaScript 限制客户端渲染
• 在需要 JavaScript 的地方，通过缩小、内联关键 JS 并推迟其余部分来优化交付
• 压缩图像

首次输入延迟 (FID) 

首次输入延迟是一种响应测量。它测量用户与其交互后页面响应所需的时间。单击页面并在响应之前延迟是一种非常令人沮丧的体验。FID 量化了这个过程，并将小于 100 毫秒的阈值设为良好。

优化

对 FID 的最大影响是客户端 JavaScript 执行，因为如果浏览器忙于处理主线程上的代码，则它无法响应事件。前端的一些 JavaScript 不可避免，但有一些技术可以确保高效交付：

• 缩小和压缩 JavaScript 文件
• 使用 async 或 defer 属性延迟非关键 JavaScript
• 通过使您的代码尽可能精简来减少整体执行时间
• 使用代码拆分（仅在需要时才提供 JavaScript，而不是为整个站点提供一个 app.js 文件）

累积布局偏移 (CLS)

累积布局偏移量度视觉稳定性。这是一个衡量页面加载后移动或移动的新指标。如果您曾尝试点击某物但页面在您的手指按下按钮时移动，您就会熟悉 UX 有多糟糕，因为它迫使您找到该元素并再次尝试点击。更糟糕的是，当您尝试单击但页面切换导致您单击其他内容时。

在上图中，假设您开始阅读第一行只是为了让它跳下屏幕。这是 Cumulative Layout Shift，Google 建议 CLS 分数小于 0.1 以达到良好状态。

优化

通过遵循以下提示，CLS 很容易优化：

• 页面加载后限制动态内容注入
• 如果需要动态内容注入，请在外层 div 上设置尺寸
• 在图像上设置尺寸（宽度和高度），以便浏览器在图像加载时保留空间
• 设置广告和嵌入的尺寸
• 避免使用加载后替换默认字体的 Web 字体

为什么 Web Vitals 很重要

Vitals 是 Google 的一项举措，因此在评估网站的 UX 时，他们很有可能将 Vitals 分数作为他们决策的一个因素。如果 Google 认为您的网站表现良好，他们会对其给予好评，这可能会在搜索引擎结果页面 (SERP) 中产生积极的结果。

Vitals 很重要，因为它们代表了影响网站用户体验的更广泛的指标。为了获得良好的 Web Vitals 分数，许多其他关键性能指标需要具有良好的评分，这样如果您的 Vitals 处于绿色区域，您的网站就会整体健康。

如果您对 Google 现在对 Web Vitals 的重视程度有任何疑问，只需访问 Web Vitals 主页，您就会看到“健康网站的基本指标”这一短语。

监控分数

了解 Vitals 并优化分数只是成功的一半。您需要通过定期检查来确保分数保持良好。最简单的方法是经常将 URL 粘贴到 PageSpeed Insights 中或在搜索控制台中查看高级数据。这两种方法都让你有责任，所以如果你忘记检查，一段时间内分数可能会很低。

如果您想要自动和定期更新，PageSpeedPlus每小时跟踪一次 PageSpeed 和 Web Vitals 分数。它会随着时间的推移记录这些并在它们跌倒时发送警报。它非常容易设置并有助于在页面级别监控您的 Vitals 分数，因此您可以准确了解网站上每个页面的评分情况。

但是，首先阻止它们下降而不是在它们上线后进行修复将对您的搜索存在产生更大的整体影响。如果您在一个组织中工作，PageSpeed 和 Web Vitals 分数应该被视为跨团队的努力。要将用户体验置于所有决策的核心，您应该让所有利益相关者都能看到报告。这将有助于协调开发、设计、搜索引擎优化和营销团队，并减少对分数产生负面影响的东西上线的可能性。

结论

Web Vitals 是 Google 计算 UX 方式的一个令人耳目一新的变化。现在更容易在他们的所有工具中获得一致的建议，并知道在网站上更改哪些内容以符合他们的建议。很明显，Google 非常重视 Web Vitals，因此如果您想提高您的搜索量，您应该专注于它们。希望本指南将帮助您入门并设置监控以跟踪分数随时间的变化。