Vue.js is the newest JavaScript library, which is fast gaining popularity among web developers worldwide. Perhaps because of this novelty, it is still quite common to run into performance issues when using it for building applications. The majority of them, however, can be resolved quite easily.
In this guide, we will go over the key things to have in mind when creating a Vue.js-based application to achieve optimal performance.
Why is Vue.js gaining popularity so fast? It does have some competition in the form of Angular and React - more mature frameworks. In fact, the discussion of Vue.js vs React vs Angular seems to have no end. And in fairness, every one of the three JavaScript frameworks can be a good choice for building frontend solutions.
Angular is considered the go-to option when we are dealing with large enterprise-scale projects. React is praised due to its extended ecosystem. Vue.js is often seen as the lightest and the most developer-friendly choice.
However, there is no room for uncertain decision-making when it comes to selecting a tech stack. These common opinions may be a good indication, but the final choice is dependent on your particular scenario.
As Alokai is based on - you guessed it - Vue.js, this is the option we advocate for. Here, we will go over why that is, which use cases it suits, and how to make the most of it, so your eCommerce store runs at its best.
Why choose Vue.js?
Vue.js is the youngest of JavaScript frameworks. It was developed in 2016 by a former Google employee. What makes it unique is the fact that it combines some of the best features of Angular and React, yet allows for a remarkable simplicity in creating modern and headless websites and web applications.
Speed and efficiency are the main advantages of Vue, which determine its choice for both single-page and multipage projects, where exceptional loading speed is important.
Can Vue.js eCommerce be fast?
Absolutely. Vue is considered the most flexible and relatively straightforward ultra-light framework, providing lightning-fast site performance. The full library weighs only about 18 to 23 kilobytes, and it has a significant impact on improving the performance of websites. We don't have to mention that in eCommerce, this is crucial, and it’s why we use this framework for Alokai.
Alokai: A Vue.js-based solution for eCommerce
Alokai is a framework that provides a great deal of features out-of-the-box, and yet, it does not define how the webshop must run and look. Retailers can work with the default features, customize them at any time, or opt for a hybrid model.
Alokai provides just the right combination of flexibility and a shorter time-to-market. The design offers all the PWA -based business logic, but merchants remain in complete control of how their store will look and "behave."
Choosing Alokai opens up numerous options for adding 3rd party services such as Headless CMS, search, payments, loyalty programs, etc. It doesn't matter if the services you need are already available on the market (in this case, we provide native integrations) or have to be done from scratch.
Alokai is based on the most straightforward JS framework, Vue.js, and this choice secures lightning-fast site performance and positively impacts Developer Experience.
Is Vue.js good for large projects?
Working with large stores, we see that Vue.js performs at scale just as well as other frameworks. It works great in a microservices architecture, where it allows you to make the necessary changes quickly and without disruption.
While it is true that Vue applications can experience difficulties in handling large volumes of requests, it is often due to poor optimization. When you're dealing with a library famed for its low weight and superfast speed, it's easy to forget that you need to review and optimize the finished product.
To perform at their best, Vue apps require a smart approach to configuration and third-party components. Overlooking this point may cause significant issues with your application's load speed, likely resulting in customers abandoning your store.
Common performance issues in eCommerce stores
The issues you may come across when using Vue.js in eCommerce are largely similar to the typical problems with web performance . The framework is a means to an end, but even the best solution isn't enough if you overlook the basics.
So, what are the usual issues when it comes to low-performing eCommerce apps?
Lengthy Load time
How long your application takes to display the page will likely be the direct main contributor to your eCommerce revenue. Customers just don't want to wait for your page to load. If they don't see what they're after, they will just go elsewhere.
In eCommerce, time really IS money, so spending some of it on achieving performance gain will save valuable microseconds, allowing users to spend their time on completing their transactions instead.
Poor device compatibility
You've built your application, it works fast and looks beautiful on your device. But your page metrics tell a different story. The bounce rates are high, so is page load time, and there seems to be a lot of abandoned carts. What happened?
An often-overlooked fact is that developers frequently have better tools at their disposal than many users. You need a powerful machine to compile your code, but the device your customers will access the application on will likely not be as advanced. It might not even be a desktop computer or a laptop, but a mobile phone - and an old one, at that. That's why you need to make sure your app works well on slower connections and older hardware.
Large media files
Another thing about slower connections, is that they can easily make viewing your app impossible. If your application is asset-heavy, loading multiple large images for example, low bandwidth won't be able to handle them, so your products won't display at all.
By not optimizing your images, you are narrowing down your audience to a minimum - and annoying whoever is left with a slow-loading page.
6 tips for making Vue.js-based eCommerce websites fast
Now you know why you need to take optimization in account when working with Vue.js, let's go over some solutions. In this part, we will look at where to start with performance optimization.
Check the Core Web Vitals
You can't correct an error you don't know about. That's why you should start with checking your site's performance using a specialized tool that looks at Core Web Vitals. They give an indication about your site's accessibility and usability when viewed on various devices.
To check your site's performance you can use a multitude of tools such as Google Lighthouse, Google Search Console or PageSpeed Insights. Just enter the url of your page and view the report to see the score of your site and tips for making your site more user-friendly.
Remember that no tool is perfect, and sometimes a feature that may add a few milliseconds to loading time is actually essential to your store. That's why you shouldn't aim for absolute perfection when it comes to achieving a high score. Eliminating the most important issues will be enough.
Implement server side rendering (SSR)
Many Vue applications are built as single-page applications (SPA). In short, content of the app is built and displayed directly in the browser when called.
While this approach has some advantages, you may want to consider the server-side rendering (SSR) mode for faster loading. In this mode, app content is first built on the server, sent in a static form to the browser and completed on the client side.
The SSR approach is especially beneficial for eCommerce as it shaves off valuable time of loading your shop page. It also helps with your SEO rankings, as slow-loading JavaScript can disrupt site crawling.
What is important to know, however, is that SSR puts additional pressure on your server memory usage, so you need to ensure you have the appropriate scalability. This is key especially for high-volume stores and at times of heightened traffic, e.g. seasonal sales or promotions.
Optimize visual assets
A bane of modern websites, large media files may seem like the most obvious point, and maybe for this reason they can often be omitted. Your eCommerce Vue app will no doubt feature many visual assets, such as product images. Those by themselves can take up a lot of memory and bandwidth, slowing down the page. This is why it's important to reduce file size where possible by compressing the images.
So, when can an image become a bottleneck?
• When it's too big (either a resolution or an unoptimized image)
• When it's loaded even though it is not visible on the screen
Both problems are rather easy to solve these days and there is absolutely no excuse for not optimizing your images. It only takes a moment.
Filip Rakowski, Alokai CDXO & Co-founder
Another trick for your front-end assets is to limit rendering when possible. For example, using the v-once function, you render the asset as static HTML, reducing the server load and lowering bandwidth use.
Use lazy loading to reduce bundle size
Even a single-page application can be complex with multiple elements, putting a lot of strain on your users' devices, and on the servers. By default, the browser will prefetch components of the entire application to display all available assets.
A simple trick for avoiding this is implementing lazy loading. This way, instead of rendering the entire content, your app will only display subsequent components when necessary.
Optimize event handling with modifiers
A Vue application for eCommerce will by definition handle many events. It has to be able to handle large volumes of user interactions. This is why it's crucial to look at event handling. Default actions can mean additional load for your store, impacting your app's performance. Using event handlers in the right way will help you avoid this issue.
Reviewing your source code in terms of optimizing event handling will go a long way toward ensuring better performance of your store. One way of doing this is to use event modifiers. They augment the default event actions, specifying the app's reaction to a specific event.
For example, you can add a .once modifier, preventing multiple rendering of a page element (e.g. a static header). A prevention modifier can be particularly useful for forms, when you want the user to enter order details but don't want to reload the full page at each checkout step. These small changes will make a great difference to your customers by speeding up their browsing and buying experience.
Limit unnecessary component abstractions
This point is very important when you build a Vue app that needs to work at a large scale. Abstracting or creating higher-order component instances can be largely efficient when it comes to writing your source code. It can be an elegant way of organizing assets in your application front-end.
For example, if you sell shoes at your eCommerce store, you can use child components to easily display different colors or sizes of each model. The issue here, however, is that this approach results in high memory usage, compared to using DOM nodes.
While not a problem with a small application, if your abstractions run into dozens or hundreds, each one is a significant saving in terms of server capacity. That's why it's worth reviewing your components and ensuring you don't keep unnecessary options.
Optimal performance begins at the source (code)
And there you have it - your essential tips for Vue app performance optimization. By following these principles at the design stage, you will ensure that your new application will work smoothly.
As with most things, taking care of the essentials and following good practices will bring you the best results. And if you're looking for more advice in improving performance of your Vue store - download the free guide below.
