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.

Rajat Saxena
Sep 11, 2018 · 4 min read
Improving PageSpeed Rating

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.

Update 17 Sep, 18: Currently deployed version of kivenaa.com

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.

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.

Poor PageSpeed Rating (not good at all)

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
compression type text/css text/html text/javascript application/javascript text/plain text/xml application/json image/svg+xml

The above snippet will compress all html, css, text, javascript and svg files.

After deploying the following code to Haproxy and re-running the PageSpeed tool, I got a decent PageSpeed rating as you can see below.

Good compression = Good PageSpeed rating

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.

Consider subscribing to our YouTube channel as well where I publish weekly tech related videos. Geek stuff mostly.

Rayn Studios

App Development & Coaching

Rajat Saxena

Written by

Developer, Entrepreneur & Founder of Rayn Studios

Rayn Studios

App Development & Coaching

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade