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).

Results

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.different browsers. This scripts removes all the colorspace information from PNG files, including gAMA chunk. If your browser misinterpreted this data before, it might look different. Check here for more information (thanks ).

How to do it with Django and Fabric

Grab the newest copy of our scripts fabfile.py and fabconfig.yaml from GitHub . If you didn’t have it installed – follow the instructions in our previous post here.

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

http://sourceforge.net/projects/pmt/files/pngcrush/1.7.16/pngcrush-1.7.16.tar.bz2/download

make
sudo mv pngcrush /usr/local/bin/

http://www.ijg.org/files/jpegsr8c.zip

./configure
make
sudo mv jpegtran /usr/local/bin/

http://yui.zenfs.com/releases/yuicompressor/yuicompressor-2.4.6.zip

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

    static_relative_dir: static

• 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

    s3_bucket: blog-post-test

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 = ''
        S3_SECRET = ''

Usage

The usage is very simple.

Combine your JS and CSS files and minify them.

fab deploy_media

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):

  {% if debug %}
    
    
    
    
    
    
    
  {% else %}
    
    
  {% endif %}

We’re preparing a real gem for our next post, stay tuned and cheers for reading that far! Pony appreciates it.

Follow us on Twitter or grab our !

(–) Tomek Kopczuk

Feature image photo of a real men’s tool by