When it comes to modern websites and web applications, fast speeds are essential to provide a great user experience and to avoid high exit rates due to slow loading times.
Is your web interface or one-page application built using Vue.js? Have you recently run a web performance assessment and are concerned about the results? Are you looking for ways to reduce loading times to provide the best possible user experience? Then read on to find out how to optimize and speed up your Vue.js application in six easy steps.
Web diagnostic tools such as Google Lighthouse, Google Pagespeed Insights, and GTmetrix are vitally important to ensure your web application is working at its optimal capacity so that your users are provided with a smooth and lightning-fast experience.
Most consumers will wait no more than three seconds for a web page to load before exiting, yet many web applications fail to meet these demands. Working within the web development and search engine optimization sector for well over a decade, I have learned to understand that speed is everything. A stunning design and great content are one thing, but it counts for naught if the user does not wait around to see it.
In this article, we will talk you through how to optimize Vue.js applications to achieve great speeds to appease current and potential users and leave your competitors for dust. From event handling optimization to the removal of slow components, we will talk you through six of the most effective ways to deliver the best possible performance.
Table of Contents
Terminology used within this ArticleA Brief Introduction to Vue.jsThe Key Benefits of using Vue.js6 Ways to Optimize the Performance of Vue.js ApplicationsDon’t Update Elements UnnecessarilySolutionAvoid Duplicate RenderingSolutionRemove/ Replace Slow ComponentsSolutionOptimized Event HandlingSolutionConsider using Virtual ScrollingSolutionRender Page Sections OnceSolutionConclusion
Terminology used within this Article
There may be some terminology that you may not be familiar with, so here is a quick glossary to give you a brief insight into some of the terms included in this article.
Computed Properties – A computed property declares a value that is dependent on other values. Whenever one of these connected values changes, Vue.js then updates the Document Object Model (DOM) accordingly.
Data Objects – A data object stores values or a group of values that can be accessed via an identifier or an expression that has been designated to it. An example of a data object would be a data table or an array.
Document Object Model (DOM) – The DOM is the programming interface for HTML documents, and each document is organized into nodes and objects in a tree structure. This allows programming languages to interact with and make changes to the structure, style, and content of a web page in an uncomplicated way.
Entity Properties – Entity properties contain one or more named properties which can then be assigned more values. Entities of the same type do not need to have the same properties and their values do not need to be the same data type.
Rendering – Rendering is the process of generating code (such as HTML markup) to display web pages on a browser.
A Brief Introduction to Vue.js
Vue’s main library is built around the viewmodel layer and provides reactive synchronization between the model and view layers thanks to its two-way data binding functionality. Thanks to this functionality, web apps can be developed on the single-page application (SPA) model.
Many development frameworks require the full library and feature to be installed. However, Vue offers incremental integration, meaning developers can pick which features of the framework’s library they want to use for a custom installation. New features can be added or removed mid-project if required -this is what makes Vue so lightweight and user-friendly.
The Key Benefits of Using Vue.js
Used by world-leading businesses such as Nintendo, Adobe, Netflix, and BMW, Vue.js is used for building front-end user interfaces and websites. Here is a summary of the key reasons why this framework is so popular, helping to build the websites of household names and delivering even the smallest of personal projects.
6 Ways to Optimize the Performance of Vue.js Applications
Hopefully, you now have a good understanding of what Vue.js is and its capabilities, so now let’s look at ways to optimize this amazing framework even further.
If you don’t believe your frontend development skills are strong enough yet to optimize Vue.js applications, remember that you can always hire an experienced developer to help guide you along as well. Hiring a freelance developer would likely be cheaper than going through a third-party agency. You can expect to pay between $40 and $60 per hour for an experienced freelance frontend developer, which is less money than what you can expect to pay going through an agency.
Whether you are new to Vue.js and are looking to build a project from scratch with the help of an experienced developer, or you are interested in optimizing an existing website or interface on your own – here are six ways to optimize the performance of Vue.js applications.
Don’t Update Elements Unnecessarily
Vue.js shows which elements are reactive and which ones are not, making life easier for the developer. However, there is likely to be a large number of reactive properties, computed properties, and properties assigned to a data object which can complicate matters.
Typically, whenever a new element is added to a list of objects, the entire list will be re-rendered. This is usually completely unnecessary, especially when we consider the date object, for example, which is not reactive and does not need to be updated for elements that have not been changed. An optimal method would be for only changed elements to display a new date, while unchanged elements will remain the same.
The key property can help solve this issue as it allows Vue to better recognize elements so they can be reordered accordingly instead of cycling through and updating the entire list. In addition to specifying a key property, child components also need to be created, segmenting the application into smaller, more manageable components.
With this setup, item components will only be updated if the item encounters a reactive change which can improve the performance of an application significantly. Should an item be added or removed from an array, the list will be re-sorted based on the key properties so that only the necessary elements are re-rendered.
Avoid Duplicate Rendering
Similar to the above, but not altogether the same is avoiding the rendering of full lists or bulky elements multiple times.
For example, a component may have an entity property in the data object, and each entity is rendered by a child component if you have followed the solution in the previous section. The output of this entity property will probably be assigned a user token. When this user token is refreshed, the entire view will be updated, even if the user.status remains unchanged. This is less than ideal from a performance perspective.
The easiest way to solve this issue is to pass the user.status value as a user.status prop from the parent node. This way, if the value is unchanged, Vue will choose not to render it again. Dependencies such as props, data values, and computed values can all cause an entire list to be re-rendered. This is why it is important to identify any properties that can cause duplicate re-rendering.
The best way to do this is by downloading the official Vue.js dev toolkit. Once downloaded, navigate to the ‘performance’ tab, and press start to run a performance check during the app load. Once the check has been completed, go to the ‘Component Render’ tab and check that the number of components that are rendered correlates with the number of events created.
Having more updated events than created events when there has been no change to any values suggests that duplicate rendering is taking place. This can happen for any number of reasons, but as a best practice, you should never change entities more times than necessary.
Remove/ Replace Slow Components
If you are importing third-party components into Vue, or creating components from scratch, their performance levels must match up to the rest of the application. Even a single component that displays slow speeds can impact the entire product and result in a poor user experience.
Once again, the Vue.js dev toolkit can come to the rescue. In the ‘performance’ tab you can see an estimate of the rendering times for every component within the application. This allows you to easily cross-check any newly added components with existing components to see if they are performing at the desired level.
If the new component is taking a long time to render in comparison to other components, and it is not possible to reduce its usage, then you should consider removing it and replacing it with an alternative option.
Optimized Event Handling
Every event within an application is completely different and needs to be optimized accordingly. Using a one-size-fits-all approach is not practical and can lead to slow page times.
Two examples of different events are window.scroll and @mouseover which can be actioned numerous times by the user in a single session. If the event handlers used by these events are not optimized, then it may result in them making long-winded calculations that could be run multiple times per second, resulting in lag.
The most effective way of optimizing event handling is by using the debounce function, which limits the number of times events are processed. By restricting time-consuming events, unnecessary CPU cycles and API calls are avoided.
Consider using Virtual Scrolling
Many modern websites (such as social media platforms) now support infinite scrolling with no impact on page speeds. However, within Vue, this requires a very large list to be rendered, drastically slowing down the page as the user scrolls further down.
To implement endless scrolling in Vue without affecting page speed, you will need to implement virtual scrolling. Virtual scrolling allows the page’s grid component to display thousands of records on a single page and is the recommended alternative to paging.
Vue-virtual-scroll-list is an open-source, virtual scrolling project that is capable of rendering extremely large lists within Vue. It is very easy to use when compared to other, similar projects and does not rely on absolute positions which can ‘break’ the user interface.
Render Page Sections Once
When an element has been mounted, it probably only needs to be rendered once, as it is unlikely to change or require updating. By ensuring these mounted elements are only mounted once, you will save time each time the page is loaded or events take place.
If a section in the app contains data that will not change through the entire page session, then you can use the v-once directive to ensure this section is only rendered once. This simple Vue directive avoids any needless rendering of an element, and small hacks like this are why the framework continues to grow in popularity.
Even developers who are new to Vue.js and are still learning the ropes can make quick and easy changes to optimize their applications. Here is a summary of the key points you should take away from this article.
Vue.js is a framework used for building front-end user interfaces and websites.Most elements within Vue do not need to be rendered if no changes are made. You should avoid rendering full lists and large elements multiple times.Slow components should always be removed or replaced.Event handling can be easily optimized with the debounce function.Virtual scrolling can deliver endless scrolling functionality as an alternative to paging. Sections within a page that do not change during a session should be rendered once.
For more support and helpful information regarding Vue, you can browse the official Vue.js documentation here. Or to easily create advanced user interfaces and single-page applications in no time at all, consider using Flat Logic’sVue Templates and Admin Dashboard Themes.
The post 6 Ways to Optimize the Performance of Vue.js Applications appeared first on Flatlogic Blog.