Web Vitals
自2020年5月Google首次提出Web Vitals概念已过去4年时间，web性能监控软件工具层出不穷，这篇文章给大家介绍下什么是Web Vitals?在帮助网站开发者衡量和优化用户体验方面Web Vitals有何意义？如果Web Vitals指标较差，可以从哪些方面着手优化？以及如何获取Web Vitals指标？
一
什么是Web Vitals
Google 在2020年5月的一次更新中宣布了Web Vitals 计划，旨在简化网站性能优化的过程，并提供了一个统一的指导，帮助网站开发者衡量和优化用户体验。
关于Web Vitals，Google 给出的定义是：一个良好网站的基本指标（Essential metrics for a healthy site）。过去要衡量一个网站的好坏，需要使用的指标太多了，而Web Vitals 可以简化指标的学习曲线，只需聚焦于 Web Vitals 指标的表现即可。
Web Vitals 计划包括三个核心的性能指标：Largest Contentful Paint (LCP)、First Input Delay (FID) 和 Cumulative Layout Shift (CLS)。这些指标被设计为衡量用户体验的关键方面，包括加载速度、交互性和视觉稳定性。
1、Largest Contentful Paint (LCP)
LCP 衡量页面中主要内容可能已加载的时间点。其意味着最大的内容在可视区域内变得可见的时间点。什么是最大的内容呢？例如一篇文章中的一大段文字或产品页面上的一张图片，大概就是让你理解页面内容的最有用的元素。
LCP 之所以重要，是因为它直接关联到用户的首次加载体验。一个快速的LCP 可以让用户感觉到页面加载流畅，从而提升用户的满意度和留存率。相反，如果LCP 时间过长，用户可能会感到不耐烦，甚至离开页面。
时间衡量标准
良好：LCP 应该在页面开始加载后的2.5秒内发生
需要改进：LCP 在2.5秒到4.0秒之间
较差：LCP 超过4.0秒
2、First Input Delay (FID)：
FID 衡量用户首次与页面交互（如点击链接、按钮或使用自定义的Javascript控制）时的响应时间。FID涉及到用户与 web 页面之间的交互性，用于衡量网站操作的顺畅程度。它测量了用户第一次产生交互行为，到浏览器响应该用户操作的持续时间。这些用户交互行为可以是单击按钮、点击链接或任何基于 Javascript 的自定义控件。
FID 之所以重要，是因为它直接关联到用户的交互体验。一个低的FID 意味着页面能够快速响应用户的输入，从而提升用户的满意度和留存率。相反，如果FID 时间过长，用户可能会感到页面卡顿或无响应，从而影响用户体验。
时间衡量标准：
良好：页面的FID应该小于100毫秒
需要改进：FID 在100毫秒到300毫秒之间
较差：FID 超过300毫秒
3、Cumulative Layout Shift (CLS)：
CLS 衡量页面布局随时间变化的视觉稳定性。CLS 衡量的是页面生命周期内所有意外布局变化的总和。每次布局变化都会被分配一个分数，这个分数基于变化的大小和影响区域。CLS 是所有这些分数的累积值。
CLS 之所以重要，是因为它直接关联到用户的视觉体验和交互效率。一个低的CLS 分数意味着页面布局稳定，用户可以准确地与页面进行交互。相反，如果CLS 分数高，用户可能会因为意外的布局变化而感到困惑或沮丧，甚至导致误操作。
时间衡量标准：
良好：页面的CLS应该小于0.1
需要改进：CLS 在0.1到0.25之间
较差：CLS 超过0.25
推出以来，Google Web Vitals 已经成为网站性能优化的重要标准，并且被广泛应用于各种性能监控工具和优化实践中。Google 还宣布将Web Vitals 作为其搜索排名算法的一部分，进一步强调了这些指标在提升网站可见性和用户体验方面的重要性。
二
Web Vitals有何意义
1、用户体验的量化
Web Vitals 指标提供了一种量化的方式来评估用户体验。通过这些指标，开发者可以了解用户在不同设备和网络条件下的实际体验，从而作出基于数据的决策。
2、性能优化的焦点
通过关注Core Web Vitals（LCP、FID 和 CLS），开发者可以集中精力优化那些对用户体验影响最大的方面。这些指标直接关联到用户感知的关键时刻，如页面加载速度、交互响应性和视觉稳定性。
3、SEO 和搜索排名
Google 已经宣布将Core Web Vitals 作为其搜索排名算法的一部分。这意味着优化这些指标不仅可以提升用户体验，还可以提高网站在Google 搜索结果中的排名，从而吸引更多的流量。
4、跨平台和设备的一致性
Web Vitals 指标帮助确保用户体验在不同平台和设备上保持一致。这对于移动优先的策略尤其重要，因为移动设备的用户体验往往更加多样化。
5、持续改进的循环
通过持续监控Web Vitals 指标，开发者可以建立一个持续改进的循环。这些指标提供了一个反馈机制，帮助开发者识别和解决性能问题，从而不断提升用户体验。
6、行业标准和最佳实践
Web Vitals 指标已经成为行业标准，许多性能监控工具和优化实践都围绕这些指标展开。遵循这些标准可以帮助开发者保持竞争力，并采用最佳实践来优化网站性能。
7、用户满意度和留存率
优化Web Vitals 指标可以直接提升用户满意度和留存率。快速加载的页面、流畅的交互和稳定的布局可以增强用户的信任和忠诚度，从而提高业务成果。
三
如何根据Web Vitals进行web优化
LCP（Largest Contentful Paint）优化
(1)优化资源加载
确保关键资源（如CSS、Javascript、字体和图片）被优化和压缩，减少文件大小。
使用适当的图片格式（如WebP）和图片压缩技术。
延迟加载非关键资源，如图片和视频。
（2）减少服务器响应时间
优化服务器配置和代码，减少服务器处理请求的时间。使用内容分发网络（CDN）来减少网络延迟。
（3）优化渲染阻塞资源
内联关键CSS，减少渲染阻塞时间。
使用异步或延迟加载非关键Javascript。
（4）优化DOM 结构
减少DOM 元素的数量，避免复杂的DOM 结构。
使用现代的前端框架和库，它们通常有更好的性能优化。
（5）使用高效的缓存策略
合理设置缓存头，利用浏览器缓存减少重复加载时间。
CLS（Cumulative Layout Shift）优化
（1）预设尺寸
为图片、视频和广告等可变内容预设尺寸（宽度和高度），以防止它们加载时导致布局变化。
（2）避免使用无尺寸元素
避免在页面加载后动态插入无尺寸的元素，这些元素可能会导致布局变化。
（3）使用稳定的字体
使用网络字体时，确保字体文件加载迅速，或者使用字体显示策略（如font-display: swap;）来减少布局变化。
（4）延迟加载非关键资源
延迟加载图片、视频和其他非关键资源，以减少它们加载时对布局的影响。
（5）避免在交互元素附近动态插入内容
避免在按钮、链接等交互元素附近动态插入内容，以减少用户误点击的风险。
（6）使用CSS Flexbox 和Grid
使用CSS Flexbox 和Grid 布局，它们通常比传统的布局方法更稳定。
FID（First Input Delay）优化
（1）减少Javascript执行时间
优化Javascript代码，减少主线程上的长任务（long tasks），这些任务会阻塞事件处理。
使用Web Workers 来处理非UI相关的计算，释放主线程。
（2）优化关键渲染路径
确保关键资源（如CSS和Javascript）被优化和压缩，减少文件大小。
内联关键CSS，减少渲染阻塞时间。
使用异步或延迟加载非关键Javascript。
（3）减少DOM 大小和复杂性
减少DOM 元素的数量，避免复杂的DOM 结构。
使用现代的前端框架和库，它们通常有更好的性能优化。
（4）优化资源加载顺序
确保关键资源优先加载，减少用户交互前的等待时间。
延迟加载非关键资源，如图片和视频。
（5）使用高效的缓存策略
合理设置缓存头，利用浏览器缓存减少重复加载时间。
四
如何获取Web Vitals指标
根据以上的描述,相信大家对于什么是Web Vitals指标以及其重要性和优化方式都有了一定的了解，那么如何获取页面的Web Vitals指标呢？可以通过多种方法和工具，包括浏览器内置工具、在线服务、第三方库和浏览器扩展。以下是一些常用的方法：
浏览器内置工具
Chrome 开发者工具
Performance 面板：可以记录和分析页面加载和交互的详细性能数据，包括Web Vitals 指标。
Lighthouse：这是一个自动化工具，可以运行在Chrome 开发者工具中，提供Web Vitals 等性能指标的报告。
Firefox 开发者工具
Performance 面板：类似于Chrome 的Performance 面板，可以记录和分析页面性能。
在线服务
PageSpeed Insights
Google 提供的在线工具，可以分析网页的性能，并提供Web Vitals 指标的评分和建议。
WebPageTest
一个强大的在线性能测试工具，可以模拟不同地点和设备上的页面加载，并提供详细的性能报告，包括Web Vitals 指标。
浏览器扩展
Web Vitals 扩展
Google 提供的Chrome 扩展，可以直接在浏览器中测量Web Vitals 指标，并在工具栏中显示实时数据。
但以上方法更适合开发者对Web Vitals指标进行自测和评估，往往真实用户对页面的体验和测试环境的数据不是那么一致的，那么如何获取真实用户的Web Vitals指标以进行网页性能优化呢？
乘云RUM
（Real User Monitoring）工具
乘云DATABUFF RUM将使用OTel框架，依托可观测性平台，致力于提供全面的Web Vitals监控，预期将收集真实用户在不同设备和网络条件下的性能数据，能够从页面、操作的维度真实还原用户行为的数据场景，用户体验的异常情况，并且支持端到端数据的链路追踪，从而帮助开发者更深入地理解用户需求，实现个性化体验的优化。
乘云RUM将于近期发布，敬请期待
更多产品相关信息请关注“乘云数字DATABUFF”官方微信公众号(扫码图中二维码)
乘云RUM产品，为企业提供了一扇通向用户体验之窗的大门。通过实时监控用户行为和性能，开发团队可以更深入地了解用户需求，及时发现并解决问题，从而不断提升产品的竞争力和用户满意度。Databuff 作为数字化可观测性的国内引领者，RUM这块功能是databuff 的一大核心模块，让我们共同期待DataBuff 的RUM模块的发布。
DataBuFF 创始人向成钢先生将出席2024年Zabbix中国峰会并发表主题演讲,带来数字化可观测性领域的技术分享和应用实践
向成钢 DataBuFF 创始人
※东南大学学士 / 中国人民大学硕士
※曾参与多个国家“863”研发项目，曾从事过通信系统DSP、FPGA芯片研发、基于DPDK的流量产品研发、HIDS主机安全产品研发等。18年安全运维从业经历，多年运维与安全产品开发与咨询经验
※曾任邮电科学技术研究院研发工程师、华为技术高级安全专家、产品开发代表、IPD PDT经理、产品研发总监；Capgemini凯捷（中国）VP
※中国信通院稳定性保障实验室系统稳定性专家
对可观测性技术、应用实践、DataBuFF等话题感兴趣的朋友可报名参与2024年Zabbix中国峰会
扫码报名 早鸟优惠中