We created this step-by-step guide to help you set up your SpeedCurve Synthetic monitoring, and to help you onboard your team members who are new to SpeedCurve. As always, we welcome your feedback. If you have any questions that aren't answered here, send us a note at firstname.lastname@example.org.
If you haven't signed up for SpeedCurve yet, you'll need to do that first. The signup process is pretty simple, and there's no credit card required for your 30-day free trial.
- Step 1 • Add URLs, regions, browsers, and custom settings
- Step 2 • Manage your monthly checks
- Step 3 • Add more users and teams
- Step 4 • Benchmark yourself against your competitors
- Step 5 • Understand synthetic metrics
- Step 6 • Create custom charts
- Step 7 • Set performance budgets and alerts
- Step 8 • Add WebPageTest scripts
- Step 9 • Create custom metrics
- Step 10 • Integrate SpeedCurve into your CI/CD process
- Step 11 • Drill down into your test results to see waterfalls and get your Lighthouse scores and audits
Step 1 • Add URLs, regions, browsers, and custom settings
In this short (5:40) video Mark walks you through the steps to add more URLs, regions, and browsers, as well as create custom settings to emulate different connection types and speeds.
- What do the different SpeedCurve metrics represent?
- How do I test my private development and staging sites?
- How do I run a test RIGHT NOW?
- Setting up your test times
Step 2 • Manage your monthly checks
No matter what type of plan you have, it's in your best interest to manage your monthly checks to get the best value out of SpeedCurve.
Step 3 • Add more users and teams
You can add unlimited users and teams to your SpeedCurve account. This video shows you how.
Step 4 • Benchmark yourself against your competitors
Knowing which of your competitors are faster than you is a fantastic way to get performance buy-in throughout your organization. Here's how to use SpeedCurve to compare your performance with any other site.
(Bonus: It's super easy to set up! Extra bonus: You can also generate great visualizations – like side-by-side videos and filmstrips – to share with your team.)
- Benchmark URL variations against each other
- Why are SpeedCurve metrics different from what I see on my local computer?
Step 5 • Understand synthetic metrics
SpeedCurve tracks dozens of metrics for you. But how do you know which ones to focus on? There's no "one size fits all" metric. Instead, there are different metrics for different purposes. These include (but aren't limited to):
- How responsive are my servers? Backend Time
- How fast does this page seem to be to users? Start Render, Hero Times, Speed Index
- How quickly does the page settle down and become mostly interactive? CPU Time, Long Tasks, First CPU Idle
- What do the different SpeedCurve metrics represent?
- How is Speed Index calculated?
- How I learned to stop worrying and love UX metrics [VIDEO]
Step 6 • Create custom charts
Your Favorites dashboards make it super easy for you to cherry pick the metrics and data that are most meaningful to your business – and then share that data with your team.
You can quickly and easily build your own charts which:
- Group charts into different dashboards for different users. For example: You can add an "Exec Summary" dashboard that includes high-level charts for those monthly management meetings. Or you can create separate project-related dashboards to help your dev team focus on priorities.
- Combine synthetic tests and LUX (real user monitoring) in one chart.
- Choose average, median, or 95th percentile.
- Create charts that have multiple metrics.
- Select multiple values for a filter, eg, browser = Chrome or Firefox, country = UK or US.
- Compare A/B tests in a single chart.
Step 7 • Set performance budgets and alerts
Now that you understand how to create custom charts, the next step is to set performance budgets on some (or all) of them.
Performance budgets are a vital tool in your web performance toolbox. They take the hassle out of monitoring your page performance by notifying you (by email, Slack, or HipChat) whenever your 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
- How to send alerts to other webhooks
Step 8 • Add WebPageTest scripts
WebPageTest scripting lets you expand your SpeedCurve testing by allowing you to do things like add repeat views and test private dev and staging sites.
- Add WebPagetest scripts
- Add a repeat view using a WPT script
- How to do a bulk site settings import
- Test private development and staging websites
Step 9 • Create custom metrics
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 10 • Integrate SpeedCurve into your CI/CD process
SpeedCurve can be integrated into your continuous integration or continuous deployment environment (via any CI tool like Jenkins, Travis, or CircleCI) as a way to test for and react to performance issues.
In a typical CI/CD pipeline, SpeedCurve fits in either the integration testing stage, the post-deploy stage, or both.
- Compile code, run unit tests.
- Deploy the build to the testing environment.
- Run integration tests, trigger SpeedCurve tests on the testing environment.
- Promote the build to the staging/production environment.
- Trigger SpeedCurve tests on the staging/production environment.
Step 11 • Drill down into your test results
Being able to monitor and measure the performance of your pages is crucial. The next step is to quickly find out what’s hurting your pages so you can stop the pain.
You want to know:
- Which performance rules is my page breaking?
- How do I prioritize my optimization efforts?
- How can I communicate this quickly and clearly to my team?
Every time you run a synthetic test, your Lighthouse scores appear at the top of your test results page by default. Lighthouse is an open-source automated tool for auditing the quality of web pages. You can perform Lighthouse tests on any web page, and get a series of scores for performance, accessibility, SEO, and more.
Here's how to see your Lighthouse audits for each test run:
1. Go to your Site dashboard.
2. Select the page you're interested in from the menu at the top of the page.
3. Click on whatever point on the test timeline you're interested in. You'll see a pop-up with a 'View Test' link, like this:
4. Click the 'View Test' link to go to the test results page. Your Lighthouse scores are at the top of the page:
5. Click on each Lighthouse category to see your list of audits and recommendations, like this:
6. If you want to see your full Lighthouse report, click on the text link at the bottom of the list of audits.
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.