- Step 1 • Start your SpeedCurve trial (if you're not already signed up)
- Step 2 • Activate your LUX trial
- Step 3 • Insert the LUX snippet and adjust your sample rate
- Step 4 • Tour the LUX dashboards
- Step 5 • Get to know the dropdown filters
- Step 6 • Add page labels
- Step 7 • Create custom metrics via the User Timing spec
- Step 8 • Add your own customer data (such as cart size, conversion rate, and A/B test data)
- Step 9 • Create custom charts in your Favorites dashboards
- Step 10 • Set up performance budgets
- Step 11 • Add more domains
Step 1 • Start your SpeedCurve trial (if you're not already signed up)
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.
Step 2 • Activate your LUX trial
If you haven't already activated your LUX trial, log in to your SpeedCurve account, then go to the LUX page and click the "Activate your LUX trial" button:
- Copy your custom LUX snippet for use in step 3.
- Specify the domain(s) where you'll be inserting the LUX snippet.
- Hit the "Start LUX" button.
Step 3 • Insert the LUX snippet and adjust your sample rate
If you copied the snippet from step 2, then you can paste it directly in your page. You can also get the snippet at any time by going to Settings > Edit LUX.
Where to insert the snippet
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.
How to adjust your sample rate
In the default snippet, the sample rate is set at 100%. Change the 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%).
Step 4 • Tour the LUX dashboards
Your LUX dashboards offer a number of lenses into your user data. Take a quick dashboard tour to find out what you can learn from each one.
Step 5 • 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 6 • 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. This makes it much easier to compare the performance of different parts of your site.
Page labels also let you compare your LUX and Synthetic metrics so you can see how they match, and then tune your Synthetic tests to better simulate your real user performance.
Step 7 • 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.
Step 8 • 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.
- Track any metrics you want (cart size, A/B tests, conversion info) using the LUX.addData API
- A/B Testing JSONP and the Preloader with RUM
Step 9 • 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 10 • Set up 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.
- When do performance budget alerts get sent?
- How to send alerts via HipChat
- How to send alerts via Slack
Step 11 • Add more domains
To add more domains to your LUX monitoring, go to your Settings page, scroll down to the bottom, and hit the "Edit LUX" button. This will take you to a page where you can add domains and allocate pageviews from your LUX budget.
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 3) or contact us about increasing your monthly cap.
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 email@example.com.