How to make your Vue Js application faster

Have you ever wondered why your code seems slow or almost like it's lagging when it runs on your user devices? Have you ever tested your Vue JS-powered application on your development machine and it runs so fast but your users seem to be complaining about the speed of your web app or having a bad user experience?

Well if your answer is Yes or maybe a no but you want to learn how to prevent your Vue Js application from being slow, sit back and study the tips we share to help make your Vue Js application as fast and lightweight as possible.

Vue JS is a very fast and lightweight frontend framework by design, but there are certain coding decisions that you could be making that are slowing down your app. Remember that every second wasted on loading affects your user’s experience.

Here are some of the things that you should be doing that would help speed up your Vue Js application:

Route based code splitting

In this case, Vue Js would only download the code for the route currently visited by the user. As a result, the code loaded when users first visit your website would be smaller because it would contain only the core packages used throughout your app.

If your application has a lot of routes and you load them all at once, it can ruin your application performance. While server-side rendered side applications built with Nuxt provide this by default, those who use the Single-page application (SPA) approach to building apps need to implement this manually.

Instead of:

// router.js

import Home from './Home.vue'
import About from './About.vue'

const routes = [
 { path: '/', component: Home }
 { path: '/about', component: About }
]

We write our code to look like this:

// router.js

const routes = [
  { path: '/', component: () => import('./Home.vue') }
  { path: '/about', component: () => import('./About.vue') }
]

Use pagination/virtualize large lists

Sometimes, you might be working with a large set of data. Rendering such is one of the most common performance issues in all frontend applications.

Because of how the browser works, rendering thousands of data would slow down your app due to the DOM manipulation that is involved.

However, you don’t need to render all this data at once. You can break this data into multiple pages either on the frontend(not recommended) or from the backend and use paginated endpoints to interact with the data source when you need more data.

In a large list, list virtualization can also reduce performance issues by only rendering items that are in or near the viewport.

How to add list virtualization:

Most CSS UI frameworks come with this feature so make sure you check their documentation first. You can also use these libraries to implement list virtualization in your project:

• vue-virtual-scroller
• vue-virtual-scroll-grid

####*Avoid heavy CSS frameworks One of the things that might be slowing down your app is your selected CSS framework.

####*Avoid CSS frameworks that are heavy in bundle size. Most CSS frameworks allow you to select only the components you need using tree shaking and some even allow you to exclude the inbuilt fonts that are not used like font-awesome for icons.

####*Another way is to write your own CSS to style your components. You can make use of media queries to make it responsive and this way, your project would be lightweight in bundle size because you would most likely only include what you truly need for your project.

Cache your API data responses

If you work with API’s in your Vue JS applications, if you look at some of the API endpoints that you consume the data inside your web app, you would notice that there are some endpoints that their data is static(does not easily change) or it changes really slowly over time.

We advise that you check/audit your endpoints and see which one(s) response does not easily change and cache the data.

You can cache the data using:

• LocalStorage for long-life data, for example, a list of countries and phone codes
• SessionStorage for short life data for example News Data that expires after 20 minutes
• As a window object (not really recommended)

TIP: You can serialize the data into JSON and store it until when needed next then you deserialize it.

Preload some of your API endpoint data

A secret recipe that you might be missing is that you are waiting for a user to take action before you interact with your API endpoint.

There are some cases where the data you would be rendering regardless of the user selection or action would remain the same. For cases like this, we advise that you preload the data even before the user takes the action and you cache the response.

This would make your app behave like it’s faster than normal.

Reduce the use of third party libraries

We all love the large variety of libraries that NPM gives us access to. They make our work easier as a developer but sometimes, it comes at a cost.

Most third-party libraries are not needed and sometimes, you only need a specific function or feature from them and a lot of these libraries don’t support tree shaking.

I advise that you look for an alternative first or even write your own functions or classes to handle certain features that these libraries provide.

Also, a lot of third-party libraries are bloated(they contain code that you do not need to get a specific result), and they increases the size of your overall app bundle. Some could be poorly coded and due to this, your app can get slow really fast even even after building a well optimized application.

Before selecting any library, ask yourself these questions：

• Why should I use the library?
• Do I need the whole library to achieve my goal?
• What is the impact of the library I choose？
• Do I have a performance-friendly way to use the library？ *Are there reports of a high number of bugs with the library or core performance issues?

If you find yourself doubting your choice then try and search for a lighter/better alternative in NPM or Github Gists.

Lazy load images

Lazy loading of images is the process of deferring the loading of an image till it's visibly needed. Lazy loading reduces your app bundle size and also saves the user’s data usage until the image is needed. This is also very useful if your page contains a lot of images.

If you are using a UI/CSS framework in your project, check the documentation to be sure if it has inbuilt lazy loading of images as most popular UI/CSS frameworks do have.

If your UI/CSS framework does not have a lazy loading image feature inbuilt, you can use the vue-lazyload package

Install Via your Terminal or Command Line:

npm install vue-lazyload

Then paste inside your src/main.js code:

import Vue from "vue";
import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload);

Now, where you have images, use the v-lazy directive instead of the src attribute we normally use for images:

<img v-lazy="path-to-image"> 

Use a CDN with image compression for remote images

CDN, also known as content delivery network is a group of servers that work together to provide very fast delivery of your server contents. They are usually geographically distributed but unknown to a lot of people, a CDN can also help to compress the size of your assets like images, CSS files, JavaScript and even speed up your site loading time.

One of the most popular CDN in the world is called Cloudflare. When you connect your web app to their service, you get automatic compression of your images. This helps to reduce the size of your images while still maintaining the quality at the same time. For example, an image of 2.5MB when auto-compressed might become 150KB. List of other recommended CDN’s

• Imperva
• AWS Cloudfront
• Azure CDN
• Alibaba CDN
• Google Cloud CDN

Avoid using Vue Js & Jquery together if possible

For some projects, you might find out that you have to use Jquery with Vue Js especially if you have plugins that run on Jquery but have not been ported to Vue Js.

Only use Jquery with Vue Js if you are sure there is no alternative version of the feature you want in Vue or that you can’t port the code to Vue JS easily. Vue JS uses what is called a Virtual Dom, I advise that you avoid manipulating the DOM by yourself directly(which is what Jquery does).

Consider rendering your application on the server-side

Vue Js is a modern framework with lots of features and some of these features allow you to render your Vue Js application on the server-side using Server-Side Rendering (SSR) or Static Site Generation (SSG). Rendering on the client-side gets slower over time especially in big projects with lots of pages/components.

Server-Side Rendering & Static Site Generation also have other benefits like SEO/Meta tag support. This means your application can get indexed easily by Google and other search engines.

You can learn more about how to implement Server-Side Rendering (SSR) or Static Site Generation (SSG) by clicking here.

Conclusion At the end of all development cycles before shipping your product to your users, one thing is sure; You must invest heavily in making your web app as fast as possible so that your users can have a good user experience. A bad user experience would cost you, users, leaving your product and finding a better/faster alternative.

A good way to test how end users perceive the speed of your Vue Js application is to test it on a low-end computer and mobile phone especially with a lower network speed something like 3G or 1Mbps because most users don’t use the same high-end resources as you do.