6 tips to improve application performance in Angular
Nowadays, everyone knows that the creation and development of high performance web applications is a pillar to retain users and keep them satisfied. However, with the constant appearance of bugs to fix and new features to create, this is much easier say it than done.
Fortunately, at present, with the latest versions of Angular, you can use various resources to improve the performance of an application created in this Framework, various aspects make an application have better loading times and are established optimally and we are going to See them in today’s article.
What is Angular?
As we have already seen in the comparison between Angular and React, Angular, the evolution of AngularJS, is a development framework based on JavaScript and Google, widely used for web pages with a single page/window.
Angular completely separates the Frontend and Backend in the application, avoids writing repetitive code and keeps everything more organized thanks to its MVC (Model-View-Controller) pattern, ensuring rapid development, while allowing modifications and updates.
Among other advantages, this framework is modular and scalable, adapting to our needs and being based on the web component standard, and with a set of application programming interfaces (API) allows us to create new custom HTML tags that can be reused.
How to optimize the performance of my application in Angular?
After the latest Angular updates, we can use different resources that will allow us to improve the performance of our application by improving load times.
Let’s get started!
Lazy Loading
Lazy Loading or deferred loading is undoubtedly one of the best features of Angular and one of the most used by developers. This mechanism allows the load to be split instead of loading the entire application on application startup.
That is, by implementing a script like LazyLoad, the browser loads images and other data only when it appears in the user’s viewport or viewport, for example, when scrolling the browser window or maximize it, since most applications contain more than one page or modules.
Thanks to Angular and this feature, it allows us to easily load only what we need, all you need is for each page to contain its own module and routes.
We can carry out this load according to certain conditions, for example, based on roles, if we implement a specific guard and link it to these specific modules and routes, we will be able to carry out a more complete task.
TrackBy
For Angular, manipulating the DOM is always a complex task, and this can be verified thanks to the *ngFor structural directive.
When iterating a list of elements and displaying it in the DOM in an application, what *ngFor does is an equality validation to check if the elements that are in the list have changed, this action is done through references.
In Angular, the TrackBy function allows the user to select a specific key that will be used to parse each list item based on that key. TrackBy is especially useful when you have nested arrays and objects that you want to provide a unique identifier for each.
Thanks to the TrackBy option, Angular detects which elements are added or not to the list.
It’s important to note that TrackBy only applies to the current iteration of an array or object, not to all future iterations.
Build for production
A really simple technique to implement in our project, simply, when performing a build (command to compile the Angular files), we have to add –prod –aot
With this “—prod” parameter we tell Angular to optimize itself so that the size of the compiler files is much smaller and therefore the loading will be faster.
With the “—aot” parameter we indicate that it should review the code to optimize it, although in the latest versions this command is executed directly with the aforementioned parameter.
Thanks to these features, we can activate the following parameters in the application:
- AOT compilation: Precompiles the templates of the various components
- Bundling and Minification: Remove excess optional characters and concatenate files into smaller packages
- Dead Code Elimination: Remove unreferenced and unused code
- Production mode: Displays the production mode, therefore, removes processes that are only implemented in a development mode
Server Side Render (SSR)
Server Side Render is another of Angular’s resources that allows us to execute code on the server side, optimizing and reducing load times.
Normally we execute our code on the browser side that we have predefined, what the SSR allows us is to be able to render the content on the server as if it were an application made with the server language, generating various static pages that are shown to the client, making the application processes the information faster and this greatly helps the SEO and metadata of our application.
Make it easy for web crawlers
Most social networks rely on various web crawlers to index their app content and make that content searchable on the web. Through these web crawlers you may not be able to navigate your Angular application as a user would.
But Angular allows us to generate a static version of the App for easy searching and linking without the need for JavaScript.
We may need a server-side rendered, non-JavaScript version of the app, as this version, while limited, could be the primary alternative for people who may not otherwise be able to use the app.
Show the first page faster than others
Displaying the first page quickly can be critical for the average user. Pages that load dramatically faster are proven to perform much better, even with very small changes. Therefore, it is very important that the application launches quickly to attract users before they make another decision and leave the page.
With Angular we will be able to generate landing pages, these are pure HTML and can be displayed even when JavaScript is disabled. One of their limitations is that they don’t handle browser events, but they do support the use of RouterLink. In practice, a static version of that page is served to hold the user’s attention, while at the same time the full application loads and the user experiences instant performance.
Progressive Web Apps (PWA)
The Progressive web Apps or progressive web application is a solution based on the traditional web that we all know, although it incorporates particularities that make it resemble a native App for mobile phones and tablets.
And one of the most important advantages of PWA is that the user can continue consulting your website, even if they have lost the internet connection.
By making a progressive web application, our application will load much faster since it gives us the ability to work offline and with an interaction very close to a native application, greatly improving the performance perceived by the user, it also uses the local browser cache to enable better experience and functionality.
Cache values through pipes and functions
To start, you need to know that pipes are an Angular tool that allows us to visually transform information, for example, change text to uppercase or lowercase, or format it with date and time.
Even when using pipes, we can further optimize our application’s usage by remembering or caching previous values, which allows us to not need to recalculate if we’ve already run the pipe with the same input in the past.
Pure Pipes don’t remember previous values, but will just make sure that if the input hasn’t changed the reference, it won’t be recalculated.
So to cache the old value, we need to combine it with something else. An easy way to do this is to use Lodash‘s memorization method.
In this case, this is not very practical since the input is an array of objects. If the pipeline was taking a simple data type, such as a number, as input, it might be beneficial to use this as a key to cache the results to prevent recalculation, allowing faster and more efficient loading.
Discover more reference and best practices for using Angular by visiting the official Angular documentation and the official Angular CLI documentation.