Nginx performance upgrades for your website

Why host your own webserver?

Why would you even care about the hassle of setting up your own webserver? Two reasons:

1. It is most likely cheaper than any webhosting package
2. Customizability

I have a 2GB Ram VPS on netcup.de and recently was lucky enough to get it on blackfirday for 1,69€ a month. Currently I am hosting a couple of NodeJS applications controlled with PM2, a CouchDB installation and a couple of static sites. All served with Nginx.

So lets get into trick number 1:

Adding gzip compression to nginx

Reducing the size of files to be transmitted can not only make loading the website quicker, but also cheaper for those who have to pay for their bandwidth usage. Gzip compresses the files for us on the fly. The browser then decompresses those files.

Start with editing the nginx.conf

$ sudo nano /etc/nginx/nginx.conf

Find the gzip section which looks like this:

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";

# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
. . .

You can see that the gzip compression on directive is allowed by default, but with # comment sign, several additional settings are commented out.

• Allow additional settings by uncommenting all of the commented lines (i.e. by removing the # at the beginning of the line)
• Apply the gzip min length 256; rule that tells Nginx not to compress files smaller than 256 bytes.
• Add the directive gzip_types with additional types of files denoting web fonts, ico icons, and images such as SVG.

It should now look like this:

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
. . .

Save and close the file.

To enable the new settings, restart Nginx.

$ sudo service nginx restart

Enabling browser caching

Minimizing the quantity of requests is another way to speed up your website. This can be done by configuring browser caching. It informs the browser that downloaded files can be reused from local copies rather than constantly requesting the server for them. To do this, it is important to implement new HTTP response headers informing the browser how to act.

To add the header module, open the default Nginx configuration file.

$ sudo nano /etc/nginx/sites-available/default

Find the server configuration block, which looks like this:

. . .
# Default server configuration
#

server {
    listen 80 default_server;
    listen [::]:80 default_server;

. . .

Attach two new sections here: one before the server block, to specify how long different types of files can be cached, and one within, to configure the caching headers properly.

. . .
# Default server configuration
#

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    expires $expires;
. . .

To enable the new configuration, restart Nginx.

$ sudo systemctl restart nginx