Is Gzip Compression the most under-rated technique of improving your website speed?

The answer to question in title is, yes. It is definitely not a de facto standard with about 30% sites still not using compression, even though most modern browsers accept encoded content.

We recently carried out efforts of reducing payload & improving load times and increasing GZip compression came out as a suggested measure in almost all popular page speed tools. We will be sharing web page test results as they are most detailed.

Before compression :

Before state on 4th Jan 2017

Goal :

To improve F grade under Compress Transfer by increasing compression as much as possible.

Enabling compression at front-end : 

We are serving front-end using AWS CloudFront. It only required us to enable one setting from CloudFront console – Update the Compress objects automatically setting in Behaviour section of your web distribution.

In AWS, it takes some time (it took couple of days in our case) before CloudFront starts serving encoded content.

Enabling compression at back-end : 

This compression can be enabled with JSON APIs as well & results are even more powerful because it works wonders with text encoding. In case of visa guide, API response payload for this endpoint reduced from 50KB to 5KB which is 90% savings.

See it yourself.

If your JSON API is hosted on Apache, all you have to do is add below rule to .htaccess :

<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE application/json
</IfModule>
If your front-end & back-end both are being served using Apache,

Use below rules to cover all static assets.

<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE application/json
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-font
 AddOutputFilterByType DEFLATE application/x-font-opentype
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/x-font-truetype
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE font/opentype
 AddOutputFilterByType DEFLATE font/otf
 AddOutputFilterByType DEFLATE font/ttf
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/plain
</IfModule>

All done, time to look at results!

After compression :

After state on 7th Jan 2017

Only by increasing Gzip compression, we were able to achieve one-third payload & double speed.

Could you still choose to ignore it? 😉

There are more advanced techniques like server side rendering & setting cache headers for your static content that further helps with improving performance significantly. We plan to cover it soon. Stay tuned! 🙂

Leave a Reply