If you’ve ever used Google’s Pagespeed Insights or Google Lighthouse then you’ve seen this webpage performance assessment:

You receive a set of statistics, then some diagnostics on how fast (or slow) your website is.

Some of the diagnostics can be pretty useful, indicating some easy fixes, unused files, and requests that are slow or take a lot of space.

Other diagnostics, such as main-thread work and Javascript execution time do show problems but they don’t really help you fix them.

In this article I’ll go through the steps you can follow to make sure your Vue application is working as fast as possible. With these steps, you’ll know exactly what to fix and you won’t have to guess anything.

---

1. Update Only What’s Needed

One of the nastiest issues you can run into with VueJS is rendering the same elements or list of elements more times than needed. To understand why or how this can happen we have to understand reactivity in Vue.

This example is from the official Vue.js documentation and it shows which properties are reactive and which are not. There are many reactive elements in Vue: properties assigned to the data object, computed properties, or methods that rely on reactive properties.

#programming #javascript #vue #vuejs #software-development