A Practical Guide to Debugging Browser Performance With OpenTelemetry

So you’ve taken a look at the core web vitals for your site and… it’s not looking good. You’re overwhelmed, and you don’t know what change to make because everything seems like too big of a project to make a real difference. There are so many measurements to keep track of and the standards cited seem even scarier. This is extremely normal. Web performance standards can feel impossible to meet for a lot of us.

To get started with browser performance observability, you can use OpenTelemetry to collect data from users as they use your browser website or app. Additionally, you can use auto-instrumentation to measure common performance metrics, such as:

• Page load times
• Resource load information
• Core Web Vitals scores
• Network requests
• Long tasks in JavaScript

Let’s take this a step further: you can even manually instrument key functions that are important in the context of your specific app. For example, you can instrument a function that orchestrates the checkout workflow on an e-commerce site.

It is also just as important to add extra context to the events you send with OpenTelemetry to help you identify issues that affect a specific subset of users (e.g., mobile users using Firefox).

Watch my talk from KubeCon to learn more about instrumenting browser apps with OpenTelemetry—and how to make sense of that data. 

Check out this example app to get started with instrumentation. You can also download the slides for my talk, A Practical Guide to Debugging Browser Performance with OpenTelemetry.