I’ve been waiting for the time to give Burt Beckwith’s fantastic UI-Performance plugin a proper post, but it looks like it’s not going to happen any time soon so I thought some of you might find this tip for getting the plugin to cache font files, along with images and css, useful.

Brief Background

For those who are unaware of the UI-Performance plugin, it provides a set of easy-to-implement performance improvements for Web applications, based on the “14 rules” from Steve Souders of Yahoo!. These involve such things as compressing content by zipping, setting expires headers, moving Javascript to the bottom of pages and more.

Easy to Implement

The plugin is extraordinarily easy to use in an existing Web app and I was up and running within a couple of hours of downloading – with dramatic performance improvements to my page load times.

Extending to Embedded CSS Font Files

As with many current websites I’ve been using embedded fonts and it wasn’t immediately obvious how to get the UI-Performance plugin to configure font files for caching, however a bit of experimentation showed that it was, in fact, dead easy!

There is a configuration property for the file extensions the plugin will set up for caching and all you need do is add the font suffixes “woff”, “ttf”, “svg” and “eot”, so that your Config.groovy has the line:


uiperformance.imageExtensions=['gif', 'jpg', 'png', 'woff', 'ttf', 'svg', 'eot']


And that’s it! The same principle applies to any other file types you may be referencing in your CSS (whatever they may be!).