In today’s impassioned world we demand smarter technology that solves complex problems faster. We want richer user experience and interactivity, more and upfront functionality with lesser steps to accomplish tasks. Web and mobile applications evolve, driven by constant user demand to enhance and enrich the experience by allowing a faster responsiveness. As web developers introduce more complexity to the code we have to be conscious of the added bulk that impacts the performance.
Recently, I was asked by a client to analyze the Front End Web Performance of a web application my team was building. This large scale cloud application involved a myriad of internal and external systems dependencies relying on numerous parallel and nonparallel API requests tied to the local resources. After running a basic and initial analysis in Chrome’s Developer Tool Inspector, it was obvious to notice the latency and slow response times of both APIs and static resources. The app would definitely use some Performance Optimization techniques.
Since optimizing APIs would involve a different conversation, I’d like to stay with the focus on Front End Performance Optimization, in this article. To fine-tune Front End Performance a number of things should be considered. Here’s a short list of what I feel is the some of the most important techniques:
- Minifying and “uglifying” resources
- Concatenating (Combining files) to minimize the number of requests to the server
- Using CDN (Content Delivery Network)
- Caching resources
- Gzipping resources
- Optimizing images
- Smart loading or on demand loading, such as using Require.js
For now, I’d like to pick the first 2.
It is always good to understand the tech stack used to build the application before jumping to decide on what particular optimization solutions should be used. This particular web app Front End was architected using Angular.js with Require.js running on Java stack and using RESTful services. Require.js project comes with a complementary Optimizer component – r.js.