A Practical Guide to Debugging Browser Performance With OpenTelemetry

A Practical Guide to Debugging Browser Performance With OpenTelemetry

2 Min. Read

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:

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

Don’t forget to share!
Purvi Kanal

Purvi Kanal

Senior Software Engineer

Purvi has been working as a software developer for many years, working in mostly frontend and site reliability roles. When she is not at her computer, you can find her running, playing with her dog, crafting, and playing table top games.

Related posts