Performance optimization techniques we are using in Asgardeo — Part 01
This article introduces the techniques we adopted to our application in improving performance. This information will also help you to adopt these techniques to your projects as needed. Additionally, please note that this article series covers in frontend aspect only.
Asgardeo is an IDaaS empowering developers to build seamless login experiences in minutes as mentioned in the official website.
If I brief on the implementation, the Asgardeo frontend is developed mainly using react with custom webpack configurations. Then the app renders using a tomcat server as there are some JSP-related pages as well, which will be migrated in the future ;). Therefore, the react app is served under a JSP page.
Improving performance plays a key role in improving the user experience. Based on a study done by Akamai, 1 second latency cause 7% reduction in conversions in a web solution.
In this article series, I will explain the techniques we used from JSP, React as well as Webpack point of view, to improve asgardeo performance.
Things we have done on JSP pages. ✨
1. Separate out authentication status verification to a separate component.
As mentioned earlier, the react application for the asgardeo console is rendered via a JSP page(let’s name this as home.jsp). If we consider a scenario where an unauthenticated user tries to access the home.jsp it loads the entire react bundle chunks (will discuss more on this later ;)), and some other assets irrespective of the authentication status. The concern is all of these assets are not required to check the login status. Therefore, we separated out the authentication verification with a new JSP (Lets name this index.jsp). In this case, based on the authentication status, the user will be redirected to the home.jsp which holds the react app.
By using this architectural change, we could improve our login page loading time by 41% as well as could reduce JS file sizes by 13%.
2. Minification of JS libraries.
Previously we had some js assets such as jquery in JSP pages, that aren’t using the minified version which contains white spaces. Therefore those are also replaced with the minified versions to gain performance.
3. Delay loading of analytics libraries
The analytics and metrics libraries that we use for Application Performance Monitoring(APM) and to collect useful information, are loaded in a lazy manner by providing the priority to content.
Secure your web apps using Asgardeo — Click here to start for free
In the part 02 of the series, let's discuss what are the techniques we are using in React.js as well as Webpack configurations we are using in order to improve the frontend performance.
