在Web的早期版本中(思考Web 1.0),网页大多是用HTML和图像文件构建的。

然而,现代的网站更加动态,特别是在加载内容的时候。这意味着传统的时间指标虽然仍然很重要,但不能提供整体用户体验的全貌。正因为如此,web开发人员需要测量来跟踪用户相信一个页面被常见的称为“以用户为中心的感知性能指标”。

如果你使用New Relic的浏览器为了监控网站的开发或性能,您现在可以在您的工具包中添加以下两个感知的性能指标:第一次油漆和第一次有内容的油漆.这些指标追踪用户等待网站呈现或“网络体验”开始的时间。这两个指标现在可以在New Relic浏览器,以及New Relic One的仪表盘New Relic的见解

注意:这些指标目前可用谷歌Chrome和Opera浏览器

感知性能指标的案例

Web开发团队正在采取更实质性的行动,以优化其网站和应用程序的速度:他们正在建立绩效团队,创建绩效预算,并建立和执行绩效指标目标。包括感知性能指标。这样的指标有助于团队回答问题,如“在用户看到内容之前的时间过多?”“在用户可以在页面上的元素交互之前,有多长的时间通过?”

第一次绘制和第一次内容绘制是我们构建的第一个可感知的性能指标,以帮助开发者衡量和优化他们的网站的用户体验。

第一次油漆指用户导航到网页后第一个像素呈现在屏幕上的点。第一个意旨油漆当浏览器首先呈现来自的任何内容时发生文档对象模型,包括任何文本,图像,非白色画布或可缩放矢量图形(SVG)到页面中。下图来自谷歌开发者指南“以用户为中心的性能指标,说明了这些概念:

说明了第一次油漆和第一次有内容的油漆指标的概念。(图像与知识共享归属4.0许可).

从感知的性能指标中获得完整的价值

使用这些指标,您可以更好地量化您的最终用户体验和更准确的仪表现场性能,以防止用户参与和感知。

例如,考虑两个网站:四秒钟内的一个加载,但是对于用户仅在最后一秒内看到一个空白屏幕的空白屏幕加载。其他网站需要六秒才能加载,但在一秒钟内获取屏幕上的所有内容。如果您只使用了页面加载时间指标(如window)来跟踪页面加载时间,你不会考虑这样一个事实,即第一个站点还没有呈现任何内容,即使页面大部分已经加载。它看起来比第二个站点要快,尽管用户可能不这么认为。添加这两个指标将为您提供更精确的方法,以测量用户认为您的站点已经开始呈现内容的确切时刻,这对他们来说才是真正重要的。

这些指标与Browser已经收集的指标(如DomContentLoaded)相结合,可以有效地衡量用户何时认为您的页面开始呈现。由于上面的内容是用户体验的关键部分,您还可以根据时间到第一个字节等指标来衡量首次绘制和首次内容绘制(backendDuration)测量服务器端呈现和客户端呈现之间的延迟。

近距离观察New Relic的第一个油漆和第一个充满内容的油漆指标

如果您是当前的Browser客户,并且已经安装了Browser代理通过一个New Relic APM代理,您可以立即访问这些新指标。如果您已经安装了Browser代理在JavaScript中粘贴,你需要升级代理才能访问这些指标。

您可以访问第一个油漆和第一个满足的油漆New Relic的一通过页面加载时间分解图:

在New Relic One的New Relic浏览器应用程序中,第一个绘制和第一个内容绘制指标出现在页面计时分解图中。

在New Relic One仪表板或在New Relic Insights,你可以查询两个指标使用BrowserInteraction页面浏览人数事件。

使用第一个绘制和第一个内容绘制指标来创建有用的指示板,以跟踪站点的性能。

创建仪表板和警报

以下实施例显示新的Relic Query Language (NRQL)查询您可以使用它来构建跟踪这些新指标的仪表板小部件。它们还说明了一个警报策略,使用New Relic的警报,当这些指标的值低于定义的阈值时,将触发警报。小部件可以在New Relic One仪表板或Insights中使用。

创建一个小部件,以进行第一个油漆,第一个满足油漆和窗口的中位数加载时间.ONload事件

提示:使用中值加载时间,因为平均值可能会被异常值所扭曲。

SELECT % (timeToResponseStart, 50) AS 'first byte', % (firstPaint, 50) AS 'first contentful paint', % (firstContentfulPaint, 50) AS 'first contentful paint', % (timetodomcontentloadadedeventend, 50) AS 'DOM内容加载',% (duration,50) AS 'Window load + AJAX' FROM BrowserInteraction WHERE appId = NRsample TIMESERIES SINCE 2 days ago UNTIL now

此窗口小部件显示了跨第一个字节,第一个油漆,第一个满足绘制,DOM内容的中位数,加载的DOM内容+ Ajax。

创建一个小部件,通过比较当前和历史性能来监视基线

SELECT百分位(firstContentfulPaint, 50) as ' firstContentfulPaint ' FROM Pageview WHERE appID=123456 SINCE 1 day ago COMPARE WITH 2 days ago TIMESERIES

这个小部件中的虚线表示历史性能。

创建一个小部件来查找使用第95百分位的异常值

SELECT percent (firstPaint, 50) as 'First paint', percent (firstPaint, 95) as 'First paint', percent (duration, 50) as 'Window load + AJAX' FROM BrowserInteraction WHERE appID=123456 TIMESERIES SINCE 3 days ago UNTIL now

显示第一次油漆测量时间的第95百分位的小部件。

创建警报策略

这个例子展示了一个策略,如果用户在7秒内没有看到内容或像素,就创建一个警告。

在New Relic Alerts中设置的一个策略,如果第一个油漆的值超过用户定义的阈值将触发该策略。

最后,关于这些参数如何在New Relic中显示的一些注意事项:

  • 如果您的站点在呈现的第一时间加载内容,那么第一次绘制和第一次有内容的绘制的值将是相同的。
  • 如果你的网站在加载任何内容(图像,文本等)之前加载背景,第一次绘制和第一次有内容的绘制的值将是不同的。
  • 如果您的站点动态更新内容,那么如果第一次绘制和第一次有内容的绘制发生在页面加载事件之后,则不会捕获它们的值。

感知性能监控的重要性

在一篇名为网页可用性问题,谷歌Chrome工程经理阿迪他他写道:“加载一个页面是一个循序渐进的过程,它包含四个关键时刻:它发生了吗?是有用的吗?它可用吗?它令人愉快吗?”

这只是New Relic浏览器进入感知性能指标领域的开始。第一次油漆和第一次有内容的油漆等指标有助于回答奥斯马尼的第一个问题:“它发生了吗?”在将来,我们计划支持额外的度量,它可以为第二个和第三个问题提供精确和可靠的答案:它是可用的吗?它有用吗?

每个网站都有自己的DNA,每个网站根据客户端浏览器、设备和网络特征表现不同。作为一个规则,你应该收集帮助你理解你的站点、你的用户需求、你的内容和你提供给客户的体验的指标。第一个绘制和第一个有内容的绘制是我们努力在New Relic浏览器中构建对这些指标的支持的第一阶段。我们将继续努力帮助您从系统数据中获得更多的价值——从应用程序和基础设施性能一直到最终用户体验和业务指标。

Mat Ball是New Relic的产品营销经理,专注于前端web应用对业务和客户体验结果的影响。此前,Mat在SOASTA工作,在那里他推销他们的数据科学产品。查看贴子

有兴趣为New Relic博客写作吗?亚搏体育登入网给我们一个推介