监控前端性能与用户为中心的性能指标在新遗迹

今天，网页与他们曾经一样动态，您需要多个指标来了解您的网站的性能和最终用户体验。以用户为中心的性能指标对于想要积极衡量，基准和提高数字客户体验的前端开发团队至关重要。作为网站开发人员，您知道您无法单独关注可视元素。当您访问您的网站时，您的客户希望有乐趣的经验。表现至关重要。

传统的指标，如页面加载时间(历史上由窗口度量。Onload事件)对现代站点的监控效果较差。识别“感知性能”的指标可以揭示您的客户体验，并帮助您了解页面加载有多快，但速度不是您唯一关心的事情。另一方面，交互性指标可以帮助您度量页面何时“可用”。感知性能指标在哪里firstPaint和firstContentfulPaint-告诉你当用户体验某些事情发生在页面上，交互性指标让你知道终端用户何时可以相互作用页面的内容。

此外，交互性指标可以通过以下方式帮助你衡量和改善客户体验:

• 在您的站点呈现视觉内容后，您的用户与视觉内容交互的速度有多快
• 与可视内容交互后，您的用户在响应时如何快速
• 站点的代码级元素如何影响跨设备类型、浏览器或浏览器版本的用户交互

油漆指标和交互度量是PageViewTiming事件的一部分

的firstPaint和firstContentfulPaint指标为您提供有关用户在您的网站准备好使用时的信息，但这些指标并不总是发生在一致或方便的时间框架中。事实上，我们发现在许多情况下，firstPaint和firstContentfulPaint指标没有记录window事件，这意味着经典的“页面加载”时间并不能保证页面上甚至有视觉内容。

为了帮助团队更精确地测试和改善客户体验，我们发布了三个“互动指标”，用来衡量你的网页在使用前需要多长时间:

• 初中
• firstInputDelay(FID)
• longrunningtaskscount.

在New Relic，你可以查询初中和firstInputDelay——以及firstPaint和firstContentfulPaintmetrics-using的PageViewTiming.事件。

此外,firstPaint和firstContentfulPaint指标现在可以在New Relic合成帮助你了解你的网站需要多长时间来显示内容或背景。使用synthes将长时间运行的任务计数指标与firstPaint以及测试实验室中的交互性指标，以将这些结果与从生产环境中的真实用户流量中收集的相同指标进行比较。

的PageViewTiming.事件将数据发送为可用，所以现在新的遗物看到firstPaint，事件被记录。和支撑材初中报道在一起。

注意:可以为所有浏览器类型收集交互性指标，但是firstPaint和firstContentfulPaint只限于谷歌Chrome。

使用firstInteraction指标

使用初中捕捉用户第一次尝试进入你的网站的瞬间的指标，无论是通过指针下拉，点击，触摸开始，还是按键下拉。随着firstPaint和firstContentfulPaint度量标准，初中度量标准帮助您理解客户认为您的站点可以使用的时间点。

您还可以查询初中使用New Relic One图表生成器度量。例如:

例子:初中通过交互类型：确定某些交互是否比其他人更加表现

从PageViewTiming选择百分比(firstInteraction, 50)自30分钟前timeseries facet interactionType

例子:初中相比firstPaint和firstContentfulPaint：查找模式以确定您在页面上可见后，用户在内容可见后如何开始使用

从PageViewTiming选择百分位数（FirstContentfulpaint，50），百分位数（FirstPaint，50），百分位数（姓氏，50）自2天前以来以来

使用firstInputDelay (FID)度量

通常，站点开发人员认为他们的代码会在一个事件之后立即运行(例如，用户点击一个按钮);然而，web页面在交互后会遇到延迟，因为浏览器的主线程正在忙着完成其他任务，还不能响应服务器。如前所述developers.google.com，如果你的应用程序加载了一个大的JavaScript文件，浏览器可能无法运行任何事件监听器，因为JavaScript已经告诉浏览器先完成一些其他任务。在这种情况下，您的用户会遇到延迟。

考虑到这一点，firstInputDelay度量度量用户第一次与您的站点交互之间的时间(初中)，以及你的站点何时响应(换句话说，当主线程空闲时)。

为了减少FID，请考虑页面中加载缓慢的元素。在某些情况下，可以通过改变页面上元素加载的顺序来减少FID;例如，加载较大的映像或第三方组件会持续。

您可以查询firstInputDelay使用New Relic One图表生成器度量。例如:

例子:firstInputDelay根据互动类型:确定某些互动是否比其他互动表现更好

从PageViewTiming选择百分比(firstInputDelay, 50)/1000自1天前timeseries facet interactionType

例如:中位数firstInputDelay通过浏览器/版本：在浏览器中查找性能的差异

从PageViewTiming select percent (firstInputDelay, 50)/1000 since 1 day ago timeseries facet userAgentName, userAgentVersion . timeseries . timeseries . timeseries . timeseries . timeseries . timeseries . timeseries . timeseries . timeseries . timeseries . timeseries . timeseries . timeseries . timeseries

使用longrunningtaskskcounts指标

根据shubbbie Panicker，谷歌Chrome的员工软件工程师，“长任务是当今web上大部分响应性问题的原因，脚本是目前为止导致长任务的最常见原因。”长时间运行任务是指完成时间超过50毫秒的任务。由于浏览器中的主线程一个接一个地执行任务，页面对用户点击的响应可能会被阻塞，例如等待执行的JavaScript(这同样会导致用户体验到延迟)。

使用longRunningTasksCounts确定可以优化以提高页面加载性能的对象。如果这些任务发生在站点内容加载之前，那么首先要改进这些过程。

你可以找到longrunningtaskscount.在synthetic中，通过每个页面发生多少个实例的计数来跟踪。这些会被合成人捕获firstPaint和firstContentfulPaint指标。

它们也可以在New Relic One仪表板中查询。

示例查询:跟踪每个URL有多少长时间运行的任务

来自syntheticrequest选择count（longrunningtaskscount）isnavigationrotis是真正的facet网址

交互性和感知性能指标的三个关键用途

最终，你的用户会要求你关注网站的性能。从测量页面首次显示背景或内容的时间，到用户与站点交互的时间长度，再到通过理解代码如何影响浏览器的主线程来微调站点的响应性——有很多工作要做。

以下是使用交互度量的三种方法与遵循的性能指标一起使用：

1. 改善客户体验。将感知到的性能指标与更大的业务kpi相关联，并找到页面显示内容的速度与页面浏览量之间的直接链接;或者比较你的页面准备进行互动的速度与给定时间段内广告点击量的关系。对这种以客户为中心的体验进行基准测试，并使用这些测量来规划长期的网页优化项目。
2. 消除生产前的性能问题，并在生产中监控它们。在分段环境中使用合成监控器，以确保新代码不会对用户产生负面影响。
   • 编写代码，利用性能预算。
   • 在实验室环境中使用综合监控测试代码，并通过在部署前识别问题来主动消除问题。
   • 部署代码并使用警报和遥测数据来立即识别回归。
   • 在生产环境中部署真实的用户监视，以跨地域、设备和网络度量您的真实客户体验。
3. 执行竞争基准测试。如果可能的话，将资源分配给您的web开发团队，以提高页面速度优化。了解与竞争对手相比你所处的位置，至少要计划好快了20%。

有兴趣了解更多关于New Relic如何支持数字客户体验的信息吗?审查本最佳实践指南用于监控网页和移动网站。