How to: Gzip compression of CSS and JS files on S3 with s3cmd

Published on

Let me show you how many Kilobytes you can save by compressing files with Gzip (a real world example):

gzip css amazon s3

The uncompressed/deflated CSS file weights 25.1 KB, but from the server to the client only 6.9 KB have been transferred.

Isn’t that nice?!

As an example I will use the files main.css and main.gz.css to make the process clear, but this technique can be applied on JavaScript files too.

#Gzippin’ made easy

I know how to gzip stuff on Unix OS’s, not on Windows, but the syntax is probably more or less the same.

Anyways: let’s say you want to compress the file called main.css into a smaller, compressed file called main.gz.css

gzip -c -9 main.css > main.gz.css
The flag -9 means 'highest compression'
And -c prints the output to stdout so that we can pipe it to another file (main.gz.css)

The same principle works for JS files. I couldn’t make it work for HTML files though.

#Uploading to S3

Now the steps to follow are:

  • setting the right MIME Type and Content-Encoding
  • making the files publicly accessible

It’s nothing simpler than:

s3cmd -P -m text/css --add-header 'Content-Encoding:gzip' main.gz.css s3://best-bucket-ever/main.gz.css
-P is the 'make public' flag
-m sets the MIME Type
--add-header Add a given HTTP header to the upload request (for more info ```man s3cmd | grep header```)

Easy right?

If you are facing any issues or have any thoughts about this tutorial, don’t hesitate to comment or fire me a tweet

Here, have a slice of pizza 🍕