我们正在升级FutureStack的注册,仅到4月30日。条款和条件适用。 现在注册

提高您的关键内容与最大的满足油漆的快速显示

6分钟阅读

对于寻求基准和改进他们的页面性能影响客户体验的团队,有一个新的指标专注于:最大的意旨油漆(LCP)。

由Google开发并在Chrome 77中引入,LCP测量向用户显示网页的主要内容的速度。

新的遗物已经将此指标作为一部分报告真实的用户监控(朗姆酒),我们会走过原因和如何在下面使用它。

传统的网页速度测量方法

因为今天的网页是如此的动态,当谈到衡量页面加载速度时,没有一个单一的指标可以完全捕捉和传达终端用户的体验。网页分段加载—首先加载主HTML文档,然后加载诸如图像、CSS、脚本和AJAX调用等资源。浏览器呈现可用的网页部分,这意味着内容是分阶段呈现给用户的。

在测量网页的速度方面,我们需要询问衡量的究竟是什么:

  • 它是完整的网页,其所有资源吗?
  • 是应该尽快呈现的特定内容吗?
  • 或者也许只是足够的内容来保持用户订婚?

在New Relic,我们仔细地添加了必要的指标来衡量最终用户的性能,包括绘制时间指标,交互性指标,以及实验室数据的长期运行任务(合成词)。这就是为什么我们现在很兴奋地向你们介绍LCP。

现代的现代度量

让我们快速审查今天的主要性能指标:

窗口加载事件 网页已完全加载和呈现
第一个油漆(FP) 导航变更后的第一次视觉更改(通常是空白屏幕)
第一个满足油漆(FCP) 第一个被绘制到屏幕上的内容
第一个有意义的涂料(FMP) 发生主要布局更改(大多数元素呈现)
速度指数 内容呈现到屏幕的速度分数(从开始到结束)
英雄元素 显示特定元素时的措施

FP和FCP表示浏览器开始将某些东西(任何东西)呈现到屏幕的时间。它们很重要,但不能告诉我们什么时候重要的内容会显示给用户。

FMP、速度指数和英雄元素是过去用来衡量重要内容显示的典型方法。在RUM中,FMP和速度指数是不可用的,英雄元素需要定制的工具,并且只专注于特定的元素。

什么是最大的内容?

相比之下,LCP度量的是何时呈现用户可见的最大元素。LCP中包含的元素包括图像、文本块和视频。不包括视口之外的元素和背景图像。有关更详细的解释,请参见这篇文章来自谷歌

LCP的优点是它易于理解,在大多数网站上都能一致地工作,并且可以在RUM中使用。

下面是一个例子的时间表来自谷歌,它显示了在测量FCP和LCP时向用户显示的内容:

页面中间的图像(在最后一个屏幕截图中)被认为是LCP,因为它是网页的可见部分中最大的元素。

新遗迹如何收集最大的有内涵的绘画测量

最新版本的新的遗物浏览器代理脚本(v1167)可以即时捕获LCP,并考虑浏览器如何报告该指标的一些复杂问题。

首先,浏览器在观察多个值时报告它们。因此,在页面加载时等待足够长的时间来捕获实际上最大的元素是很重要的。New Relic Browser脚本通过捕获导航开始后一分钟内最新报告的LCP值,自动为您完成这一任务。

另一件需要考虑的是,谷歌Chrome将在用户开始与页面交互后停止报告LCP值。这是由于用户交互可能会影响到页面呈现的内容。新的遗物脚本也将其考虑在内。

查询最大内容值

收集的LCP值存储为一种新的类型PageViewTiming事件将name属性设置为“最大内容-paint”。这扩展了我们现有的计时指标集,如第一次绘制、第一次内容绘制、第一次交互和窗口卸载。

下面是一个查询LCP与FCP在过去24小时的对比图的示例:

从PageViewTiming SELECT百分比(最大contentfulpaint, 90),百分比(firstContentfulPaint, 90) TIMESERIES自从1天前

这里是一个查询,用于从最后一小时显示LCP值的直方图,显示收集的事件的数量在10个桶(每100ms)中为0到1s之间的值:

从1小时前开始,PageViewTiming选择直方图(最大线条,1000,10)

除了定时值外,还可以收集被认为是最大的元素的ID及其大小。例如,这可以使用该元素为内容是动态的情况有助于LCP值,并且尺寸变化。此查询显示由元素ID分组的LCP及其大小:

从PageViewTiming SELECT百分位(最大的contentfulpaint, 90) WHERE elementId != " FACET elementId, elementSize

最后,PageViewTiming事件包括常见属性,例如页面URL,Geo属性(国家,区域,城市)和浏览器(用户代理)信息。这些属性可用于过滤和组查询。此示例查询显示如何为特定页面显示第90个百分位数LCP值,按国家/地区分组:

从PageViewTiming SELECT百分位(最大的contentfulpaint, 90) WHERE pageUrl LIKE 'https://rpm.newrelic.com/accounts/%/browser' FACET国家代码

值得注意的是,类似于FP和FCP,并非所有浏览器都支持LCP。目前,它仅适用于Chrome 77和更高。在新的遗物中,我们看到来自支持LCP的Chrome版本的所有用户请求的50%。

这类似于其他两个现有的绘画时序度量(FP和FCP)。Chrome是唯一捕获这三项度量的浏览器。

虽然LCP目前还没有跨浏览器标准化,Google Chrome代表浏览器流量的最大百分比并在许多方面设置Web性能监控标准。该度量可能成为标准。

大型富有油漆向前的影响

在查看页面加载性能时,没有一个指标可以说明全部情况。最新可用的指标LCP可能是在RUM中衡量网页感知性能的最具代表性的指标。它是可靠的、一致的、易于理解的,并且在真实的用户监控中可用。

New Relic现在收集这个指标,使它很容易绘制,过滤,组,并与其他现有的计时指标比较。我们鼓励我们的客户使用这个新的度量作为浏览器中的一个扩展工具箱