- 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 • Create performance budgets and set alerts
- 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.
- If your site is a Single-Page App (SPA), read this before you proceed.
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.
- It's best not to use a tag manager to deploy the LUX snippet.
How to adjust your sample rate
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 1%.
Step 4 • Add page labels
By default, pages are grouped by their page title, but you'll want to use the LUX.label API to label and group your pages by type or template. This is very important for competitive benchmarking, A/B testing your own pages, and comparing your synthetic and RUM data.
Step 5 • 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 6 • Get to know the dropdown filters
The dropdown filters at the top of each LUX dashboard let you quickly drill down into your data. All you have to do is click the arrow icon on the right-hand side of the filter menu to filter your data by page label, device, browser, country, connection, median/average/95th percentile, and customer data variable.
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. You can use this data to create correlation charts, like the one below, which show you the relationship between your performance metrics and business metrics.
- 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
- Track conversion rates in LUX
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.
Custom charts let you do things like:
- Create performance budgets and set alerts (see Step 10)
- 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 7 and 8)
- Select multiple values for a filter, eg, browser = Chrome or Firefox, country = UK or US
- Compare A/B tests in a single chart
- Generate weekly reports for different teams
Step 10 • Create performance budgets and set alerts
To make sure your website stays fast, set up 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 any other webhook) whenever your LUX metrics cross a certain threshold.
The great news: creating performance budgets is quick and easy. Here's how to get started.
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 firstname.lastname@example.org.