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;

If you choose the ever-popular Fooman Speedster then JS and CSS are gzipped anyway. — clockworkgeek
– clockworkgeek, Commented Sep 28, 2012 at 12:50
@clockworkgeek..Thanks !!! But I want to configure nginx, so the CSS and JS Files can be gzip compressed. — Anant
– Anant, Commented Sep 28, 2012 at 12:57

Padhiyar Gaurang · Accepted Answer · 2019-05-09 19:34:02Z

174

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.

edited May 9, 2019 at 19:34

Padhiyar Gaurang

1458 bronze badges

answered Sep 28, 2012 at 17:17

Vern Burton

3,2081 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anant Over a year ago

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..!!

Vern Burton Over a year ago

Is your head and header hole-punched with esi tags? If they are, they would be served from Varnish.

Sammaye Over a year ago

Should add svg into the answer tbh

zaw Over a year ago

Thanks! needed to remove application/x-javascript all working fine!

vladkras Over a year ago

does this support default gzip_types text/html value?

|

Koray Güclü · Accepted Answer · 2015-05-04 19:57:01Z

43

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;

answered May 4, 2015 at 19:57

Koray Güclü

2,9161 gold badge36 silver badges30 bronze badges

1 Comment

tcpiper Over a year ago

thanks for text/html is always compressed by HttpGzipModule

lubosdz · Accepted Answer · 2014-07-08 20:48:41Z

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.

answered Jul 8, 2014 at 20:48

lubosdz

4,5662 gold badges34 silver badges45 bronze badges

3 Comments

Naweed Chougle Over a year ago

This is important! All three definitions should be included in gzip_types....This answer made my gtmetrix score jump from 74% to 92%

KhoPhi Over a year ago

Thanks. Works. Will check the response header for one of my files. It looks like it doesn't get compressed.

zw963 Over a year ago

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!

Mike T · Accepted Answer · 2013-12-04 15:32:30Z

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.

answered Dec 4, 2013 at 15:32

Mike T

1,29612 silver badges13 bronze badges

3 Comments

karadayi Over a year ago

Can you give some examples?

Mike T Over a year ago

eg: location ~* .*\.(ico|gif|jpg|jpeg|png|js|css|txt|wsdl|html) { try_files $uri $uri/ /index.php; }

Zachary Moshansky Over a year ago

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.

karadayi · Accepted Answer · 2015-05-23 09:50:11Z

1

To compress SVG, this line is correct:

image/svg+xml svg svgz;

answered May 23, 2015 at 9:50

karadayi

2,3294 gold badges23 silver badges37 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

6 Comments

1 Comment

3 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

3 Comments

3 Comments

Comments

Linked

Related