Next Steps:

Learn how to add custom metrics to your site.

Transcript:

Steve: So the first dashboard we call the Site dashboard.

Mark: Yeah.

Steve: So that's going to be whatever the name is-

Mark: Put your name on it.

Steve: Yeah. So what do we have in there?

Mark: So we got performance budgets, is kind of the big one here, so you go into your settings and you define the matrix that you really care about, and this depends a little bit what mode you're in. If you're in development mode, it's probably all about the size of your CCs, how many images, how many requests, how big those images are, and you're monitoring those things. So [00:00:30] jump into your settings, define those budgets, and they'll all appear here on this dashboard.

And that's really there to help you guys as a team, decide what are the really important matrix, and use those throughout your project. And when you define those, then you get alerts. So you cross a particular threshold, you can either set a hard threshold, saying about 100K for your CCs or you can define a percentage change. Let me know when my CCs changes by 20% and we'll send you e-mails, [00:01:00] we'll push it out to Slack, we'll push it out into the various kind of web huts. 

Steve: And we have kind of standard set of metrics that you can pick from for these alerts, for these budget thresholds-

Mark: Yeah.

Steve: Amount of CSS or JavaScript or tiny metrics, but a lot of times depending on the website, there's content that's really important that doesn't have a default metric around it. I think the classic example that everyone refers [00:01:30] to is Twitter's blog post from a year or two ago, where their number one performance metric is time to first Tweet. How long does it take for that Tweet at the top of the page to appear? So another thing that we really encourage customers to do is to look at their website, to look at their different pages, and identify what are those critical elements, the hero image, or something else in the page, and then with a little bit of JavaScript, you can add a timing mark [00:02:00] to that element that comes from the user timing spec, it's standardized now and it's adopted in browsers. There's some early browsers supporting it. And then if you use that API to measure these custom metrics in your page, those get surfaced through SpeedCurve as well. 

Mark: Yeah.

Steve: So you can track the user experience of those critical design elements in the page.

Mark: Yeah. So they big image for a product. And the other big thing is that you can pull [00:02:30] those events through into Rome as well, so it's a wonderful thing to do. It's that deciding, "Hey, what's important to us? And let's instrument that." So, go do it! 

Did this answer your question?