Page loading time 19 times faster!

I want to share with you all some pretty amazing achievement! I am not sure how tech-savvy you all are, but nonetheless I am going to do it 🙂

Today we figured out a way to made our pages load 19 times faster than before. We had dependency loader that used to bundle all files into one, but the bundles were slightly different on different pages.. So the same files needed to be loaded each time on every page.

Now we tweaked the dependency loader to simply load the minified files as individual scripts... and the browser takes care of caching... so same files on different pages get served from cache.. 0ms load time!!!

Page load time went from 14s to ~730ms 🙌🙌🙌

Some additional context:

When building the application we refrained from using any existing JS bundlers such as webpack, or requireJS, etc... and developed out custom dependency loader ( piggybacked the idea from how grails does resource loading ). Long story short, while watching a demo video of a customer we noticed that pages were loading slowly, averaging about 3-4 secs.. and that started worrying us. So we started digging in and noticed that bundling all the JS into one file ( ~24MB ) was making the browser download such a large file. Another caveat to our original approach was that all the dependency hierarchy was generated by a server-side language ( in our case ColdFusion but this goes for any language... ) and some recent Chrome changes made the browser NOT to cache the script if the script did not have a .js extension. In our case it was

<script src="/inc/scache_js.cfm"></script>

and that made the file being loaded anew every single time =(

We are still using the same dependency loader but instead of combining all the JS into one file we load each script ( minified ) as a separate script. That made it cache instantly and the performance on a simulated 3G connection went from 30s to 3s. Unthrottled the pages load now in ~730ms.