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

Published on 2013-07-16
By christian fei

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

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

Where
-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```)