Not bad?

Thanks!

  • Blog
  • About

Bits about Django performance, scalability and deployment

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

Results

Inc website loading times, mean from 15 samples

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

Comments

  • Daniel Srb

    “Remember to check how your images look on Windows. PNGs might look great on Mac, but may have messed up colors on Windows.”

    This is not very precise. Problem is called “gamma”. http://hsivonen.iki.fi/png-gamma/

    Long story short: remove gamma value from your PNG entirely and everything will wokr as it should.

    Gamma value was inserted automatically by Photoshop until CS3.

    • https://askthepony.com/blog Tomek Kopczuk

      Yup, that’s true. And this script actually does exactly that thing – removes gAMA and other chunks. Thanks, I’ll rephrase that.

  • Anonymous

    you might want to add an option to automatically append a datetime stamp to the files, for those that use proxy caching heavily or have users where being told ‘hold down shift, and click reload’ boggles their mind.

    • https://askthepony.com/blog Tomek Kopczuk

      We actually use a different tool to do that job, as this feature needs to be integrated into the Django-backed project as well (to link to the newest versions at all times). Or it could make the neccesary changes to the files itself, but I don’t like applications messing around with my templates, tends to turn nasty. 

      • dominique papin

        which tool do you use to timestamp your static assets ?

        • https://askthepony.com/blog Tomek Kopczuk

          It’s our friends script which I do not have his permission to share unfortunately.

About this blog

Ask The Pony is a weblog, where various members of our team share knowledge about Django.

Make lightning fast apps that scale.




Are you a designer?

SnapRuler
our delicious screen ruler for Mac

”

If you’re a full time designer or developer, get ready to have your mind blown.
Harrison Weber, The Next Web

Recent Posts

  • Fabric script to deploy minified, combined and otherwise optimized media.
  • Setup a complete Django server, deploy, rollback – all in one powerful script.
  • Getting Django on Heroku prancing 8 times faster.
  • Django and PostgreSQL – improving the performance with no effort and no code.
  • How to send a proper unicode encoded email using Python 2.7

Copyright © 2011 Blade Polska

  • Blog
  • About