We created this Quick Start Guide to help you start your LUX real user monitoring as quickly as possible. If you have any questions that aren't answered here, send us a note at support@speedcurve.com.


  • Step 1 • Insert the LUX snippet and adjust your sample rate
  • Step 2 • Get to know the LUX dashboards
  • Step 3 • Get to know the dropdown filters
  • Step 4 • Create custom metrics via the User Timing spec
  • Step 5 • Add your own customer data (such as cart size, conversion rate, and A/B test data)
  • Step 6 • Create custom charts in your Favorites dashboards
  • Step 7 • Add more domains


Step 1 • Insert the LUX snippet and adjust your sample rate

The lux.js script is loaded asynchronously so it won't harm the performance of your site. It's best to put the LUX snippet as early in the page as possible, i.e., at the top of the HEAD element. 

Insert the lux.js script into your pages like this:

LUX = window.LUX || {};
LUX.samplerate = SAMPLE_RATE;
<script src="https://cdn.speedcurve.com/js/lux.js?id=LUX_ID" async defer></script>

In the snippet above, replace LUX_ID with your team's LUX ID.

This can be found in your Settings under Admin > Teams. 

Change SAMPLE_RATE to a value that matches the LUX plan you want to sign up for.

For example, if your site typically gets 900 million page views per month, and you want one LUX plan that covers a maximum of 10 million page views per month, then set the sample rate to LUX.samplerate=1; (which is 1%). If you get fewer than 10 million visitors every month, then you're fine with having a sample rate of 100.

Learn more: How many RUM page views do I need to monitor?

If you're gathering custom metrics, use this snippet instead.

At SpeedCurve, we believe strongly that teams should add custom metrics to their pages with the User Timing spec. (See step 4 below for more on custom metrics.) Unfortunately, some browsers don’t support the User Timing spec (most importantly mobile Safari on iOS). 

To gather custom metrics on all browsers, you can use the LUX.mark() and LUX.measure() functions. If you’d like to do this, you must use this longer snippet:

LUX=(function(){var a=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMarks)?LUX.gaMarks:[]);var d=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMeasures)?LUX.gaMeasures:[]);var h="LUX_start";var j=window.performance;var k=("undefined"!==typeof(LUX)&&LUX.ns?LUX.ns:(Date.now?Date.now():+(new Date())));if(j&&j.timing&&j.timing.navigationStart){k=j.timing.navigationStart}function e(){if(j){if(j.now){return j.now()}else{if(j.webkitNow){return j.now()}else{if(j.msNow){return j.now()}else{if(j.mozNow){return j.now()}}}}}var m=Date.now?Date.now():+(new Date());return m-k}function b(m){if(j){if(j.mark){return j.mark(m)}else{if(j.webkitMark){return j.webkitMark(m)}}}a.push({name:m,entryType:"mark",startTime:e(),duration:0});return}function l(o,s,m){if("undefined"===typeof(s)&&g(h)){s=h}if(j){if(j.measure){if(s){if(m){return j.measure(o,s,m)}else{return j.measure(o,s)}}else{return j.measure(o)}}else{if(j.webkitMeasure){return j.webkitMeasure(o,s,m)}}}var q=0,n=e();if(s){var r=g(s);if(r){q=r.startTime}else{if(j&&j.timing&&j.timing[s]){q=j.timing[s]-j.timing.navigationStart}else{return}}}if(m){var p=g(m);if(p){n=p.startTime}else{if(j&&j.timing&&j.timing[m]){n=j.timing[m]-j.timing.navigationStart}else{return}}}d.push({name:o,entryType:"measure",startTime:q,duration:(n-q)});return}function g(m){return c(m,f())}function c(p,o){for(i=o.length-1;i>=0;i--){var n=o[i];if(p===n.name){return n}}return undefined}function f(){if(j){if(j.getEntriesByType){return j.getEntriesByType("mark")}else{if(j.webkitGetEntriesByType){return j.webkitGetEntriesByType("mark")}}}return a}return{mark:b,measure:l,gaMarks:a,gaMeasures:d}})();LUX.ns=(Date.now?Date.now():+(new Date()));LUX.ac=[];LUX.cmd=function(a){LUX.ac.push(a)};
LUX.samplerate = SAMPLE_RATE;
<script src="https://cdn.speedcurve.com/js/lux.js?id=LUX_ID" async defer></script>

This longer snippet defines LUX.mark() and LUX.measure(), so you can use these functions immediately even while the lux.js script is being loading asynchronously.

Let us know when you've inserted the snippet and the page is live.

Be sure to let us know the domain(s) you're monitoring (e.g. domain.com, www.domain.com, dev.domain.com), as well as the URL of the page where you inserted the snippet. Then we'll activate your trial. 

NOTE: If you have a progressive web app (PWA), contact us at support@speedcurve.com for details on how to get started.


Step 2 • Get to know the LUX dashboards

Your LUX dashboards offer a number of lenses into your user data. (Click through each link to explore each dashboard in our live interactive LUX demo.)

LUX Live

Constantly updates to show the users who are currently visiting your site. 

LUX Users

Shows information about your users, including page views broken out by type of user interaction. It also shows the top pages, browsers, viewports, cities, and countries across all your users.

LUX Performance

Shows core performance metrics like:

  • backend vs frontend time, 
  • User Timing custom metrics (if you have any), and 
  • time to first user interaction (often the best reflection of the user's experience). 

The first thing you see on the Performance dashboard are your engagement charts, which show you correlations between start render and load time and bounce rate:

LUX Design

Shows how performance and design affect the user experience. For example, if your start render time is slow, this dashboard will show you how many critical blocking stylesheets and scripts are being served to real users.


Step 3 • Get to know the dropdown filters

The dropdown filters at the top of each LUX dashboard let you quickly generate custom charts with your data. All you have to do is click the arrow icon on the right-hand side of the filter menu to see your options:

Clicking on any field generates a dropdown menu with all your options within that field:


Step 4 • Create custom metrics via the User Timing spec

It’s great to have standard metrics, such as onload time and start render, that work across all web pages. But these metrics don’t tell you about important things you care about, such as how quickly your ads and third parties are rendering, or how fast your site appears to users. 

This is where custom metrics come in. LUX lets you implement custom timers to track the performance of key page assets – such as hero images (for tracking user-perceived performance) or third-party scripts (for tracking ad performance). Using JavaScript, you can mark the important times during page loading and those custom metrics are displayed in your SpeedCurve dashboard.



Step 5 • Add your own customer data (such as cart size, conversion rate, and A/B test data)

LUX includes numerous default metrics collected from real user web pages, such as page load time, DNS lookup time, DOM size, etc. It also records User Timing marks and measures. But sometimes there's other information specific to your site that you would like to track.

This additional data that is specific to your website is called Customer Data. Examples include:

  • Business metrics such as cart size and conversion information
  • Performance metrics such as download time for specific resources or number of search results
  • A/B testing information such as the name of the test bucket
  • User information such as account ID or username

You can add Customer Data to LUX by using the LUX.addData API.

Read more:


Step 6 • Create custom charts in your Favorites dashboards

LUX gives you dozens of curated default charts right out of the box. Ultimately, though, you'll want to go deeper into your specific user data. To do that, you'll want to create custom charts in your Favorites dashboard. 

Favorites charts let you do things like:

  • Combine data from your LUX monitoring and your Synthetic testing in one chart
  • Choose average, median, or 95th percentile
  • Create charts that compare multiple metrics, including metrics generated by User Timing and customer data (see steps 4 and 5)
  • Select multiple values for a filter, eg, browser = Chrome or Firefox, country = UK or US
  • Compare A/B tests in a single chart
  • Share charts with your teams

Read more: How to create and share Favorites charts


Step 7 • Add more domains

If you want to add more domains to your LUX monitoring, all you need to do is contact us at support@speedcurve.com and let us know the domain(s) you'd like to add. 

Note that adding more domains will increase your total number of RUM page views. If you're getting close to your monthly cap, you can choose to either adjust your sample rate (as described in step 1) or contact us about increasing your monthly cap. 

Any questions?

We're always working to make your SpeedCurve learning curve as short and sweet as possible. If you have any questions or feedback, please let us know! Send your comments to support@speedcurve.com.

Did this answer your question?