bkh.dev / blog / one-line-change-to-optimize-web-app

One line change to optimize your web app

So, the change is lil more than one line(maybe two), but it’s an easy one.

This will be relevant for you if your web app is:

  1. Hosted on your server
  2. Served via Nginx

Why hosted on your server? Because popular hosting providers already have this feature enabled.

The optimization

The change is enabling gzip compression in your Nginx configuration.

Here’s the simplest way to enable gzip compression in your Nginx config:

gzip on;
gzip_types text/plain text/css application/javascript application/x-javascript text/javascript;

There are other important settings you can add to the config like gzip_comp_level, gzip_min_length, gzip_proxied, gzip_vary etc. I recommend learning more about them.

After this change, your web app files will be compressed and served to users, resulting in:

You might be wondering why is this not enabled by default? I don’t know I thought this kind of settings are already enabled, because it’s a common practice. However, nginx docs warn about cpu usage, security reasons, compatibility issues, etc. So, better to learn more about it.

Lil bit of story: at work we had some reports about slow page loads. Some parts of web app was used as a WebView in our mobile app and on slow connections it was taking a lot of time to load. It was a high priority issue and we had to fix it ASAP. One of the solutions was to isolate the WebView from the rest of the app, so user would not load irrelevant parts of the app. But during troubleshooting I noticed that we are not using any compression on web app assets, I quickly went checking popular web apps and found that most of them are using compression. So, I turned on gzip compression and it helped a lot(load times reduced ~3x) and it was quick to do.

Notes:

  1. This was about nginx, but I’m pretty sure other web servers have similar settings.
  2. There are newer compression algorithms like zstd and brotli, worth to check them out!