Missed our big news at FutureStack? Read all about it in our roundup blog. Read it now

Improve How Fast Your Critical Content Displays with Largest Contentful Paint

6 min read

For teams looking to benchmark and improve how their page performance impacts customer experience, there is a new metric to focus on: Largest Contentful Paint (LCP). 

Developed by Google and introduced in Chrome 77, LCP measures how fast the main content of a webpage is displayed to the user. 

New Relic is already reporting this metric as part of real user monitoring (RUM), and we’ll walk through why and how to use it below.

Traditional measurements of webpage speed 

Because today’s webpages are so dynamic, when it comes to measuring how fast a page loads, there is no single metric that can totally capture and convey end-user experience. Webpages load in pieces—first the main HTML document, followed by resources such as images, CSS, scripts, and AJAX calls. Browsers render parts of a webpage as they become available, which means that content is presented to the user in stages.

When it comes to measuring the speed of a web page, we need to ask what exactly is important to measure: 

  • Is it the complete webpage with all its resources? 
  • Is it specific content that should be presented as quickly as possible? 
  • Or perhaps is it simply enough content to keep the user engaged?

Here at New Relic, we’ve carefully added essential metrics needed to measure end-user performance, including paint timing metrics, interactivity metrics, and long-running tasks for your lab data (Synthetics). And that’s why we’re now excited to introduce you to LCP.

Existing modern metrics

Let’s quickly review today’s main performance metrics:

Window Load Event Webpage has been completely loaded and rendered
First Paint (FP) First visual change after navigation change (typically blank screen)
First Contentful Paint (FCP) First content painted to the screen
First Meaningful Paint (FMP) When the main layout change occurred (most elements rendered)
Speed Index A score of how quickly content is rendered to the screen (start to finish)
Hero Elements Measures when a specific element is displayed

FP and FCP represent the time when the browser started rendering something (anything) to the screen. They are important to measure but don't tell us when the important content is displayed to the user.

FMP, speed index, and hero elements are the standout past attempts to measure when important content is displayed. FMP and speed index are not available in RUM, and the hero element requires custom instrumentation and is focused on a specific element only.

What is Largest Contentful Paint?

In contrast, LCP measures when the largest element visible to the user was rendered. The elements that are included in LCP include images, blocks of text, and videos. Elements outside of the viewport and background images are not included. For a more detailed explanation, see this post from Google.

The nice thing about LCP is that it is easy to understand, works consistently for most websites, and it can be used in RUM.

Below is an example timeline from Google, which shows what is displayed to the user when FCP and LCP are measured:

The image in the middle of the page (in the last screenshot) is considered LCP, in this case, since it is the biggest element in the visible part of the webpage.

How New Relic collects Largest Contentful Paint measurement

The latest version of the New Relic Browser agent script (v1167) captures LCP out of the box and takes into account a few intricacies of how this metric is reported by a browser.

For one, a browser reports multiple values as it observes them. As a result, it is important to wait long enough to capture the element that is actually the largest while the page is loading. The New Relic Browser script does this for you automatically by capturing the latest reported LCP value up to one minute since the start of navigation.

Another thing to consider is that Google Chrome will stop reporting the LCP values after the user started interacting with the page. This is due to the fact that user interaction may affect what is rendered to the page. The New Relic script takes all this into account as well.

Querying Largest Contentful values

The collected LCP values are stored as a new type of the PageViewTiming event with the name attribute set to “largest-contentful-paint.” This extends our existing set of timing metrics, such as first paint, first contentful paint, first interaction, and window unload.

Here is an example of a query to chart LCP in comparison with FCP over the last 24 hours:

FROM PageViewTiming SELECT percentile(largestContentfulPaint, 90), percentile(firstContentfulPaint, 90) TIMESERIES SINCE 1 DAY AGO

And here is a query to display a histogram of LCP values from the last hour, showing the number of collected events with values between 0 to 1s in 10 buckets (each 100ms):

FROM PageViewTiming SELECT histogram(largestContentfulPaint, 1000, 10) SINCE 1 hours ago

In addition to the timing value, we also collect the id of the element that was considered the largest and its size. This can be used, for example, to show which elements are contributing to LCP values for cases where the content is dynamic and varies in size. This query shows LCP grouped by element ID and its size:

FROM PageViewTiming SELECT percentile(largestContentfulPaint, 90) WHERE elementId != '' FACET elementId, elementSize

Lastly, the PageViewTiming events include common attributes such as the page URL, geo attributes (country, region, city), and browser (user agent) information. These attributes can be used to filter and group queries. This example query shows how to display 90th percentile LCP values for a specific page, grouped by country:

FROM PageViewTiming SELECT percentile(largestContentfulPaint, 90) WHERE pageUrl LIKE 'https://rpm.newrelic.com/accounts/%/browser' FACET countryCode

It’s worth noting that similar to FP and FCP, not all browsers support LCP. Currently, it is only available in Chrome 77 and higher. At New Relic, we see about 50% of all user requests coming from the Chrome versions that support LCP.

This is similar to the other two existing paint timing metrics (FP and FCP). Chrome is the only browser that currently captures these three metrics.

While LCP is not currently standardized across browsers, Google Chrome represents the largest percentage of browser traffic and is in many ways setting the standards for web performance monitoring. It is likely that this metric becomes a standard.

The impact of Large Contentful Paint going forward 

When looking at page load performance, no one metric tells the whole story. The newly available metric LCP is probably the most representative metric for measuring the perceived performance of a webpage in RUM. It is reliable, consistent, easy to understand, and available in real user monitoring.

New Relic is now collecting this metric and makes it very easy to chart, filter, group, and compare to other existing timing metrics. We encourage our customers to use this new metric as part of an expanding toolbox in Browser