How to: Gzip compression of CSS and JS files on S3 with s3cmd
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
#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
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)
If you are facing any issues or have any thoughts about this tutorial, don’t hesitate to comment or fire me a tweet