We created this 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.

Contents: 

  • Step 1 • Start your SpeedCurve trial (if you're not already signed up)
  • Step 2 • Insert the LUX snippet and adjust your sample rate
  • Step 3 • Get to know the LUX dashboards
  • Step 4 • Get to know the dropdown filters
  • Step 5 • Add page labels
  • Step 6 • Create custom metrics via the User Timing spec
  • Step 7 • Add your own customer data (such as cart size, conversion rate, and A/B test data)
  • Step 8 • Create custom charts in your Favorites dashboards
  • Step 9 • Setup performance budgets
  • Step 10 • Add more domains

__________________________________

Step 1 • Start your SpeedCurve trial (if you're not already signed up)

If you're already a SpeedCurve user – or if you've already started your free trial – then skip to step 2. 

If you're not already a SpeedCurve user, sign up for your free trial. It only takes a minute, and there's no credit card required. Once your trial is activated, you'll be able to get the LUX ID we refer to in step 2. The signup process only takes a minute, and we don't ask for your credit card or personal information.

__________________________________

Step 2 • 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:

<script>
LUX = window.LUX || {};
LUX.samplerate = SAMPLE_RATE;
</script>
<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:

<script>
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>
<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 3 • 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

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

As its name suggests, the Users dashboard gives you 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. This information is really useful for designing more accurate synthetic tests.

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). 

LUX Design

The Design dashboard shows how performance and design affect the user experience. For example, at the top of this dashboard, you can see the impact of blocking assets on key metrics like start render:

__________________________________

Step 4 • 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 5 • Add page labels

By default pages are grouped by their page title but you'll want to use page labels to group your pages by type or template, making it much easier to compare the performance of different parts of your site.

Page labels also let you compare your LUX & Synthetic metrics so you can see how they match and then tune your Synthetic tests to better simulate your real user performance.

More:

__________________________________

Step 6 • 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.

More:

__________________________________

Step 7 • 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 8 • 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 9 • Setup performance budgets

To make sure your website stays fast, setup some performance budgets so you can see if there are any regressions. Performance budgets are a vital tool in your web performance toolbox. They take the hassle out of monitoring performance by notifying you (by email, Slack, or HipChat) whenever your LUX metrics cross a certain threshold.

The great news: creating performance budgets is quick and easy. Here's how to get started.

Learn more:

Step 10 • 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.

__________________________________ 

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?