Fabric script to deploy minified, combined and otherwise optimized media.Posted by tkopczuk on August 3, 2011
Last week we published our fabric script to quickly setup a temporary staging server and deploy/rollback easily. It has another feature – it can automatically combine and minify your js/css files or losslessly optimize image files. Switch one parameter, and your statics will be uploaded to Amazon S3 bucket (with a trick for it to be served gzipped).
Everyone will benefit from image optimization. 10% smaller image size means 10% better page loading time. But still – if you’re not doing so yet – use CSS sprite sheets, it would make a much bigger difference.
Browsers like IE 8 and Firefox (pre 5) will benefit the most, as they do not download more than a few files in parallel from one hostname. More so, you will see the difference on mobile connections – iPhone users (which can make up for 10% traffic) and laptops on 3G connections will be happier (due to TCP/IPs slow start for instance).
Why you should combine your files
We’re using Inc’s website as an example. The original site had 13 JS and 3 CSS files served from its domain. We combined the main files together in the original order to form 1 JS and 1 CSS file. Minifying them using YUI Compressor 3 gave us 60 kB smaller files. That’s 15% better.
Losslessly optimize your images
You can get your images down by about 10% in size. jpegtran and pngoptim (both free) remove the metadata (copyright information, application info) and in PNG’s case – color profiles from the files, therefore losslessly removing quite a bit of weight.
Remember to check how your images look on
Windows. PNGs might look great on Mac, but may have messed up colors on Windows.
How to do it with Django and Fabric
You’ll need boto s3 package from pip and a few utilities to minify and optimize files (namely pngcrush, jpegtran and YUICompressor). Install them to /usr/local/bin or change the utilities path in the configuration file.
pip install --upgrade -E . boto
make sudo mv pngcrush /usr/local/bin/
./configure make sudo mv jpegtran /usr/local/bin/
sudo mv yuicompressor-2.4.6.jar /usr/local/bin
In the YAML configuration file there is a few options you have to set:
- static_relative_dir – relative path to your statics directory
- bundle_and_minify – enter files to combine and their output names, as it can’t assume the correct order of scripts automatically
bundle_and_minify: static/js/pack.js: - static/js/sitewide.js - static/js/swfobject1.1.js - static/js/tabset.js static/js/pack2.js: - static/js/toolbar.build.min.js - static/js/top.js static/css/pack.css: - static/css/homepage.css - static/css/newsletterPrefs.css - static/css/styles(1).css
- s3_bucket – optional, S3 bucket if you want to use the S3 automated upload feature
Additionally, if you’d like the upload to S3 feature to work, you have to create an empty file called “s3_login_data.py” and into it enter:
S3_API_KEY = '<YOUR API KEY>' S3_SECRET = '<YOUR S3 SECRET>'
The usage is very simple.
Combine your JS and CSS files and minify them.
Combine your JS and CSS files, minify them, and upload them to your S3 bucket.
fab deploy_media +s3
Combine your JS and CSS files, minify them and optimize all the image files in your static folder.
fab deploy_media +optimize_images
You can use these two switches together.
This script will not modify any of your files. Optimized copies will be available in the same directories, with ‘.min’ stuck between the file name and its extension.
Django and debug/production versions of media
You obviously want to use nonminified and not combined versions of JS/CSS files when working on a project. There are many ways to do this, we prefer this one:
- In your Django templates use optimized versions of images (as it doesn’t hurt at all and you can see if they are rendered well).
- When using CSS/JS files, use a version corresponding to the DEBUG setting. If you’re using the Django templates (and you shouldn’t, use Jinja2 instead, see Jinja2 performance advantages):
We’re preparing a real gem for our next post, stay tuned and cheers for reading that far! Pony appreciates it.
(–) Tomek Kopczuk
Feature image photo of a real men’s tool by 60in3