Using New Relic Browser Monitoring
This guide explains how to measure SpeedSize impact using New Relic Browser monitoring. The recommended approach is to compare LCP Resource Load Duration before and after enabling SpeedSize using real user monitoring (RUM) data.
Example of A/B testing with split traffic showing significant reduction in LCP Resource Load Duration when SpeedSize is enabled.
This guide covers:
- Prerequisite: Set Up New Relic Browser Monitoring
- Step 1 — Collect Baseline Data (Before Enabling SpeedSize)
- Step 2 — What to Measure
- Step 3 — Create a SpeedSize Measurement Dashboard
- Step 4 — Enable SpeedSize and Allow Cache Warmup
- Step 5 — Compare Results
- Advanced: A/B Testing
- Summary
Prerequisite: Set Up New Relic Browser Monitoring
This guide assumes that New Relic Browser monitoring is already installed on your website. If it is already deployed, proceed directly to Step 1.
Otherwise:
- In New Relic, go to Browser
- Click Add more data
- Select Browser monitoring
- Choose Place a JavaScript snippet in frontend code
- Enter your application name Click Save and continue
This will generate a Browser monitoring script. Add the script inside the <head> of your website.
Example:
<head>
<!-- New Relic Browser Script -->
<script>...</script>
</head>Shopify example:
Online Store → Themes → Edit code → theme.liquid → <head>
For detailed instructions on installing New Relic Browser monitoring, see: New Relic Browser Monitoring Installation Guide
Step 1 — Collect Baseline Data (Before Enabling SpeedSize)
Before enabling SpeedSize, collect baseline performance data using real production traffic.
We recommend measuring baseline performance for 24–48 hours, ideally several days. This ensures statistically meaningful results across different users, devices, and network conditions.
This baseline will be used to compare performance after SpeedSize is enabled.
Note:
If you plan to use A/B testing with split traffic, baseline collection is not required, since both variants are measured simultaneously.
Step 2 — What to Measure
SpeedSize optimizes media delivery and directly improves LCP Resource Load Duration, which is a subcomponent of Largest Contentful Paint.
LCP consists of four parts:
- Time to First Byte (TTFB)
- Resource Load Delay
- Resource Load Duration
- Element Render Delay
SpeedSize improves Resource Load Duration only. The other components depend on server response time, JavaScript execution, layout, and third-party scripts.
Because LCP Resource Load Duration is not shown by default in New Relic, it must be added manually using a dashboard.
This is the primary KPI for measuring SpeedSize impact.
Step 3 — Create a SpeedSize Measurement Dashboard
Create a dashboard to track the relevant metrics. We recommend using custom widgets to isolate SpeedSize-related measurements.
Go to Dashboards → Create dashboard, enter a name (for example, SpeedSize Performance Monitoring), then click Add widget and create the following widgets using NRQL queries.
1. LCP Resource Load Duration (P75) — Billboard
This widget shows the current SpeedSize performance KPI.
SELECT percentile(resourceLoadDuration, 75)
FROM PageViewTiming
WHERE metricId = 'largest-contentful-paint'2. LCP Resource Load Duration Trend — Line Chart
This widget visualizes how the metric changes over time.
SELECT percentile(resourceLoadDuration, 75)
FROM PageViewTiming
WHERE metricId = 'largest-contentful-paint'
TIMESERIESWe recommend using P75 (75th percentile), as it aligns with Core Web Vitals methodology and better reflects real user experience than averages.
Example dashboard layout:
For detailed instructions on creating dashboard widgets and using NRQL, refer to:
Step 4 — Enable SpeedSize and Allow Cache Warmup
Enable SpeedSize on your website. After enabling SpeedSize, allow time for cache warmup and data collection.
SpeedSize optimizes media on first request. As users access different pages, optimized variants are generated progressively. Because of this, performance improvements may appear gradually.
We recommend allowing 36–48 hours after enabling SpeedSize and measuring over several days before comparing results.
Note:
Traffic conditions before and after enabling SpeedSize will not be identical. Measuring over longer time periods helps smooth out traffic variability and produces more reliable comparisons.
Step 5 — Compare Results
Compare the LCP Resource Load Duration (P75) before and after enabling SpeedSize.
You should observe a significant reduction in LCP Resource Load Duration after SpeedSize is enabled.
This metric directly reflects improvements in media loading performance.
Advanced: A/B Testing (Recommended for Enterprise PoCs)
Enterprise customers may prefer comparing SpeedSize against their existing CDN using traffic splitting. This allows both variants to be measured simultaneously under identical conditions and removes the need for a baseline period.
In this setup, traffic is divided into two groups:
- Group A: Served via SpeedSize
- Group B: Served via existing CDN
Both groups are measured in New Relic at the same time, producing a direct comparison of LCP Resource Load Duration.
This approach eliminates variables such as traffic fluctuations, geography differences, device distribution changes, and time-based performance variations. As a result, A/B testing provides the most accurate measurement of SpeedSize impact.
Implementation Overview
A/B testing typically involves splitting traffic (commonly 50/50), serving media through different CDNs, tagging each page view with a custom attribute, and filtering dashboard queries by that attribute.
To segment data in New Relic, add custom attributes to the Browser monitoring agent.
// After SpeedSize determines which CDN will serve media
if (window.NREUM && window.NREUM.setCustomAttribute) {
// Tag whether SpeedSize is active for this page view
window.NREUM.setCustomAttribute('speedsizeEnabled', true); // or false
}Add this in your page's <head> section after the New Relic script and set the attribute based on your A/B test logic (which CDN is serving media).
For detailed guidance on custom attributes, see: New Relic Custom Attributes Documentation
Then modify your NRQL query to segment by variant:
SELECT percentile(resourceLoadDuration, 75)
FROM PageViewTiming
WHERE metricId = 'largest-contentful-paint'
FACET speedsizeEnabled
TIMESERIESThis produces two lines:
- speedsizeEnabled = true (SpeedSize active)
- speedsizeEnabled = false (Original CDN)
We recommend running A/B testing for at least one week to collect statistically meaningful data.
For statistically valid A/B testing, ensure that both variants receive sufficient and comparable traffic. Tests should include users from different locations, devices, and network conditions. We also recommend measuring multiple representative pages and ensuring similar traffic distribution between the A and B variants.
This setup is recommended for enterprise POCs where rigorous performance validation is required.
Summary
This guide provides a framework for measuring SpeedSize impact using New Relic Browser monitoring.
Key takeaways:
- Primary metric: LCP Resource Load Duration (P75)
- Before/after approach: Simple but requires baseline collection and stable traffic
- A/B testing approach: More rigorous, requires development but produces cleaner results
- Expected improvement: 50-75% reduction in Resource Load Duration on image-heavy pages
Improvements in LCP Resource Load Duration often lead to faster LCP, improved user experience, higher conversion rates, and better SEO performance.
For questions or assistance with implementation, contact the SpeedSize support team.