Introducing Blender: Making it Easier To Build Fast Sites

Last night, Chris Griego and I presented at Refresh Dallas about our research into web site performance and the effect that front-end architecture can have. We’ll be posting the slides soon, so be sure to subscribe and check back. We also introduced Blender, a software tool we have been working on that makes it easier to develop faster sites. Blender is like Ant or Make for the front-end; it is a command line utility that aggregates and minifies your CSS and JavaScript files using the YUI Compressor. We built Blender as a Ruby Gem so it can be easily installed on any platform.

The Blendfile

The Blendfile is a YAML configuration file that tells Blender what output files you want to create using which source files. Blender has a generate argument that will scan your working directory and build a basic 1:1 Blendfile.

css/global-min.css:
  - css/global.css

js/global-min.js:
  - js/global.js

Once you get a handle on the Blendfile format and figure out what files you want to minify, you can do something more like this:

# Blendfile.yaml for www.marbleheadllc.com
_behavior:
    _global-min.js:
        - ../_vendor/jquery/jquery-1.2.1.js
        - ../_vendor/delegate/jquery.delegate.js
        - ../_vendor/dimensions/jquery.dimensions.js
        - ../_vendor/form/jquery.form.js
        - ../_vendor/history/jquery.history_remote.js
        - ../_vendor/pngfix/jquery.pngFix.js
        - ../_vendor/validate/jquery.validate.js
        - _library.js
        - _global.js

_style/:
    _global-min.css:
        - _global/typography.css
        - _global/typography-print.css
        - _global/colors.css
        - _global/colors-print.css
        - _global/layout-screen.css
        - _global/layout-print.css

Prize in Every Box

Blender has a few additional tricks up its sleeve. There’s an option to append cache busters to URLs found in your CSS. Another option is to convert these URLs into data URIs, embedding the referenced files within the CSS itself.

Contributing and Future Development

Blender is licensed as open source software under the MIT license, and we welcome contributors. Blender is approaching 1.0 and we are especially looking for people to test and file bugs in our bug tracker on Lighthouse. Instructions for installing Blender can be found on GitHub, which is hosting our repository. Feel free to clone and/or fork it to submit patches, we could definitely use the extra help. Check out our roadmap for future development and feel free to open a ticket to suggest new features. Finally, you can follow the development on Twitter.

Tools for Measuring Performance

• IBM Page Detailer
• HTTPWatch
• Firebug
• YSlow

Resources for Performance Issues

• Steve Souders Blog
• YAHOO Performance Rules
• High Performance Web Sites by Steve Souders