Search code examples
nginxgzipamazon-cloudfront

Nginx - Amazon Cloudfront - Gzip Doesn't work for JS files


This is our Nginx configuration with regards to Gzip:

        gzip on;
        gzip_disable "msie6";
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 5;
        gzip_min_length 256;
        gzip_buffers 16 8k;
        gzip_http_version 1.0;
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/png image/gif image/jpeg;

Our JS files are served by Amazon Cloudfront but they are not compressed, even after invalidating the Amazon cache, clearing Wordpress cache and restarting our server.

Response header gives:

curl -I https://d3opmxxxxnoy.cloudfront.net/wp-content/cache/min/1/def188074382933064c622c86c835c7f.js
HTTP/1.1 200 OK
Content-Type: application/javascript
Content-Length: 473913
Connection: keep-alive
Server: nginx
Date: Mon, 16 Apr 2018 16:45:55 GMT
Last-Modified: Mon, 16 Apr 2018 15:45:54 GMT
ETag: "5ad4c532-73b39"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
X-Cache: Miss from cloudfront
Via: 1.1 63db28xxxx087abd41a1692.cloudfront.net (CloudFront)

How could we know that this is an Nginx or Amazon configuration issue? Not sure where the problem lies.

Update: We have performed another test on our own domain using this tool: https://checkgzipcompression.com

and it still says the JS file is not compressed. So this is an Nginx issue - but not sure why it happens as my conf seems correct.


Solution

  • The response header gives:

    Content-Type: application/javascript
    

    This is the MIME type that needs to be included in your gzip_types statement in order to compress these types of response.

    Your existing value contains many similar MIME types, but not one of them is an exact match for what the server actually sends.

    See this document for details.