开始使用Cloudflare测量Web生命值

我们Cloudflare的许多人都痴迷于如何让网站变得更快。但要提高性能，您必须先对其进行测量。去年，我们推出了Browser Insights，帮助我们的客户从终端用户的角度衡量Web性能。

今天，我们正在与Google Chrome团队合作，将Web Vitals的测量结果引入浏览器洞察力(Browser Insight)。Web Vitals是一套新的度量标准，可帮助Web开发人员和网站所有者衡量和了解加载时间、响应性和视觉稳定性。有了Cloudflare的浏览器洞察力，它们比以往任何时候都更容易测量-任何人都可以免费从整个网络收集数据。

当试图了解性能时，很容易将重点放在易于测量的指标上-例如第一个字节的时间(TTFB)。虽然TTFB和类似的指标很重要，但我们已经了解到，它们并不总是反映全部情况。

我们在Google Chrome团队的合作伙伴通过将用户体验分解为三个组件来解决这个问题：

视觉稳定性：页面在加载时移动多少？(我认为这是“jankiness”的反义词)。

创建单个指标来捕获这些高级组件是具有挑战性的。值得庆幸的是，Google Chrome团队的人已经考虑到了这一点，并在今年早些时候推出了三个“核心”Web Vitals指标：最大的内容画图、第一次输入延迟和累计布局移动(Cumulative Layout Shift)。

衡量核心网络生命力并不是故事的结束。相反，它们是了解哪些因素影响网站性能的起点。Web Vitals从高层次告诉您正在发生的事情，其他更详细的指标可以帮助您了解用户体验可能会变慢的原因。

以装载时间为例。如果你注意到你最大的心满意足的绘画分数是“需要改进”，你会想要挖掘是什么花了这么长的时间才能加载！Browser Insights仍然测量导航计时指标，如DNS查找时间和TTFB。通过依次分析这些指标，您可能希望进一步深入研究优化缓存命中率、调优源服务器的性能或调整JavaScript和CSS等资源的加载顺序。

有关提高Web性能的更多信息，请查看Google关于改进LCP、FID和CLS的指南。

首先，我们认为RUM(Real User Measure，真实用户度量)是合成度量的关键伙伴。虽然您总是可以在自己的笔记本电脑上尝试几次页面加载并查看结果，但从真实用户那里收集数据是考虑真实设备性能和网络条件的唯一方法。

外面还有其他很棒的朗姆酒工具。谷歌的Chrome用户体验报告(CRUX)收集关于整个网络的数据，并通过Page Speed Insights(PSI)等工具提供，PSI将合成的结果和朗姆酒结合成有用的诊断信息。

Cloudflare的浏览器洞察力的一个主要好处是它不断更新；新的数据点在看到来自最终用户的请求后不久就可以使用。Chrome UX报告中的数据是聚合指标的28天滚动平均值，因此您需要等待，直到您可以看到数据中反映的更改。

Browser Insights的另一个好处是，我们可以测量任何浏览器--不仅仅是Chrome。在撰写本文时，报告Web Vitals所需的API仅在Chromium浏览器中受支持，但当Safari和Firefox实现这些API时，我们将支持它们。

最后，Brower Insights是免费使用的！我们真的很努力地让我们的分析对于任何流量的网站都是快速的。我们很高兴能够支持按URL、浏览器、操作系统和国家/地区进行切片和分组，并计划很快支持更多维度。

要开始使用Browser Insight，只需转到仪表板中的速度选项卡。从今天开始，每个人都可以使用Web Vitals指标！

在幕后，Browser Insights的工作方式是在HTML页面中插入一个JavaScript信标。如果您只想测量特定的页面或主机名，则可以控制信标的加载位置。如果您使用的是CSP版本3，我们甚至会自动检测随机数(如果存在)并将其添加到脚本中。