{"id":2467,"date":"2025-06-05T10:33:19","date_gmt":"2025-06-05T10:33:19","guid":{"rendered":"https:\/\/www.codecrafttech.com\/resources\/?p=2467"},"modified":"2025-06-05T10:36:45","modified_gmt":"2025-06-05T10:36:45","slug":"enho-application-optimization","status":"publish","type":"post","link":"https:\/\/www.codecrafttech.com\/resources\/highlights\/enho-application-optimization.html","title":{"rendered":"Cracking the Code: The Journey to ENHO’s Performance Perfection"},"content":{"rendered":"\n

A Case Study<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

The Problem<\/h2>\n\n\n\n

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<\/strong> and React<\/strong> version updates, has resulted in a daily increase of over $100<\/strong> in our AWS Shield Advanced<\/strong> costs, exacerbated by the application’s overall growth.<\/p>\n\n\n\n

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:<\/p>\n\n\n\n

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

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

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

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

                              I hope this blog has given you a good overview of Application Optimization and App Performance.<\/p>\n\n\n\n

                              \u2013 Chandradeo Chakravarti<\/p>\n\n\n\n

                              <\/p>\n","protected":false},"excerpt":{"rendered":"

                              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 […]<\/p>\n","protected":false},"author":1,"featured_media":2481,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_mo_disable_npp":"","_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[22,23,1],"tags":[110,112,109,62],"class_list":["post-2467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","category-case-studies","category-highlights","tag-application-performance","tag-aws-shield-advanced","tag-code-optimization","tag-technology"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/posts\/2467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/comments?post=2467"}],"version-history":[{"count":15,"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/posts\/2467\/revisions"}],"predecessor-version":[{"id":2504,"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/posts\/2467\/revisions\/2504"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/media\/2481"}],"wp:attachment":[{"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/media?parent=2467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/categories?post=2467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codecrafttech.com\/resources\/wp-json\/wp\/v2\/tags?post=2467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}