Cracking the Code: The Journey to ENHO’s Performance Perfection

A Case Study

The Problem

We’ve encountered a significant issue in our ENHO application: the main.js file has ballooned to over 10 MB. This surge in size, following Node and React version updates, has resulted in a daily increase of over $100 in our AWS Shield Advanced costs, exacerbated by the application’s overall growth.

As applications grow, especially with the addition of new features and functionalities, the file sizes tend to increase significantly. This can lead to a variety of challenges, including:

• Increased Loading Times: Larger files take longer to download and process, resulting in slower application startup and overall performance.
• Higher Bandwidth Usage: Increased file sizes consume more bandwidth, which can be costly for users on limited data plans or for applications with a large user base.
• Storage Issues: Larger applications require more storage space, both on user devices and on servers.
• Performance Degradation: Inefficient handling of large files can lead to performance issues, such as lag, crashes, and unresponsive interfaces.
• Maintenance Complexity: Larger codebases and assets can be more difficult to manage and maintain, making updates and bug fixes more challenging.

Factors Contributing to Increased File Sizes:

• Growing Codebase:
  • Adding new features and functionalities naturally increases the amount of code.
  • Libraries and frameworks, while helpful, can also add significant overhead.
• High-Resolution Assets:
  • Images, videos, and audio files are often large, especially when high-resolution versions are used.
  • Graphical user interfaces (GUIs) and animations can also contribute to large asset sizes.
• Dependencies:
  • Applications often rely on external libraries and frameworks, which can add a significant file size.
  • Poor dependency management can lead to unnecessary or redundant dependencies.
• Data Storage:
  • Applications that store large amounts of data locally can quickly grow in size.
  • Caching strategies and data compression can help mitigate this.
• Unoptimized Code and Assets:
  • Inefficient code and unoptimized assets can lead to larger file sizes than necessary.
  • For example, using uncompressed images, or large unused sections of code.

Strategies to Mitigate File Size Growth:

• Code Optimization:
  • Remove unused code and libraries.
  • Refactor the code to improve efficiency.
  • Use code minification and compression techniques.
  • Code splitting. Only load the code that is needed for a particular page or function.
• Asset Optimization:
  • Compress images, videos, and audio files.
  • Use appropriate file formats (e.g., WebP for images).
  • Use image sprites or vector graphics where possible.
  • Lazy loading of images and other media.
• Dependency Management:
  • Use a dependency manager to ensure that only necessary dependencies are included.
  • Regularly review and update dependencies.
  • Tree shaking, to remove unused portions of libraries.
• Data Compression:
  • Compress data before storing it locally or transmitting it over the network.
  • Use efficient data formats (e.g., JSON, Protocol Buffers).
• Caching:
  • Implement caching strategies to reduce the need to download or process data repeatedly.
  • Use browser caching or server-side caching.

The Final Solution

• Applying gzip compression and chunking JS and CSS files are crucial steps in optimising the ENHO application. 
• We improved the ENHO application’s efficiency by applying gzip compression and modularising our JavaScript and CSS into dynamically loaded chunks.
• Also, to optimise application speed, we delay the loading of React modules until they are actively required, resulting in faster initial page loads.
• This ensures that only essential code and styles are loaded initially, enhancing user experience and reducing bandwidth usage.

I hope this blog has given you a good overview of Application Optimization and App Performance.

– Chandradeo Chakravarti