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