19

I would like to implement GZIP compression on my site. I've implemented it on IIS and the HTML page is compressed successfully as expected.

Now the issue is with CSS and JS file, which I get from Amazon S3. They are not at all compressed. I wanted to compress them too.

Please guide me how to do it. Sharing links for it help me a lot.

Update: I've added Meta Header on S3 files as "Content-Encoding:gzip", now its showing in Response header. Still the file size is same and no effect of Particular CSS in page. And i can't even open it in browser. Here is the [link][1] of particular css.

Thanks

John Rotenstein
  • 165,783
  • 13
  • 223
  • 298
RaJesh RiJo
  • 3,872
  • 4
  • 18
  • 44

2 Answers2

17

Files should be compressed before being uploaded to Amazon S3.

For some examples, see:

FedericoCapaldo
  • 1,270
  • 17
  • 28
John Rotenstein
  • 165,783
  • 13
  • 223
  • 298
  • Thanks John, I understood. Can u plz share me if u have links to compress CSS and JS files in windows? – RaJesh RiJo Aug 05 '15 at 05:24
  • 1
    Just search for "windows gzip" and you'll find some compression utilities. – John Rotenstein Aug 05 '15 at 12:44
  • 1
    @RaJeshRiJo I recommend using 7zip for Windows http://www.7-zip.org/download.html – Virgil Shelton Oct 09 '15 at 01:28
  • 2
    This solution is now expired. Since [Dec. 2015, Cloudfront can now compress files on the way out](http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html). – J_A_X Jul 21 '16 at 03:11
  • 2
    Cloudfront won't compress S3 files unless you add a CORS configuration to the bucket to expose the Content-Length header. See http://ithoughthecamewithyou.com/post/enable-gzip-compression-for-amazon-s3-hosted-website-in-cloudfront for details. – Robert Ellison Dec 10 '16 at 02:28
  • Please include the examples inline, as links may become stale. – Daniel Goldberg Nov 21 '20 at 10:22
7

If you use CloudFront in front of your S3 bucket, there is no need to manually compress HTML ressources (CloudFront will compress them on-the-fly). Please note CloudFront only compress in gzip (no deflate, brotli) and only CSS / JS / HTML (based on content-type). See https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html#compressed-content-cloudfront-file-types . To make it works, you have to forward some http headers from CloudFront to S3 (see doc).

If your S3 bucket have resources not supported by Cloudfront (generic "binary/octet-stream" mime type, like "hdr" texture or "nds" ROM), you need to compress them by yourself before uploading to S3, then set the "content-encoding" http meta on the resource. Note that only browsers supporting the gz encoding will be able to download and decompress the file.

If you don't want to compress the file one-by-one by the hand, you can use a Lambda function

  • triggered on each PUT of an object (a file) in the bucket
  • if the file is not already compressed and if compression is usefull, then replace the original uploaded file with the compressed version
  • set http headers content-encoding to gzip

I wrote a GIST for this, it can inspire you to create your own process. See https://gist.github.com/psa-jforestier/1c74330df8e0d1fd6028e75e210e5042

And dont forget to invalidate (=purge) Cloudfront to apply your change.

JayMore
  • 463
  • 4
  • 14