Fine-tune GZIP compressing and enable static file caching on NGINX

Make your website load super fast

While NGINX is already a lot better than the most commonly used web server (it is even included in the Ubuntu 14.04 core), Apache 2, and is already pretty decent out of the box, but there are as always a few things that we can optimize about it. In this tutorial I have already explained how to optimize the NGINX configuration. Now we will make sure that GZIP compressing and static file caching is enabled. This will definitely increase your Google Pagespeed score, increase page loading and lower your bandwidth usage. I am using Ubuntu 12.04 for this guide.

Requirements
→ A Linux (Ubuntu) server that has gone through the initial setup.
→ Have the open source NGINX web server installed.
→ Know how to connect to your server via SSH (Terminal, Putty,…) or via a client that supports SFTP.
→ Know how to edit and save a file using SSH.
GZIP Compressing

We will basically use the HttpGzipModule that comes with the NGINX web server. Enabling this module will allow NGINX to compress files (HTML, Javascript, CSS, text, XML,…) for approximately 20-40% and deliver them to the client (i.e. browser). This has numerous advantages, it saves you bandwidth and webpages will load faster (= happy visitors). This will only work if the client can handle compressed content, but most modern browsers do. Don’t worry, if the browser is not compatible the server will simply deliver uncompressed content.

Enabling HttpGzipModule It does increase the load a little bit (very slightly), but this is definitely compensated by the fact that the connection times are decreasing a lot.

Ready to go? Let’s do this! Open up the NGINX configuration file. You can find and edit it via the terminal with the following command, but you can also locate the file via SFTP.

sudo nano /etc/nginx/nginx.conf

If everything went well with your NGINX installation you should notice that GZIP is already enabled by default with the following settings.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
  • gzip on; – This setting enables the GZIP compression.
  • gzip_disable “MSIE [1-6]\.(?!.*SV1)”; – This setting disables gzip compression for browsers that don’t support it. In this case this is MS Internet Explorer versions before version 6 SV1.

This is fine, but we will of course fine-tune this a little bit more by adding the following lines to the configuration file.

gzip_http_version 1.1;
gzip_vary on;
gzip_comp_level 6;
gzip_proxied any;
gzip_types text/plain text/html text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript text/x-js;
gzip_buffers 16 8k;
  • gzip_http_version 1.1; – This enables GZIP compression for HTTP request version 1.1. As the Content-Length header is not set, this will make Keepalives impossible with version 1.0.
  • gzip_vary on; – By turning this on you set the response header Vary: Accept-Encoding. Some proxies have a bug in that they serve compressed content to browsers that don’t support it. By setting the Vary: Accept-Encoding header, you instruct proxies to store both a compressed and uncompressed version of the content.
  • gzip_comp_level 6; – The compression level range goes from 1 to 9 where 1 is the least compression (fastest) and 9 is the most (slowest). The higher you set this number, the higher the load but how smaller the compressed files. 6 is a good value to start with.
  • gzip_proxied any; – This configures how requests coming from a proxy should be handled. Using any means enabling compression for all requests.
  • gzip_types text/plain text/html text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript text/x-js; – This tells nginx what file types to compress (text/html is always compressed). As Javascript files might have different file types on each server, I have included several possible Javascript MIME types (the same goes for XML).
  • gzip_buffers 16 8k; – This assigns the number (first number) and the size of the compression buffers (second number). The default is gzip_buffers 4 4k; or gzip_buffers 4 8k;, but I have increased it to make sure that big Javascript or CSS files are compressed as well.
Static file caching

To further increasing loading times we can enable static file caching (or browser caching). This will set Expires and Cache-Control HTTP request headers to the files you enable. Using this will allow the client’s browser to cache the files for the amount of time specified by the expires tag inside the location block of code.

location ~* \.html$ {
	expires 7d;
}
location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|mp3|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)(\?ver=[0-9.]+)?$ {
	access_log off; 
	log_not_found off; 
	expires max;
}

I use these settings. This will cache HTML (i.e. the actual webpage) for 7 days and files with the extensions listed for “max” time. max sets browser cache expiration time in the far future (i.e. Thu, 31 Dec 2037 23:55:55 GMT and Cache-Control: max-age=315360000). You can easily change this to the time you want (e.g. 30d = 30 days = 1 month).

Finishing up

After you have adjusted the settings to your liking, never forget to reload or restart NGINX.

service nginx reload
service nginx restart

You can use the curl command on unix/linux/mac to see the full headers for a request. Here is an example of the full headers NGINX is setting for the JvdC logo image after using expires headers.

# curl -I http://jvdc.me/assets/logo_jvdcme_light.png
HTTP/1.1 200 OK
Server: nginx/1.4.7
Date: Sat, 19 Apr 2014 13:27:27 GMT
Content-Type: image/png
Content-Length: 2892
Last-Modified: Sun, 13 Apr 2014 18:04:26 GMT
Connection: keep-alive
ETag: "534ad1aa-b4c"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Accept-Ranges: bytes
What’s next?

Now you can start creating your website! If you are following the guides here on JvdC.me and you are looking to install WordPress, you will definitely need PHP. You can find the full tutorial on how to install PHP5 here.

Leave a Comment.