Case study 1
A bank was utilizing a well-known UI library that promised quick UI re-rendering. However, the initial loading time was subpar, and users experienced a prolonged white screen during loading. After several meetings, we identified a few potential solutions:
- Implementing server-side rendering
- Loading static scripts from the backend to display temporary UI elements until the JavaScript fully loads and finalizes the UI
- Code splitting to enhance the initial loading speed
Upon examining the backend code, we decided against server-side rendering due to its reliance on a Java platform, which slowed down server operations and yielded disappointing results. The idea of migrating the relevant backend parts to Node.js was ruled out at the time. Instead, we opted to implement inline scripts—both JavaScript and CSS—which created a placeholder and loader effect for users. This approach allowed users to see some UI elements quickly, giving the illusion of a faster load time. While the solution appears straightforward, it effectively masked the loading process. The white screen issue was resolved, achieving our main objective.
Additionally, we employed code splitting, which further decreased loading time by ensuring that only the essential components of the application were loaded initially. This required some further code refactoring, while the remaining code was downloaded in the background or as the user navigated to specific screens and functionalities. This strategy led to even quicker application loading times. Although the issue was commonly encountered, the most apparent solution wasn't necessarily the best. Initially, the client considered investing in more expensive machines to accelerate application delivery. We successfully proposed two more cost-effective and efficient solutions from a business perspective.