Compare page load performance in browser and synthetic monitoring

Synthetic monitoring regularly checks your websites, critical business transactions, and API endpoints to measure optimal performance. Browser monitoring tracks the actual results of webpage performance across all variations of devices, browsers, and connection speeds. Used together, they provide a direct page load time comparison between real user (browser) interactions and the synthetic monitors.

Compare performance and trends

New Relic's comparative charting feature helps operations managers and teams by providing:

• Benchmarks for page load times
• Additional insights to help you plan where to optimize your site
• Comparisons of synthetic trends vs. actual browser performance without needing to switch between our monitoring capabilities.

For example, during a page outage, you can compare synthetic monitoring trends to actual browser monitoring comparisons to see if an issue is also visible in Synthetics UI, or if it is caused by variables outside of New Relic. This helps you more efficiently know where to take action.

What you need

The comparative charting feature requires:

• Browser monitoring enabled with the browser SPA agent (version 885 or higher).
• A synthetic browser or scripted monitor with one or more tests on the same URLs monitored by the browser agent.

After you enable the comparative charting feature either from synthetic or from browser monitoring, no additional setup is required. The comparative charting feature will appear when New Relic finds matching URLs.

Enable comparison data

After you enable the comparative charting feature from either synthetic or browser monitoring, no additional setup is required. The comparative charting feature will appear whenever synthetics or browser monitoring finds matching URLs.

View comparison data

The comparative charting feature appears whenever synthetic monitoring identifies a URL match with browser monitoring and can compare it. You can compare browser and synthetic's performance either from the synthetic monitoring Summary page or from the browser monitoring Page views page (for browser apps or single page apps) without needing to switch between New Relic capabilities.

Based on the selected data sources, the summary shows:

• Overall speed percentage comparison between browser (real user) page views and any matching URLs found in synthetic monitors that the user has permissions to view
• Number of URLs found in synthetic monitors that match the browser rollup URL

To view the comparative charting summary:

1. From synthetic monitoring UI: Go to one.newrelic.com > Synthetics > (select a monitor) > Summary.

   OR

   From browser monitoring UI: Go to one.newrelic.com > Browser > (select a browser app) > Page views, then select a page monitored by synthetic monitoring.

2. Review the comparative charting feature's summary of overall speed percentage and number of matching URLs.

3. To view additional details, select the summary's right arrow icon.

Please note that in some cases the simple browser monitor ends before the browser agent has had a chance to collect the BrowserInteraction event. In this case, no comparative charting data is displayed in the UI. In order to resolve this issue, create a scripted browser monitor instead, and add a call to wait (sleep) after the page is loaded. Here is an example:

$browser.get('https://www.mywebsite.com').then(function(){
return $browser.sleep(1000);
})

Hide or return comparison data

To hide the comparative charting feature, select the ellipsis icon.

• To keep it visible but move it away from the top of the page, select Move to bottom.
• To return it to its original place on the page, select Move to top.
• To remove it from the page, select Hide all Synthetics/Browser comparisons.
• To return it to the page after removing it, follow standard procedures to enable comparison charting.

Data sources

New Relic uses these data sources for the synthetics and browser comparison in the UI. For deeper analysis of the comparative chart data you see in the UI, use the query builder to run NRQL queries.

SELECT monitorAccountId FROM BrowserInteraction

SELECT monitorId FROM BrowserInteraction

SELECT monitorJobId FROM BrowserInteraction LIMIT 1