This post explains the approaches we used to improve performance in our application. This knowledge will also assist you in applying these strategies to your projects as required. Please keep in mind that this post series focuses solely on the front end.

According to the official website, Asgardeo is an IDaaS that allows developers to create seamless login experiences in minutes.

If I were to give a quick rundown of the implementation, the Asgardeo frontend is primarily built with react and custom webpack setups. The app then uses a Tomcat server to render because there are some JSP-related pages that will be transferred in the future. As a result, the react application is provided as a JSP page.

Improving performance is crucial for enhancing the user experience. According to an Akamai study, 1 second of latency reduces conversions by 7% in a web solution.

In this post series, I'll go over the approaches we employed to increase Asgardeo speed from the standpoints of JSP, React, and Webpack.

Things we have accomplished on JSP pages

1. Separate out authentication status verification to a separate component

As previously stated, the Asgardeo console's react application is rendered using a JSP page (let's call it home.jsp). If an unauthenticated user tries to view the home.jsp, it will load the complete react bundle pieces (more on this later) as well as certain additional assets, regardless of the authentication state. All of these assets are not necessary to check the login status, which is a source of concern. As a result, we created a new JSP (let's call it index.jsp) to handle the authentication verification. In this scenario, the user will be redirected to the home.jsp, which contains the react app, dependent on the authentication status.

We were able to lower the size of our JS files by 13% and improve the loading time of our login page by 41% with this architectural adjustment.

2. Minification of JS libraries

Previously, several js components in JSP pages, such as jquery, were not using the minified version, which contained white spaces. To improve performance, those are also replaced with the minified versions.

3. Delay loading of analytics libraries

We load the analytics and metrics libraries we use for Application Performance Monitoring (APM) and to collect relevant information lazily by giving content priority.

Secure your web apps using Asgardeo — Click here to start for free

Let's talk about the strategies we use in React.js, as well as the Webpack setups we use to boost frontend performance, in part 02 of the series.