New Relic Browser: Tracking User Experience with First Paint and First Contentful Paint Metrics

In early versions of the web (think Web 1.0), webpages were built mostly with HTML and image files.

Modern websites, however, are much more dynamic, particularly when loading content. That means traditional timing metrics, while still critical, don't provide a full picture of the overall user experience. Because of this, web developers need measurements for tracking when a user believes a page is ready—commonly known as “user-centric perceived performance metrics.”

If you use New Relic Browser to monitor website development or performance, you can now add two of these perceived performance metrics to your toolkit: first paint and first contentful paint. These metrics track the amount of time your users wait for your site to start to render or for a “web experience” to begin. Both metrics are now available in New Relic Browser, as well as in dashboards in New Relic One and New Relic Insights.

Note: These metrics are currently available in Google Chrome and Opera browsers.

The case for perceived performance metrics

Web development teams are taking more substantial actions for optimizing the speed of their sites and applications: They’re establishing performance teams, creating performance budgets, and establishing and enforcing goals on performance metrics. That includes perceived performance metrics. Such metrics help teams answer questions like, “How much time passes before users see content?” and "How much time passes before users can interact with elements on the page?"

First paint and first contentful paint are the first perceived performance metrics we’re building to help developers measure and optimize the user experience of their websites.

First paint refers to the point at which the first pixel renders on a screen after a user navigates to a web page. First contentful paint occurs when a browser first renders any content from the document object model (DOM), including any text, images, non-white canvas, or scalable vector graphics (SVG) onto the page. The image below, from a Google developer guide titled “User-centric Performance Metrics,” illustrates these concepts:

Deriving the full value from perceived performance metrics

Using these metrics, you can better quantify your end-user experience and more accurately gauge site performance against user engagement and perception.

For example, consider two websites: One loads in four seconds, but for the first three seconds the user sees only a blank screen—everything loads in the last second. The other site takes six seconds to load, but gets all content on the screen in one second. If you used only page-load-time metrics (like window.onload) to track the page-load time, you wouldn’t account for the fact that the first site hadn’t yet rendered any content even though the page was mostly loaded. It would appear to you to be faster than the second site, even though users might not see it that way. Adding these two metrics give you a much more precise way to measure the exact moments when your users perceive that your site has started to render content, which is what really matters to them.

These metrics, in conjunction with the metrics that Browser already collects, such as DomContentLoaded, are an effective gauge of when users perceive that your pages are beginning to render. As above-the-fold content is a critical part of user experience, you can also measure first paint and first contentful paint against metrics such as  time-to-first-byte (backendDuration) to measure the latency between server-side rendering and the client-side rendering.

A closer look at the first paint and first contentful paint metrics in New Relic

If you’re a current Browser customer, and you’ve installed the Browser agent via a New Relic APM agent, you’ll have instant access to these new metrics. If you’ve installed the Browser agent by pasting in the JavaScript, you’ll need to upgrade the agent before you can access these metrics.

You can access first paint and first contentful paint in New Relic One via the Page load time breakdown graph:

In New Relic One dashboards or in New Relic Insights, you can query both metrics using the BrowserInteraction and PageView events.

Create dashboards and alerts

The following examples show  New Relic Query Language (NRQL) queries that you can use to build dashboard widgets that track these new metrics. They also illustrate an alert policy, created using New Relic Alerts, that triggers alerts when values for these metrics fall under a defined threshold. The widgets can be used in New Relic One dashboards or in Insights.

Create a widget to chart median load times for first paint, first contentful paint, and window.onload events

Tip: Use the median load time, as averages can be skewed by outliers.

SELECT percentile(timeToResponseStart, 50) AS 'first byte', percentile(firstPaint, 50) as 'First paint', percentile(firstContentfulPaint, 50) as 'First contentful paint' ,  percentile(timeToDomContentLoadedEventEnd, 50) AS 'DOM content loaded', percentile(duration, 50) AS 'Window load + AJAX' FROM BrowserInteraction WHERE appId = NRsample TIMESERIES SINCE 2 days ago UNTIL now

Create a widget to monitor baselines by comparing current versus historical performance

SELECT percentile(firstContentfulPaint, 50) as 'First contentful paint' FROM Pageview WHERE appID=123456 SINCE 1 day ago COMPARE WITH 2 days ago TIMESERIES

Create a widget to find outliers using the 95th percentile

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

Create an alert policy

This example shows a policy to create an alert if a user doesn’t see content or pixels within 7 seconds.

Finally, a few notes about how these metrics display in New Relic:

• If your site loads content in the first moment of rendering, the values for first paint and first contentful paint will be the same.
• If your site loads a background before any content (image, text, etc.), the values for first paint and first contentful paint will be different.
• If your site dynamically updates content, values for first paint and first contentful paint will not be captured if they occur after the page load event.

The importance of perceived performance monitoring

In a blog post called Web Page Usability Matters, Google Chrome Engineering Manager Addy Osmani wrote, “Loading a page is a progressive journey with four key moments to it: Is it happening? Is it useful? Is it usable? And is it delightful?”

This is just the start of New Relic Browser’s journey into the realm of perceived performance metrics. Metrics such as first paint and first contentful paint help answer the first of Osmani's questions: “Is it happening?” In the future, we plan to support additional metrics that can deliver precise and reliable answers to the second and third questions: Is it usable? And is it useful?

Every website has its own DNA, and every site performs differently depending on a client-side browser, device, and network characteristics. As a rule, you should collect metrics that help you understand your site, your users’ demands, your content, and the experience you’re providing to your customers. First paint and first contentful paint are the first phase of our efforts to build support for such metrics into New Relic Browser. We will continue to work to help you derive even more value from your system data—from application and infrastructure performance all the way through to end-user experience and business metrics.