性能指标是需要优化和改进的网站的长期目标。谷歌为此推出了一系列工具。在本文中，我想介绍web-vitals[1]，一个由Google工程师编写的小巧而漂亮的性能工具。指标测量SDK。本文是ssh从web-vitals官网整理的部分内容，感谢谷歌工程师写出如此优秀的性能资料。如何定义性能模型我们先说性能。Google提出了著名的RAIL模型：RAIL分别对应response、animation、idle和loading，每一步从上到下扩展各种优化方法。每个阶段的具体介绍可以看MeasureperformancewiththeRAILmodel[2]一文，本文主要着重讲解如何定义这几个阶段的性能。性能监控的类型那么你需要了解性能监控的类型。性能监控有两种类型：综合监控（SYN）是一种模拟网页加载或脚本运行来测量性能指标并输出网页性能报告的方法。这种方法的价值在于在不依赖用户报告的情况下及早发现可能的性能问题。Lighthouse[3]是谷歌开发的一款非常著名的综合测试工具。它可以作为浏览器插件、cli脚本运行，甚至可以在您的Node.js代码中以编程方式运行。真实用户监控（RUM）是一种记录真实用户操作的被动监控。其特点是评估和记录用户在真实网页交互中的性能数据。比如我们常说的性能监控sdk就是为此而引入的。本文所描述的web-vitals就是为这种类型的监控而生的。综合监控和真实用户监控相辅相成。前者用于在实验室环境中提前发现一些性能问题；后者深入现实世界，与用户设备、网速、环境密切相关。在此前提下，Google也将性能指标分为两类：Inthelab：使用工具在一致的环境中模拟页面加载。Realindicators(Inthefield)：在真实的用户环境中加载并与用户交互。核心性能指标WebVitals其实是谷歌发起的一项倡议，旨在统一关键性能标准，帮助网站开发者统计最重要的指标，简化很多复杂的概念。基于长期的性能指标优化经验，最新的性能指标主要集中在加载、交互、视觉稳定性等方面。以下三个指标综合起来：核心性能指标LargestContentfulPaint(LCP)[4]：最大的内容绘画，用于衡量加载性能。最好保证在2.5秒内出现。FirstInputDelay(FID)[5]：第一输入延迟，用于衡量交互性。应该在100毫秒以内。CumulativeLayoutShift(CLS)[6]：CumulativeLayoutShift，用于衡量视觉稳定性。该指标应小于0.1。国内很多文章都会提到FirstMeaningfulPaint（FMP），也就是第一次有意义的渲染，但是这个指标在Lighthouse6.0其实已经被废弃了，因为页面中的任何细微差别都会对这个指标造成太大的影响，从而带来不一致的双峰分布。而且这种测量过于依赖浏览器的实现细节，这意味着它不能跨浏览器标准化。目前它可以被LargeContentfulPaint(LCP)[7]替代。衡量核心指标这些核心指标目前可以使用WebAPI在JavaScript中进行衡量。使用web-vitals为了封装一些细节上的差异，Google提供了GoogleChrome/web-vitals[8]，一个轻量级的production-ready包，只是对webAPI进行了一层封装，用户无需关心关于指标采集的时机、环境判断等问题。import{getCLS,getFID,getLCP}from"web-vitals";functionsendToAnalytics(metric){constbody=JSON.stringify(metric);//使用`navigator.sendBeacon()`ifavailable,fallingbackto`fetch()`.(navigator.sendBeacon&&navigator.sendBeacon("/analytics",body))||fetch("/analytics",{body,method:"POST",keepalive:true});}getCLS(sendToAnalytics);getFID(sendToAnalytics);getLCP(发送到分析）；得到这些性能数据后，您可以清洗、整理和生成统计信息，以生成可视化视图。当然，你也可以使用谷歌的GoogleChromeLabs/web-vitals-report[9]生成可视化数据仪表板。手动测量当然，你也可以使用底层的webAPI进行手动测量，但这需要你自己决定上报的时机、采集次数等。LCPnewPerformanceObserver((entryList)=>{for(constentryofentryList.getEntries()){console.log("LCPcandidate:",entry.startTime,entry);}}).observe({type:"largest-contentful-paint",buffered:true});FIDnewPerformanceObserver((entryList)=>{for(constentryofentryList.getEntries()){constdelay=entry.processingStart-entry.startTime;console.log("FIDcandidate:",delay,entry);}}).observe({type:"first-input",buffered:true});CLSletcls=0;newPerformanceObserver((entryList)=>{for(constentryofentryList.getEntries()){if(!entry.hadRecentInput){cls+=entry.value;console.log("CurrentCLSvalue:",cls,entry);}}}).observe({type:"layout-shift",buffered:true});前两个直接使用PerformanceObserver[10]的性能，指定类型即可。CLS比较特殊，因为它是页面布局的累积位移，所以需要一直监控叠加这个值。手动测量的缺点是需要按照WebVitals的测量标准在相应的时间开始和结束测量，而??且很多边缘情况也需要自己处理。如何优化核心性能指标一旦您衡量了网站的核心性能指标，下一步就是优化它们。这些文章可以给你很好的指导：优化LargeContentfulPaint[11]优化FirstInputDelay[12]优化CumulativeLayoutShift[13]其他性能指标虽然核心性能指标是提供优秀用户体验的关键，但还有其他重要的指标也是如此。例如，TimetoFirstByte(TTFB)-TimetoFirstByte[14]和FirstContentfulPaint(FCP)-FirstContentfulPaint[15]对于加载体验和诊断LCP都很重要（例如，服务器是太慢，或者存在阻止渲染的资源）。同样，TotalBlockingTime(TBT)——总阻塞时间[16]和TimetoInteractive(TTI)——第一次交互时间[17]，这两个都影响FID，是用来分析潜在交互问题的实验室指标。它们不是核心性能指标，因为它们不适用于现实世界的测量并且不反映以用户为中心的感受。不断发展的性能指标WebVitals和核心性能指标代表了当今衡量网络体验质量的最佳可用信号，并将在未来继续发展和改进。核心性能指标与GoogleAnalytics和依赖它的页面相关联，更改会产生广泛的影响。因此，开发人员应该期望它是稳定的，在更新之前得到通知，并且每年更新一次，可预测。其他性能指标通常与特定工具相关联，比核心性能指标更具实验性，并且可能更新更频繁。对于所有的指标更新，这个CHANGELOG[18]都会被清楚地记录下来。参考资料MeasureperformancewiththeRAILmodel[19]Syntheticmonitoring-Wikipedia[20]Realusermonitoring-Wikipedia[21]WebVitals[22]User-centricperformancemetrics[23]参考资料[1]web-vitals:https://github.com/GoogleChrome/web-vitals/[2]使用RAIL模型测量性能：https://web.dev/rail/[3]Lighthouse：https://github.com/GoogleChrome/lighthouse[4]LargestContentfulPaint(LCP):https://web.dev/lcp/[5]FirstInputDelay(FID):https://web.dev/fid/[6]CumulativeLayoutShift(CLS):https://web.dev/cls/[7]LargestContentfulPaint(LCP):https://web.dev/lcp/[8]GoogleChrome/web-vitals:https://github.com/GoogleChrome/web-vitals[9]GoogleChromeLabs/web-vitals-report:https://github.com/GoogleChromeLabs/web-vitals-report[10]PerformanceObserver:https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceObserver/PerformanceObserver[11]优化最大的内容绘制：https://web.dev/optimize-lcp/[12]优化首次输入延迟：https://web.dev/optimize-fid/[13]OptimizeCumulativeLayoutShift:https://web.dev/optimize-cls/[14]TimetoFirstByte(TTFB)——TimetoFirstByte:https://web.dev/time-to-first-byte/[15]FirstContentfulPaint(FCP)-首次内容渲染：https://web.dev/fcp/[16]TotalBlockingTime(TBT)-总阻塞时间：https://web.dev/fcp/[16]TotalBlockingTime(TBT)-总阻塞时间：https://web.dev/fcp/.dev/tbt/[17]TimetoInteractive(TTI)——首次交互时间：https://web.dev/tti/[18]CHANGELOG：https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/README.md[19]使用RAIL模型测量性能：https://web.dev/rail/[20]综合监控-维基百科：https://en.wikipedia.org/wiki/Synthetic_monitoring[21]真实用户监控-维基百科：https://en.wikipedia.org/wiki/Real_user_monitoring[22]WebVitals：https://web.dev/vitals/#core-web-vitals[23]以用户为中心的性能指标：https://web.dev/user-centric-performance-metrics
