推荐使用：`web-vitals` 库

推荐使用：web-vitals 库

项目地址:https://gitcode.com/GoogleChrome/web-vitals

在现代网页开发中，性能指标是提升用户体验的关键。web-vitals 是一个轻量级的JavaScript库，它专注于测量核心Web Vitals和其他关键性能指标，确保你的网站在真实用户的设备上表现卓越。这个库由Google Chrome团队维护，旨在提供与Chrome浏览器和Google工具（如Chrome UX Report、PageSpeed Insights、Search Console的Speed报告）一致的度量标准。

项目介绍

web-vitals 库约有1.5KB（压缩后），并以模块化的方式提供了所有Web Vitals的测量功能，包括 Cumulative Layout Shift (CLS)、First Input Delay (FID) 和 Largest Contentful Paint (LCP)，以及其他有用的诊断性性能指标。通过这个库，你可以精确地跟踪这些指标，即使是在库加载之前发生的性能事件也能准确捕获。

项目技术分析

web-vitals 使用了 buffered 标志的PerformanceObserver，允许它访问在库加载前发生的表现条目。这意味着你无需提前加载该库就可以获取到准确的数据。为了最大化性能，推荐在其他影响用户体验的代码加载后引入 web-vitals。

此外，库还提供了两个版本："标准版"和带有额外诊断信息的“归因版”。"归因版"虽然稍大一些，但能帮助你定位性能问题的原因。

项目及技术应用场景

• 优化用户体验：了解用户实际遇到的性能问题，并对这些问题进行优先排序。
• 开发者诊断：利用附加的诊断数据，识别导致性能下降的根本原因。
• 数据分析：将收集到的指标发送到分析服务，以便监控和改进站点性能。
• 搜索引擎优化：Google强调了Core Web Vitals在搜索排名中的作用，web-vitals可以帮助你满足这些要求。

项目特点

• 轻量级：极小的体积保证了快速加载，不会增加页面负担。
• 实时度量：无论何时性能指标发生变化，都会立即通知回调函数。
• 兼容性广泛：支持多种浏览器，包括旧版本。
• 灵活的集成：可以通过npm安装或从CDN直接加载，适合不同类型的项目。
• 模块化设计：可以根据需求选择不同的构建版本。

总之，web-vitals 提供了一种强大而方便的方式来衡量网页性能，为你的网站带来更好的用户体验和搜索引擎可见性。无论是前端开发者还是性能工程师，都将从中受益。立即尝试，提升你的网站性能吧！

项目地址:https://gitcode.com/GoogleChrome/web-vitals