Unlock performance tracing in Vue

Being able to track the performance of your components is really useful to help debug problems with your project and it is so easy to do in Vue that you will be up and running in only a couple of minutes.

Step 1…

Add the following snippet to your main.js

Add this one line to your main.js

…and that’s all you have to do!

This will turn on the Vue performance tracing, which uses the User Timing API to track your component’s init, compile, render and patch performance whilst you are in development mode.

View in dev tools

Google Chrome has built in support for the User Timing API and will automatically add this tracing to the visualisations in the Performance tab of your dev tools.

If you are new to analysing performance with Chrome’s dev tools, this useful guide should get you up and running.

Vue Performance tracing in Chrome dev tools

Understanding the results

The example above shows the load performance of my application. My App.vue has two child components, Expensive and Cheap. Expensive has a taxing Created method and therefore takes much longer to initialise than Cheap. The visualisation indicates this by showing a longer bar for Expensive’s init measurement.

Because App.vue will wait for it’s children to mount before it mounts itself, you can see that App’s patch measurement includes the time that both of it’s children took to initialise, render and patch.

Demo

I have created a demo sandbox with Vue performance tracing enabled so you can get started with tracing the load performance and other common interactions on a live application.

Custom collection

As Vue’s performance tracing uses the common User Timing API, you can also use a PerformaceObserver to fire a callback whenever a performance entry is created by your components.

Collect and handle the performance marks

This could be useful for collecting data when A/B testing components for example.

Summary

I am fairly new to Vue’s performance tracking and used to find debugging performance bottlenecks to be a very long and manual process. Without the kind of insight that this tracing gives us, I found that it was easy to miss-attribute a component’s issue to it’s parent or siblings, but now it is quick and easy to reliably pin point problems.

Even though this is such a powerful tool, I found that it is relatively understated and couldn’t find much documentation around it, so hopefully you have found this quick introduction useful.