Introducing Blender: Making it Easier To Build Fast Sites

Last night, Chris Griego and I pre­sented at Refresh Dallas about our research into web site per­for­mance and the effect that front-​end archi­tec­ture can have. We’ll be post­ing the slides soon, so be sure to sub­scribe and check back. We also intro­duced Blender, a soft­ware tool we have been work­ing on that makes it easier to develop faster sites. Blender is like Ant or Make for the front-​end; it is a com­mand line util­ity that aggre­gates and mini­fies your CSS and JavaScript files using the YUI Com­pres­sor. We built Blender as a Ruby Gem so it can be easily installed on any lat­form.

The Blendfile

The Blend­file is a YAML con­fig­u­ra­tion file that tells Blender what output files you want to create using which source files. Blender has a gen­er­ate argu­ment that will scan your work­ing direc­tory 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 Blend­file format and figure out what files you want to minify, you can do some­thing 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 addi­tional tricks up its sleeve. There’s an option to append cache busters to URLs found in your CSS. Another option is to con­vert these URLs into data URIs, embed­ding the ref­er­enced files within the CSS itself.

Contributing and Future Development

Blender is licensed as open source soft­ware under the MIT license, and we wel­come con­trib­u­tors. Blender is approach­ing 1.0 and we are espe­cially look­ing for people to test and file bugs in our bug tracker on Light­house. Instruc­tions for installing Blender can be found on GitHub, which is host­ing our repos­i­tory. Feel free to clone and/or fork it to submit patches, we could def­i­nitely use the extra help. Check out our roadmap for future devel­op­ment and feel free to open a ticket to sug­gest new fea­tures. Finally, you can follow the devel­op­ment on Twit­ter.

Tools for Measuring Performance

• IBM Page Detailer
• HTTP­Watch
• Fire­bug
• YSlow

Resources for Performance Issues

• Steve Soud­ers Blog
• YAHOO Per­for­mance Rules
• High Per­for­mance Web Sites by Steve Soud­ers