一直以来有很多衡量一个Web页面的体验和质量的工具和指标……每次我们关注这些指标的时候，都会很痛苦，因为这些指标真的很多，很难理解，衡量这些指标的工具也非常多。当我看到最近发布的Chrome83中增加了几个性能指标时，我的头都大了……不过不用担心，这些指标是为了集中注意力，降低理解成本。让我们详细了解一下，新添加的CoreWebVitals到底是什么？如何衡量用户体验的好坏？优化用户体验质量一直是每个网站取得长期成功的关键，衡量用户体验质量的方法有很多。虽然用户体验的某些方面需要特定于站点和特定于上下文，但所有站点仍然有一组通用的指标-CoreWebVitals，其中包括加载体验、交互性和页面内容的视觉稳定性，这些构成了基础2020年核心网络健康指标。多年来，Google提供了许多工具：（Lighthouse、ChromeDevTools、PageSpeedInsights、SearchConsole的SpeedReport）来衡量和报告性能。一些开发人员是使用这些工具的专家，而其他大多数开发人员发现大量工具和指标难以学习和使用。Web开发人员不应成为性能专家以了解他们向用户提供的体验的质量指标。WebVitals计划的目的是简化场景，降低学习成本，并帮助站点专注于最重要的指标，即CoreWebVitals。CoreWebVitalsCoreWebVitals是WebVitals的一个子集，适用于所有网页，所有网站开发人员都应注意，因为它们将出现在Google提供的所有性能测试工具中。每个CoreWebVitals代表用户体验的不同方面，在域中是可测量的，并反映以用户为中心的关键结果的真实体验。网页核心的性能指标应该随着时间的推移而发展。目前2020关注用户体验的三个方面——加载、交互性和视觉稳定性：LargestContentfulPaint(LCP)：衡量加载体验：为了提供良好的用户体验，LCP应该在页面首次开始加载后的2.5秒内发生。FirstInputDelay(FID)：测量交互性。为了提供良好的用户体验，页面的FID应小于100毫秒。CumulativeLayoutShift(CLS)：测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持小于0.1。下面详细介绍一下这三个性能指标：LCP加载体验的衡量衡量网页主要内容的加载速度是很多开发者一直关注的一个点，可衡量的指标有很多。比如最早的加载，DOMContentLoaded事件，用这两个事件来衡量页面加载速度是很不好的，因为它们不一定对应于用户在屏幕上看到的。以用户为中心的更新性能指标，例如仅捕获加载体验最开始的FirstContentfulPaint(FCP)。如果页面最初显示加载动画，则很难遵循此指标。后来，业界开始建议使用FirstMeaningfulPaint(FMP)和SpeedIndex(SI)等性能指标（均在Lighthouse中可用），以帮助捕捉更多初始渲染后的加载体验，但这些指标复杂且难以实现解释，误报率比较高。什么是LCPLargestContentfulPaint(LCP)用于报告视口内可见的最大内容元素的渲染时间的度量。为提供良好的用户体验，网站应力求在页面加载开始后的前2.5秒内呈现最大的内容。与FCP相比，这个指标是非常有价值的，因为这个值是根据页面的加载和渲染不断变化的。如果页面有加载动画，然后渲染特定内容，则计算该指标为特定内容的加载速度，而不是加载动画的加载速度。LCP考虑了哪些元素LCP目前不计算所有元素，因为这会使指标非常复杂，它现在只关注以下元素：元素
