Reduce Initial Load Time of Angular Application
By: Gurseerat Kaur
Tags: Angular, JavaScript, Optimization, Programming

Explore various methods to use to optimize your Angular application and reduce the initial load time.

Load time is very crucial in web development. According to Google, 40% of visitors abandon a website if it takes more than 3 seconds to load. In this post, I’ll explain various methods to decrease the initial load time of an Angular application.

Bundle the application

By creating a bundle of your application, all your javascript files will be clubbed together in a single file. For this, you can use Webpack which does a pretty amazing job and bundles your javascript, CSS, and HTML files. Webpack will transpile your Typescript code to Javascript which is easier to read for the browsers.

Minification and dead code elimination

Using minification, you can remove the redundant code from your bundled files. This will remove the comments, formatting, shorten the variable names, etc. You can use UglifyJs for JavaScript parsing, minifying, and compressing. You can use UglifyJs with Webpack to remove your dead code.

Lazy Loading Modules

If you are an Angular developer, chances are you’ve heard about lazy loading. But why lazy loading is used? Since we are creating a bundle of our application, this will create a single main bundle file that contains all our code. This file will be huge and will take a lot of time to load initially. To reduce this time, we’ll have to reduce the size of our main bundle and thus we use lazy loading.

We’ll separate our components into different modules and those modules will be bundled in different files. The bundled file is called as and when required. For example, you have to open a popup on click of a button. You can add the popup component in a different module and thus that file will be called only when the button is clicked.

Typescript Import

While using import, you can call only a specific function or class if the complete file is not needed. This helps in reducing the load time as some of the imported files can be huge and take up a lot of space.

import * as myImport from '/myModule'; // Instead use

import { func1, func2 } from '/myModule';

Service worker

By using service workers, you can control the browser cache and your application can be made available to the users even when they are offline. This won’t reduce the initial load time but is quite helpful to optimize the end-user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content.

Lazy load routes

In lazy loading the routes, we can load the individual routes lazily. So the routes of the bundle will be loaded only after the user navigates to that location. For example, when the user navigates to the dashboard, the dashboard bundle will be rendered first and then the routes will be loaded.

Ahead of Time compilation

Using AOT, our templates are compiled during build time, and thus when the user opens the web application, the Angular compiler is not needed anymore. This will reduce your load time as the parsing time is reduced for your browser.

Server-side rendering

Using this technique you can pre-render your application on the server before serving it on the client-side. In simple terms, instead of showing a loading spinner, you can show the users some content, and then when your client-side app is rendered, it will seamlessly switch to showing the client-side app, and thus your users will be engaged with some content instead of abandoning the website.

Note: This method is not for all web applications. If you are using DOM manipulation, you can’t use server-side rendering as DOM manipulation can’t be done on the server.

Compressed files

Compressing your files can reduce your load time drastically. All the modern browsers support this and they can unzip your files and parse it. You can simply use gzip for this. If you are hosting your application on cloud platforms or CDN, chances are they are already being zipped but if you have your own server using NodeJs, you can use the following method to zip your files.

const compression = require('compression')

const express = require('express')

const app = express()

app.use(compression())

Conclusion

Optimization should always be a priority while developing any application. It affects the image of a brand, product, or service. Using the right methods for your application can improve the user experience immensely.

Happy Coding! 😄