转载本文请联系黑客下午茶公众号。内容核心WebVitals最大内容绘制(LCP)FirstInputDelay(FID)CumulativeLayoutShift(CLS)OtherWebVitalsFirstPaint(FP)FirstContentPaint(FCP)TimetoFirstByte(TTFB)阈值分布直方图Web浏览器支持Vitals是Google定义的一组指标，用于测量渲染时间、响应时间和布局偏移。每个数据点都可以深入了解应用程序的整体性能。https://web.dev/vitals/浏览器内的SentrySDK收集WebVitals信息（如果支持）并将该信息添加到前端交易中。然后将这些重要信息汇总到多个图表中，以快速了解每个前端交易对您的用户的执行情况。CoreWebVitals这些WebVitals被Google认为是最重要和直接衡量用户体验的指标。谷歌报告称，截至2021年5月，这些指标也会影响您的搜索排名。谷歌报告称，截至2021年5月，这些指标也会影响您的搜索排名https://developers.google.com/search/blog/2020/11/timing-for-page-experienceLargestContentfulPaint(LCP)）衡量渲染时间显示在视口中的最大内容。这可以是来自文档对象模型(DOM)的任何内容，例如图像、SVG或文本块。它是视口中最大的像素区域，因此具有最直观的定义。LCP帮助开发人员了解用户看到页面上的主要内容需要多长时间。https://web.dev/lcp/FirstInputDelay(FID)FirstInputDelay(FID)测量用户尝试与视口交互时的响应时间。操作可能包括单击按钮、链接或其他自定义Javascript控制器。FID提供有关应用程序页面上成功或不成功交互的关键数据。https://web.dev/fid/CumulativeLayoutShift(CLS)CumulativeLayoutShift(CLS)是渲染期间每个意外元素偏移的各个布局偏移分数的总和。想象一下导航到一篇文章并试图在页面加载完成之前单击一个链接。在您的光标到达之前，链接可能会由于图像渲染而向下移动。CLS分数表示破坏性和视觉不稳定的过渡程度，而不是此网络生命周期的持续时间。每个布局偏移分数是使用影响和距离分数计算的。影响分数是元素在两个渲染帧之间影响的总可见区域。距离分数衡量它相对于视口移动了多远。LayoutShiftScore=ImpactFraction*DistanceFractionLayoutShiftScore=ImpactFraction*DistanceFractionLayoutShiftScore=ImpactFraction*DistanceFraction让我们看一下上面的例子，它有一个不稳定的元素——正文。影响大约50%的页面并将正文文本向下移动20%。布局偏移得分为0.1，等于0.5*0.2的乘积。因此，CLS为0.1。其他WebVitals这些WebVitals通常对用户来说不太明显，但对于解决CoreWebVitals的问题很有用。FirstPaint(FP)FirstPaint(FP)测量第一个像素出现在视口中所花费的时间，渲染与先前显示内容相比的任何视觉变化。这可以是来自文档对象模型(DOM)的任何内容，例如背景颜色、画布或图像。FP帮助开发人员了解呈现页面时是否发生了任何意外。FirstContentfulPaint(FCP)FirstContentfulPaint(FCP)衡量第一个内容何时在视口中呈现。这可以是来自文档对象模型(DOM)的任何内容，例如图像、SVG或文本块。FCP通常与FirstPaint(FP)重叠。FCP帮助开发人员了解用户看到页面上的任何内容更改需要多长时间。TimeToFirstByte(TTFB)TimeToFirstByte(TTFB)测量用户浏览器接收页面内容的第一个字节所花费的时间。TTFB帮助开发人员了解他们的缓慢是由初始响应还是渲染阻塞内容引起的。阈值Google的“好”、“需要改进”和“差”阈值用于将数据点分类为相应WebVitals的绿色、黄色和红色。“需要改进”在Sentry中被称为“Meh”。WebVitalGoodMehPoorMaximumContentPaint(LCP)<=2.5s<=4s>4sFirstInputDelay(FID)<=100ms<=300ms>300msCumulativeLayoutShift(CLS)<=0.1<=0.25>0.25首次绘制(FP)<=1s<=3s>3sFirstContentPaint(FCP)<=1s<=3s>3sTimeToFirstByte(TTFB)<=100ms<=200ms>600ms一些WebVitals（例如FP、FCP、LCP和TTFB)是相对于事务开始进行测量的。与使用其他工具（例如Lighthouse）生成的值相比，值可能会有所不同。lighthouse：https://github.com/GoogleChrome/lighthouseDistributionHistogramWebVitalsHistogram显示数据分布，可以通过揭示异常来帮助您识别和诊断前端性能问题。默认情况下，异常值会从直方图中排除，以提供此重要信息的更详细视图。异常值以上外围a作为上限来确定，任何超过上限的数据点都被认为是异常值。上外围栏：https://en.wikipedia.org/wiki/Outlier#Tukey's_fences每个WebVital的垂直标记是观察到的数据点的第75个百分位数。也就是说，有25%的记录值超过了这个数额。如果您在任何直方图上注意到感兴趣的区域，请单击并拖动该区域以放大以获得更详细的视图。您可能还想在直方图中查看与交易相关的更多信息。单击所选Web重要下方的“在发现中打开”，以构建自定义查询以进行进一步调查。有关详细信息，请参阅DiscoverQueryBuilder的完整文档。查询生成器：https://docs.sentry.io/product/discover-queries/query-builder/如果您想查看所有可用数据，请打开下拉菜单并单击“查看全部”。当您单击“查看全部”时，您可能会看到极端异常值。您可以单击并拖动一个区域以放大以获得更详细的视图。浏览器支持WebVitalChromeEdgeOperaFirefoxSafariIELargestContentPaint(LCP)???FirstInputDelay(FID)??????CumulativeLayoutShift(CLS)???FirstPaint(FP)???FirstContent绘制(FCP)?????首字节时间(TTFB)??????
