How we made our website 60% faster

Once upon a time, there was…,

This is how nowadays, web developers talk about Apache Server. A lot of companies started to use Nginx for various purpose - as Webserver, Reverse Proxy, Load Balancer.

If you don’t know about Nginx, I could say few words about it. Nginx, is a Web server, which can be used as Reverse Proxy for HTTP, HTTPS, Mail Server,etc., It has significant features like

  • High availability
  • Low memory footprint
  • Fault tolerance
  • Static files serving with auto-indexing.
  • Some more...

Since the beginning of GyanMatrix, we have been using Nginx as our Web server and Reverse proxy in our website and for our beloved Loany.

Mode - Reverse Proxy:

In simple words, the term Reverse proxy, is nothing but hiding one or more servers behind a proxy server which forwards requests to the original server(s) on behalf of client.

We have been running our dev, test and staging environments in same machine using this concept of Reverse proxy. Every environment runs in it’s own sandbox and exposes the internal port number to handle requests. In Nginx we just configure how the request should handled based on domain name and path.

One sudden day…

On a fine day, someone had thrown me(💔) the screenshot of Google Pagespeed insights for our GyanMatrix website. It was showing 60 out of 100 for mobiles and 72 for Desktop. It was almost downloading 1.7 MB of resources every time.😢

So it's time for us to analyse the problem, and tune it up. After all, it's one the most important ways to show people who we are and what we do.

More data consumption is due to the large images and many Javascript libraries used in the page. We used CompressJPEG (💚) for heavy compression of JPEG images. For instance, 70 KB file was compressed to ~12KB, without losing much quality.

Enabled Gzip in our Nginx for JS and CSS files. After that, we had reduced the page size to 1.1 MB. Isn’t cool 😃 ? But we didn’t stop here. Because downloading 1.1 MB in mobile network is still too large.

Entry of the PageSpeed 😎

Do we ever(esp. techies) end up with no answers for a question in Google ? So how come the Google’s Pagespeed won’t help in guiding to improve the page speed ? There comes that awesome PageSpeed module for Nginx. Pagespeed module has to be built with Nginx source. Here’s the guide to do it.

After configuring Nginx with PageSpeed module enabled, most things changed. Page speed combined all the CSS together, compresses the JPEG and if browser supports, it loads WEBP version of that image. It automatically caches the static resources. Gzip compression is enabled by default and much more...

Yay! Now we end up with ~670KB of total page size. Now the Pagespeed insights is 71 for Mobiles and 85 for Desktop.

Let’s smile for a while 😊😃

We're still looking for ways to reduce further, will keep you posted.

🤔 Beware of...

HTML5 AppCache - It works well for web apps, where the HTML will be loaded separately using AJAX. But in websites, mostly we do all changes in the same index.html file. This is where the problem comes in, Appcache caches the page it loads the Manifest file too, so any change in index.html won’t reflect till there is change in manifest file. So say NO to Appcache for static websites. And important thing is, it is also deprecated by Web Standards, better avoid for Web apps too.

PageSpeed Module Allow/DisAllow Directive - Even though you love cache, you will not like when everything is cached, because some files needs to be loaded every time. For instance, Custom stylesheet for website, because you want to reflect the style changes to happen immediately when you do it. So use PageSpeed Module’s Allow/DisAllow feature wisely.