Improve PageSpeed Insights Rating By Enabling Compression On Haproxy
PageSpeed Insights by Google is a wonderful tool to figure out what is slowing your web app down. You can gather some serious data about why your web app loads slow and what can be done about it.
Update 17 September, 2018: After deploying the web app on my Digital Ocean droplet, I got 99 out of 100 in PageSpeed rating. See the following screenshot.
Whenever I am ready to release my web products to the world, PageSpeed is the tool I rush to, for some final optimizations.
For last couple of days, I’ve been working on an update of my chat service Kiven Aa, let’s call this update V2.
Kiven Aa - Talk Freely and Anonymously
Kiven Aa pairs you up with a random stranger, so that you can chat without bounds.
All the necessary changes are now in place and I am testing final builds as of 09 September, 18. The new update boasts fast load timings due to SSR, a slicker interface and SEO friendliness.
Performance improvement sits right at the center of this V2 update. PageSpeed rating for currently deployed version of the service is egregious, as you can see below.
In V2, I’ve tried to alleviate most of the issues that were resulting in poor page load timings. To ensure that the webapp loads as quickly as possible on users’ browsers I ran a production-ready copy of the service through PageSpeed to know more about the areas which were slowing down the load timings.
I used ngrok to open a tunnel from my local system so that outer world can reach my development workstation.
After running the tests, PageSpeed tool showed me that there were two things I could do to get more PageSpeed score, one was to enable catching on
google-analytics.js file and the other one was to enable compression on the server so as shave off some bytes during network transfer.
It is to be noted that I had rectified all other issues reported by PageSpeed by then, hence there was only two items. Since I had never enabled compression on any of my production apps before this point, I prepared myself to don my hacker hat and solve this compression issue for good.
Right off the bat I jumped to the decision that I would just enable compression on Express’ level as it is what powers Kiven Aa’s back end and call it a day. But then again I had never enabled compression on Express before so I had some reading to do. But, somehow, I felt like going back to the architecture of the app.
After going back to the architectural diagram of the service, I recalled that the app uses Haproxy (wonderful piece of software, btw), so why not just compress the response when it leaves the proxy server? Voila!
I jumped into Haproxy’s documentation and figured out the the following lines, if added to the Haproxy’s configuration file under a proper
backend, will compress the resources as they leave the server.
compression algo gzip
The above snippet will compress all
After deploying the following code to Haproxy and re-running the PageSpeed tool, I got a decent PageSpeed rating as you can see below.
So that’s it for today! I hope my article was insightful enough for those of you who came here looking for ways to improve their PageSpeed ratings.
Follow this publication for more insights into how we build cutting edge software at Rayn Studios.