Even the best developers end up with performance issues in their apps and sites. Sometimes we’re just so focused on building a new feature that we lose track of how performant these new bits of code are. Super normal.
How can we keep track of performance over time? What should be our goals? Are we as Vue.js developers responsible for all performance issues?
This article is a follow-up to our Vue.js Performance Guide that covers the basics of performance optimization. It helps you wrap your head around performance monitoring and its most important metrics.
Every metric has its pros and cons. We can collect a lot of data, but it’s good to know its limitations. We want to choose a mixture of metrics from all categories to tackle performance monitoring from all angles.
Rule-based metrics calculate performance scores based on a weighted collection of measurements, like the Lighthouse or PageSpeed scores.
Another group of metrics includes all things you can count directly: Your bundle size, or the number of requests.
The third group of metrics show the perceived performance of a site, measuring load speed, responsiveness and smoothness.
Important metrics include for example the Largest Contentful Paint, First Input Delay and Cumulative Layout Shift, which you might know as Google's Web Vitals.
There are thousands of individual metrics that you could measure, but there have been a lot standardization efforts in the last few years.
The Google Web Vitals are a good starting point. To help you make your own decisions, I’m going to share what exactly we’re focusing on with our projects, and why.
For us, the most important metrics are always based on user experience. Obviously we want to create a nice experience, but this focus has also worked out well regarding to our search rankings. The results of your Web Vitals are also factored in your page rank!
The metrics we regularly look at are:
It’s a nice set to start with and can easily be checked either manually via the devtools, or with automated workflows:
Personally, we use some automated "lab" checks while developing, but we track our real-world performance over time with our monitoring solution Sentry.
As a disclaimer: Sentry is a community sponsor of MadeWithVueJS, but we partnered with them because we’re avid users ourselves!
The data in our Sentry dashboard is collected in the "field": It logs all user interactions with our apps which gives us some more interesting data points about performance:
Honestly, we’re a small pragmatic team. We’re not using a monitoring tool because we love staring at data, but because it makes our lives easier and our user’s experience better.
No matter which performance monitoring tool you choose, most of them are pretty straightforward to set up for your apps. It's worth it for the peace of mind you get!
If you want to take a closer look at the loading processes of your Vue app, you can activate the performance mode. With setting
app.config.performance in your Vue apps to
true, you will see a timeline in the performance tab / timeline panel. (Note: This only works in dev mode!)
It shows you when each component got initiated (the instance was created), rendered (the VDom structure was created) and patched (the VDom structure was added to the actual DOM). This can help you identify which component might be causing a performance bottleneck in your app and stay sane while debugging it.
Before you start measuring and monitoring now, it's a good idea to define some target values. We want our app to load fast, but when do we consider it to be "slow"? When do we fail a test, and when do we want to be alerted?
Example goals could look like this:
This set of limits for our performance metrics is also called a performance budget.
The limits and metrics in your budget will be unique, as it depends on the type of app you’re building. Do you need to load a lot of data and images or is it text-focused? Do you need to load content in real time or do you only display static lists?
To create your first performance budget, identify core pages like the start page, important landing pages, your app dashboard, shopping cart, product pages etc.
Then you can try these strategies:
If you haven't measured anything before, it's usually no problem to optimize for 20% better results (see basic strategies in our Vue.js Performance Guide). Then try to stay within this budget over time!
Your Vue frontend is only one part that contributes to good performance. The performance budget is also used up by your designers font choices, your marketing manager’s need for a chat widget and your backend engineer’s API performance.
A performance budget is a great way to take on your part of the responsibility, and open up the conversation about performance with your colleagues.
You could share some case studies showing the business impact of optimizing performance metrics, or discuss UX patterns optimized for the Core Web Vitals.
Performance is always a continuous team effort 💪