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

MagentoNginxGzip

Magento Problem Overview


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;

Magento Solutions


Solution 1 - Magento

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.

Solution 2 - Magento

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;

Solution 3 - Magento

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.

Solution 4 - Magento

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.

Solution 5 - Magento

To compress SVG, this line is correct:

image/svg+xml svg svgz;

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAnantView Question on Stackoverflow
Solution 1 - MagentoVern BurtonView Answer on Stackoverflow
Solution 2 - MagentoKoray GüclüView Answer on Stackoverflow
Solution 3 - MagentolubosdzView Answer on Stackoverflow
Solution 4 - MagentoMike TView Answer on Stackoverflow
Solution 5 - MagentokaradayiView Answer on Stackoverflow