Enable Leverage Browser Cache and Gzip Compression in Nginx

Learn how to enable the robust Browser Cache and extreme Gzip Compression to speed up loading of the website or blog using Nginx web server snippets on LEMP Stack.

The website speed is an important factor for ranking our website in search engines. While there are multiple ways to optimize the loading speed, we will be focusing on two important factors: Browser cache and Gzip compression.

Unlike other caching techniques, browser cache helps to cache the static files of our website or blog in the user browser. Whereas the Gzip will help in compressing the file size and load the files faster.

In this article, we will cover how to enable and leverage browser cache with Nginx as well as enabling the Gzip compression at the server-side to reduce the overall file size.

If you’re following us, this is the eighth article and video in the #CloudServer series. I previously posted about the HTTP2 protocol & Nginx Security snippets.

Let’s dive into enabling browser cache and gzip compression —

Enable Leverage Browser Cache in Nginx

We are going to use the Nginx configuration file for adding this browser caching capability. The Nginx is a powerful web server that helps in caching dynamic content as a static page to a user.

Let’s create a file name browser-cache.conf under the /etc/nginx/snippets/ directory and paste below snippet in the same.

Create Browser Cache Configuration file

# Don't cache appcache, document html and data.
  location ~* \.(?:manifest|appcache|html?|xml)$ {
  expires -1;
  }
# Cache RSS and Atom feeds.
  location ~* \.(?:rss|atom)$ {
   expires 1d;
   add_header Cache-Control "public";
   add_header Pragma "public";
  }
  location ~* \.json {
   expires 1d;
   add_header Cache-Control "public";
   add_header Pragma "public";
  }
# Caches images, icons, video, audio, HTC, etc.
  location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff|woff2|ttf|eot|otf|pdf)$ {
   expires 1y;
   add_header Cache-Control "public";
   add_header Pragma "public";
# Comment out these lines if you wish to record access/error logs for static files.
   log_not_found off;
   access_log off;
  }
# Cache CSS and JavaScript.
  location ~* \.(?:css|js)$ {
   expires 1y;
   add_header Cache-Control "public";
   add_header Pragma "public";
   access_log off;
  }
  location ~* \?sccss {
   expires 1y;
   add_header Cache-Control "public";
   add_header Pragma "public";
   access_log off;
  }
# Don't record access/error logs for robots.txt.
  location = /robots.txt {
   log_not_found off;
   access_log off;
  }

Create Browser Cache Configuration file

Next, we will include this call snippet in our /etc/nginx/sites-available/default virtual host nginx configuration file under server { ... } block.

include snippets/browser-cache.conf;

We have now defined the age of the browser caching the static files for maximum time. Next, we will enable Gzip compression to compress the files that will improve the load time.

Gzip Compression in Nginx Web Server

Now that we have added the expire header for Nginx to leverage the browser caching, let’s add Gzip compression rules.

Gzip compression works exactly like the file compression in our system. It will help in reducing the file size of the webpage as well as static content. This will enhance the website files to load faster from the webserver to the client browser.

Just like the browser-cache.conf file, lets add the another file name gzip.conf under the same folder structure /etc/nginx/snippets/.
Editing Gzip Compression Configuration file

# Enable Gzip compression.
  gzip on;
# Disable Gzip on IE6.
  gzip_disable "msie6";
# Allow proxies to cache both compressed and regular version of file.
# Avoids clients that don't support Gzip.
  gzip_vary on;
# Compress data, even when the client connects through a proxy.
  gzip_proxied any;
# The level of compression to apply to files. A higher compression level increases
# CPU usage. Level 5 is a happy medium resulting in roughly 75% compression.
  gzip_comp_level 2;
# The minimum HTTP version of a request to perform compression.
  gzip_http_version 1.1;
# Don't compress files smaller than 256 bytes, as size reduction will be negligible.
  gzip_min_length 256;
# Compress the following MIME types.
  gzip_types
   application/atom+xml
   application/javascript
   application/x-javascript
   application/json
   application/ld+json
   application/manifest+json
   application/rss+xml
   application/vnd.geo+json
   application/vnd.ms-fontobject
   application/x-font-ttf
   application/x-font-woff
   application/x-web-app-manifest+json
   application/xhtml+xml
   application/xml
   font/opentype
   image/bmp
   image/svg+xml
   image/x-icon
   text/cache-manifest
   text/css
   text/plain
   text/vcard
   text/vnd.rim.location.xloc
   text/vtt
   text/x-component
   text/x-cross-domain-policy
   text/javascript;
# text/html is always compressed when enabled.

Gzip Compression ON configuration

Save and close the gzip.conf file and move to virtual host default. Just like we have included the browser caching configuration, define this file under the same server { ... } block directive.

include snippets/gzip.conf;

Browser Cache and Gzip Compression include in Nginx Configuration

That’s it, you can now close the configuration file and restart the Nginx Web server to make the changes live.

Use the below command to test the above changes of Nginx configurations via SSH.

nginx -t

And finally, restart the Nginx using below command

sudo service nginx restart

nginx configuration test and restart web server

Video of Browser Cache and Gzip Compression

Watch how to enable leverage browser caching and also gzip compression for static files in the Nginx web server.

I hope you liked the video, please subscribe to our YouTube channel.

What’s next in #CloudServer series?

Now that you’ve learned about browser cache and Gzip compression, next we will set up the server-side caching using Nginx FastCGI Cache. Nginx Caching is the best technique to compress and serve the dynamic content as a static HTML file with a negligible load on PHP and MySQL server.

If you've any thoughts on Enable Leverage Browser Cache and Gzip Compression in Nginx, then feel free to drop in below comment box. Cheers!

Share
Kushal Azza
Kushal Azza
Fond of latest technologies and gadgets. I'm a digital dev and analytics consultant. Also, the geek behind this blog!

Leave a Reply

Your email address will not be published. Required fields are marked *