62

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;
Elnur Abdurrakhimov
  • 44,533
  • 10
  • 148
  • 133
Anant
  • 3,047
  • 2
  • 27
  • 33
  • If you choose the ever-popular [Fooman Speedster](http://www.magentocommerce.com/magento-connect/fooman-speedster.html) then JS and CSS are gzipped anyway. – clockworkgeek Sep 28 '12 at 12:50
  • @clockworkgeek..Thanks !!! But I want to configure nginx, so the CSS and JS Files can be gzip compressed. – Anant Sep 28 '12 at 12:57

5 Answers5

172

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.

Vern Burton
  • 3,215
  • 1
  • 18
  • 31
  • Thanks For Reply. .I don't know .. what is the reason but this has not work for me..!! Can you explain step by step process to debug the problem or what should be the proper steps for enabling gzip compression for css and JS files.. The most surprising thing is Gzip is working for html content ie text/html MIME Types but not for CSS and JS. One more thing is that Varnish cache is also enabled on the server and Server OS is ubuntu..!! – Anant Sep 29 '12 at 17:53
  • Is your head and header hole-punched with esi tags? If they are, they would be served from Varnish. – Vern Burton Sep 30 '12 at 16:41
  • Should add svg into the answer tbh – Sammaye Feb 01 '16 at 11:32
  • Thanks! needed to remove application/x-javascript all working fine! – zaw Nov 04 '16 at 10:10
  • does this support default [gzip_types](http://nginx.org/en/docs/http/ngx_http_gzip_module.html#gzip_types) `text/html` value? – vladkras Jul 20 '17 at 07:57
  • Please note, `gzip_types` enables gzipping of responses for the specified MIME types in *addition* to “text/html”. – Andrea Rabbaglietti Feb 10 '20 at 14:52
42

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;

Koray Güclü
  • 2,857
  • 1
  • 34
  • 30
8

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.

lubosdz
  • 4,210
  • 2
  • 29
  • 43
  • This is important! All three definitions should be included in gzip_types....This answer made my gtmetrix score jump from 74% to 92% – Naweed Chougle Mar 23 '15 at 14:31
  • Thanks. Works. Will check the response header for one of my files. It looks like it doesn't get compressed. – KhoPhi May 04 '15 at 01:25
  • My browser, Firefox 59.0b5, request javascript file as type: `application/javascript`, i miss this in `gzip_types`, caused not work, after add this type, it worked now! – zw963 Feb 03 '18 at 13:44
3

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.

Mike T
  • 1,286
  • 11
  • 13
  • Can you give some examples? – karadayi Jun 11 '15 at 23:46
  • 1
    eg: location ~* .*\.(ico|gif|jpg|jpeg|png|js|css|txt|wsdl|html) { try_files $uri $uri/ /index.php; } – Mike T Jun 16 '15 at 20:45
  • 1
    Typically gzip_types * wouldn't be advisable. It may try to compress already compressed resources, or difficult to compress resources (like some images).This probably won't result in a significant space saving. Thus, it acts as a penalty simply wasting time while it gzips the resource. `gzip_min_length 1100;` directive also attempts to find this balance. – Zachary Moshansky Oct 02 '15 at 19:00
1

To compress SVG, this line is correct:

image/svg+xml svg svgz;
karadayi
  • 2,212
  • 2
  • 21
  • 36