How I decreased the size of my Heroku app by 75%.
Have you checked the size of your Heroku application’s javascript and css bundles? If you haven’t you might be in for a shock.
I was hard at work on optimizing a website I built and deployed on heroku, when I realized that there was a pretty large discrepancy in the expected size of the my application. I was crawling through my Chrome devtools and saw the following:
My main css and javascript files combined for a whopping 759kb!
I knew this couldn’t be right, because when I ran my React application’s production build script, it told me that the javascript and css bundles should be significantly smaller:
So what’s the deal here?
It’s worth noting that the advertised bundle size above states the size of the files after gzipping.
I had no clue what gzip was, so I started googling it. Turns out that it is a compression process that is usually executed automatically by the server for compatible browsers.
After some more digging around I realized that Heroku applications do not provide this gzip functionality out of the box. I love Heroku, but I had to do something about this.
I am running a Node/Express server, but what I stumbled across next is almost-certainly available in whatever environment you’re serving your application.
Some further investigation led me to this, a compression module created and maintained by the fine folks at ExpressJs themselves!
I went ahead and dropped the following code in my server, before serving up the static files:
const compression = require('compression');const app = express();app.use(compression());
No joke, that is literally all it took.
I ran my build process again, deployed to Heroku once more, and lo and behold !— My application’s bundles shrank by 75%.
From a monstrous total of 759 kilobytes to a measly 184 kilobytes in three lines of code.
That’s even better than the improvement in my React bundle size from this other article that I wrote, which coincidentally also only involved three lines of code (humble brag).
The improvements in your site’s load times are well worth the small amount of effort it takes to gzip your Heroku application. I ran my new and improved site through Google’s speed test and it improved my scores significantly.
I hope you found this helpful and I wish you all the best in your development journey!
If you liked this article please give it some claps and check out other articles I’ve written here, here, here, and here. Also, give me a follow on Twitter.
Also, for those curious, here is a link to the website that I was optimizing.
