Enable GZIP for CSS and JS files on NGINX server for Magento

Question

I need to enable gzip compression on nginx server. As I have observed from firfox firebug NET tools, I have found that html file are gzip compressed. But Not the javascript files and CSS files.

I have already check Mime.types and nginx configuration file /etc/nginx/ngnix.conf and not found any issue. still not able to see the css and javascript Gzip Compression. My NGINX.conf entries are as below

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;

Answer 1

This is an working config that I currently use in production.

http://pastie.org/10870547

gzip on;
gzip_disable "msie6";

gzip_comp_level 6;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_proxied any;
gzip_types
    text/plain
    text/css
    text/js
    text/xml
    text/javascript
    application/javascript
    application/json
    application/xml
    application/rss+xml
    image/svg+xml;

This config was tested via tools.pingdom.com.

Answer 2

You can find example configuration from the html5 boilerplate code.

  # Enable Gzip
  gzip  on;
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_min_length 1100;
  gzip_buffers     4 8k;
  gzip_proxied any;
  gzip_types
    # text/html is always compressed by HttpGzipModule
    text/css
    text/javascript
    text/xml
    text/plain
    text/x-component
    application/javascript
    application/json
    application/xml
    application/rss+xml
    font/truetype
    font/opentype
    application/vnd.ms-fontobject
    image/svg+xml;

  gzip_static on;

  gzip_proxied        expired no-cache no-store private auth;
  gzip_disable        "MSIE [1-6]\.";
  gzip_vary           on;

Answer 3

If some of your files are compressed and some are not, then your gzip is working but you might have missed definition in gzip_types. For example, javascript files may return in headers any of following type:

• application/javascript
• application/x-javascript
• text/javascript

To compress all javascript files, all three definitions should be included in gzip_types.

You need to check in response headers what content-type is returned for such an uncompressed file and then make sure it is also defined in gzip_types.

Answer 4

Are your gzip entries within the nginx configuration "scope" that js,css,etc. assets are being served? I ask because if you're using some sort of a framework, sometimes there are different location {...} blocks that handle html requests vs assets.

Also when you're testing in a browser, make sure you do a hard refresh to force the server to give you a "fresh copy" of whatever you're looking at.

Finally, you can use gzip_types * to allow anything to be gzipped. Perhaps someone else can chime in if this is a good practice or not.

Answer 5

To compress SVG, this line is correct:

image/svg+xml svg svgz;