PageViewTiming: Async or dynamic page details

New Relic Browser's PageViewTiming event sends each data point as a separate event as soon as it is available. Because we do not restrict the timing, you can receive first paint or first interaction data regardless of when it fires. This document describes why and how to use PageViewTiming and its attributes to query data about your site, component loading, and user performance metrics, both from visual and responsiveness standpoints.

Why use PageViewTiming?

If your application uses asynchronous or dynamic pages, you may need additional details about site or component loading. But pages can load content in many different ways, and users control when they interact with that content. This is why some user-centric performance metrics happen outside the standard window onload (page load time) in the Browser agent.

For example, users may become impatient and begin clicking as soon as content is on the webpage. Or, they may wait to use the page until long after content is loaded.

The PageViewTiming event provides a more real-time delivery mechanism that does not have a dependency on any other event. The additional metrics can help you understand how users experience your site, both from visual and responsiveness standpoints.

Detailed interactivity metrics

The BrowserInteraction and PageView events end their reporting when they receive the page window load (or window load and AJAX) timing. However, paint and interactivity metrics can happen at any time. PageViewTiming delivers these metrics as a separate event to:

  • Account for the variability in this timing.
  • Avoid setting an arbitrary timeout.
  • Prevent holding BrowserInteraction and PageView events indefinitely.
Additional data Comments
firstPaint and firstContentfulPaint

The firstPaint and firstContentfulPaint attributes already are available with BrowserInteraction and PageView events. However, they are not always reliably captured before the window onload event fires.

Using PageViewTiming gives you a way to capture these metrics even if they happen after the original page load time. This gives you a better understanding of the correlation between responsiveness of that load event and the visual rendering of your content.

largestContentfulPaint

This new metric, available with agent version 1163, largestContentfulPaint, reports the render time of the largest content element visible in the viewport. Google's research found looking at when the largest element was rendered was a more accurate way to measure when the main content of a page is loaded and useful. Details on this metric, including limitations and considerations can be found in the w3c draft.

firstInteraction and firstInputDelay

With the addition of firstInteraction and firstInputDelay, you can quickly determine the ways that your users are interacting with that visual content. These metrics tell you not only when they interacted, but what type of interaction (mousedown, pointerdown, etc.) and how long it took for them to receive a response from your site.

The firstInputDelay metric lies in the middle of FirstContentfulPaint and Time to Interactive (TTI) metrics, measuring the time between when a first input can be made and when the browser's main thread is able to respond to any interactions. For a more detailed explanation, see the Browser release notes.

timingName

You can review different types of activities with the timingName attribute, such as firstPaint, firstContentfulPaint, and firstInteraction. For example, a PageViewTiming event may have a timingName of firstPaint and a firstPaint value of .03. The event will also include all default attributes included with the standard BrowserInteraction and PageView events.

elementId This is the Id, if specified, of the largestContentfulPaint element. This value will only be reported with the LCP metric. This value can be null.
elementSize This is the reported size of the largestContentfulPaint element. This value will only be reported with the LCP metric.
windowUnload The windowUnload event is fired when a document or child resource is being unloaded. Supporting documentation and browser compatibility for the Window Unload event MDN docs.

Compatibility and requirements

In addition to New Relic Browser's installation requirements, the PageViewTiming event requires Browser agent version 1153 or higher and a Browser Pro subscription. Follow our Browser agent release notes to find out when new metrics are released.

These metrics are supported by the following browser versions. For unsupported browsers, no PageViewTiming events will be recorded.

Metrics Supported browser versions

firstPaint

firstContentfulPaint

  • Chrome 60 or higher for desktop and mobile (Android webview and Chrome for Android)
  • Opera 47 or higher for desktop
  • Opera 44 or higher for Android mobile
  • Samsung Internet for mobile
largestContentfulPaint
  • Chrome 77 or higher for desktop and mobile

firstInteraction

firstInputDelay

These metrics require the addEventListener Browser API. This API is available in all modern browsers, including:

  • Apple Safari
  • Google Chrome
  • Microsoft Internet Explorer (IE) versions 9 or higher
  • Mozilla Firefox
windowUnload This metric is currently supported by all browsers on desktop and mobile. Compatibility matrix via MDN documentation.

Query your event data

Here are some sample queries for the event data to help you get started.

Percentile over timeseries

Show the 95th percentile of first paint and first contentful paint over a time series:

SELECT FILTER(percentile(firstPaint, 95), where(timingName = 'firstPaint')) as 'fp', FILTER(percentile(firstContentfulPaint, 95), where(timingName = 'firstContentfulPaint')) as 'fcp' FROM PageViewTiming TIMESERIES 1 minute SINCE 1 hour ago
Percentile by transaction and interaction

Show the 95th percentile of first input delay over a time series, faceted by transaction name and interaction type:

SELECT percentile(firstInputDelay, 95) as 'fid' FROM PageViewTiming WHERE timingName = 'firstInteraction' TIMESERIES 1 minute FACET browserTransactionName, interactionType SINCE 3 hours ago
Histogram of delay timings

Show a histogram of first input delay timings faceted by first interaction time ranges:

FROM PageViewTiming SELECT histogram(firstInputDelay, 1000, 10) SINCE 3 hours ago WHERE timingName = 'firstInteraction' FACET CASES (WHERE firstInteraction < 1, WHERE firstInteraction >= 1 AND firstInteraction < 5, WHERE firstInteraction >= 5)

For more help

Recommendations for learning more: