With websites and web applications becoming increasingly complex, having thousands of lines of Javascript and CSS split over many files, it is important to ensure your CSS and JS files are being sent to users in the most efficient manner.

There are a number of steps involved in providing assets to clients efficiently. This entry covers one of them: combining and compressing. The primary aim is to reduce the number of (HTTP) requests made to the webserver while serving assets and to reduce the bandwidth consumed in delivering them. In the simplest form, we do this by combining all our CSS and all our Javascript into single files, compress the text by removing redundant whitespace and comments and/or running code optimisation routines, and finally send them gzipped. The latter takes place, if supported by the end-user, to further compress the files when they’re sent over the wire from the webserver to the end-user.

We could do all this from the very start of developing a new project, but this introduces great pain into the development process. It’s nigh on impossible to debug combined code compressed to a single line of text, and a massive headache to manage and work with in multi-developer situations under revision control. So, in this case, compression and combining—“combressing” perhaps!—should always take place just before code is put into a production environment, leaving development with fully commented, uncompressed code. Thus ‘combressing’ (I’m going to patent it) should be scripted so that it’s a simple one-click process to push these special live-only assets to live servers.

1. Combine files to a single file
2. Compress files using our method of choice
3. Configure our webserver to send the files gzipped
4. Modify the codebase to make development easier

Combining

The first step, combining, is a simple process. On Linux boxen, we use the cat command and on Windows we can use the copy command. Both are roughly equivalent commands. Note that the process is identical for both CSS and JS, bar the file extension.

Combining on Linux (.sh)

We con_cat_enate all files together at once and push the output to one file ‘tmp.js’.

Combining on Windows (.bat)

We copy each file on to the previous and push the result to one file ‘tmp.js’. Note that each line must copy the previous tmp.js to the next file, and then save to tmp.js again. As ever, Windows makes life overtly verbose for the developer.

Compressing

I choose to use the Y!UI compressor as it tends to produce the best overall compression results in combination with gzipping, while being a lot less brutal in actual code optimisation routines (for javascript) and being able to compress CSS too. Other options for javascript exist, such as /packer/ and JSMin. Your mileage may vary!

The following commands are from a Linux script, but are identical for Windows except directory slashes should be \.

Compressing JS:

Compressing CSS requires just a change to the type flag:

At this point there should be two files, a combined.css and a combined.js, You should note a marked difference in file size between the uncompressed files and the finished version.

Reducing Bandwidth Consumption with gzip

This part isn’t essential, but it helps a great deal and gzip-encoding is supported by most modern web clients. Even after combining and compressing, you can see anything from 40%-60% reduction in bandwidth consumption per file! For example, employed on beardscratchers.com, 22KB of javascript drops down to a tiny 6KB!

Naturally this comes with a little bit of processing overhead as it’s performed on-the-fly, so beware of using it on everything. It’s somewhat of a topic all of its own, so I’d like to point you towards my del.icio.us gzip+compression page, which will be updated with the most useful resources I find on the subject. Currently the best reading is at:

• Gzip Your Minified JavaScript Files
• The Definitive Post on Gzipping your CSS

Easing the Pain of Development

How can we make this easier to deal with? Is there one fire-and-forget method for this? The answer is no. In my experience, the best practice is twofold:

• Script the combining and compressing, and make it part of your deployment process. On personal projects I use a simple bash script and run it while my FTP client fires up. While professionally it’s employed into the build processes, and checked for errors (yui compressor returns parser errors).
• Modify your web site/app code so that it conditionally loads the CSS based on the hostname or some other flag indicated by the environment/configs.

By example, I’ve modified my Textpattern templates here to conditionally load CSS based on the hostname aided by the aam_if_host plugin.

My master.css contains a list of @import statements, importing all the separated CSS files during development.

This is only a brief overview; it can get quite complex when you’re dealing with conditional comments for CSS, loading CSS for individual browsers (these shouldn’t be combined), or wish to implement lazy/on-demand loading of Javascript. But hopefully it’s a good starting-point for improving the efficiency of serving CSS and Javascript on the web.

• Filed in web and javascript under css,javascript,yui,compression,optimisation,textpattern
• Add your comments...
• Publish this entry:
  • del.icio.us
  • Digg
  • Ma.gnolia
  • Reddit
  • TwitThis
• Permanent link to this entry: Compressing CSS and Javascript with Y!UI Compressor

Last year’s inaugural Field Day festival in London’s Victoria Park left many an attendee with a bitter taste in their mouth. A fantastic line-up, beautiful weather and great location, spoilt by massive queues for bars and toilets and pretty dodgy sound across the stages. This year, the organisers ensured us that these problems would be solved…

Oh, Field Day! You were so close!

The bars were much, much better; no need to make the choice between seeing a band or missing the entire set queuing for a few beers. By the way, festival-organisers take note: cans > plastic glasses for speed, convenience and spill-free factor. Nice one. But the toilet situation is still a disaster zone. People drink… people pee. That is the way things are. 30 minute queues to use portaloos is just silly. That said, for the guys, it wasn’t bad. Stage times… err… what’s when, and where? The cancellations of one or two bands appears to produce the sort of chaotic, truly random reordering that many mathematicians and programmers spend lifetimes trying to understand and achieve. And the sound still isn’t much to shout about. In fact, shouting at the main stage came with the risk of drowning out the band onstage.

But enough with the negativity!

Festivals are about enjoying music and Field Day – “London’s psychedelic Summer fete” – is nonetheless a gem in the British Summer Festival calendar, packing another great set of acts into an unfortunately grey August Saturday. It’s a shame we weren’t lucky with the sunshine this time, but hey, when the music’s good it’s a moot point. At least it gave me the change to air out the wellies before Green Man next weekend.

Highlights

Emma Pollock

A leisurely morning sleeping meant I didn’t reach the festival site until around 2 o’clock with a plan to catch Tunng on the Homefires stage. This stage, tucked away near the main entrance and compered by Adem, is home to the quiet’n‘folky side of of Field Day. Courtesy of the upturned scheduling, I instead happened across ex-Delgados singer/guitarist Emma Pollock as my introduction to Field Day 2008.

Without any idea of who I was seeing, it was a very welcoming set of lively indie-rock that reminded me a little of Howling Bells – who I’d incidentally missed earlier on in the day, just less of the noir. Pollock is quite a beguiling lead, with a friendly stage presence and a voice that keeps you listening. The music is just a little too tame to really make a lasting impact. Still, one to investigate on record as I think they offer more than came across.

http://www.emmapollock.com/

Tunng

Aah, Tunng. You can’t go wrong with Tunng, and I’ve yet to find someone who hasn’t like them on first listen. Even with a post-birthday hungover (so we were told), they’re a treat to hear. The great thing about live Tunng is how the intricately recorded records are given new life outside the constraints of the record player. Electronic sounds pop and purr out from places you hadn’t previously heard, and vocal harmonies are afforded much more presence when you see the group working together. Again on the Homefires Stage, it was turning out to be the-place-to-be.

One standout track, of many, was Soup (from 2007’s Good Arrows), if only for Mike Lindsay’s cock-rock gesturing during the guitar solo – distorted acoustic, headbanging, with one foot raised on the foldback wins. And Jenny Again – one of their best from Comments of the Inner Chorus. A darkly tender story of an eloping girl and her lover, and what might have been. Just lacked enough volume on the tweeting-birdcage toy to make it a perfect performance.

http://www.tunng.co.uk/

Jeffrey Lewis

I’d not had the pleasure of seeing Jeffrey Lewis live before, but I had heard good things of the man. Not going in with any expectations, I was completely won over. Both hilarious and intensely creative, Creeping Brain – with brilliant hand-drawn storyboard as accompaniment – and a song about accosting Will Oldham on the L-Train (Williamsburg Will Oldham Horror) were definite highlights of the festival. I’m still surprised it’s possible to write such a song about the Bonnie Prince.

http://www.thejeffreylewissite.com/

Les Savy Fav

It was tricky decision; Efterklang at Homefires or Les Savy Fav on the main stage. The fact Homefires had been consistently good throughout the day didn’t help. But as much as I like Efterklang, the Les Savy Fav live experience is something one cannot miss. After all the quiet music, I desparately needed something a bit more raw.

Forcing our way to the front, my fellow festival-goers and I squeezed ourselves into a cosy spot down the front in preparation for the ensuing madness. If you’ve not been to a Les Savy Fav gig before, it’s difficult to explain what happens. And that’s because there’s no way to know quite what’s going to take place. Essentially it involves singer Tim Harrington disappearing in and out of the crowd, be it in a romper suit, pirate suit, jumpsuit, fully-clothed or not (in the space of one set) to the sound of heavy indie/art-rock/punk music. He’s one of the best showmen around, and powered by a super-tight band they produce a quality show.

At this point, the rain was starting to get a little more intense, and it couldn’t be more appropriate. Harrington appeared on stage, dressed in a raincoat, with a bundle of ‘lost festival shoes’ and proceeded to distribute them among the crowd. And soon after, the first strains of The Equestrian (from 2007’s Let’s Stay Friends) started to sound and I recalled Harrington’s speech at the start of the last Les Savy Fav show I saw – we should forget about the past and the future and only think about now, free ourselves for the moment. The heavens properly opened for the first time in the day, and it was a truly glorious moment. Soaking wet, pogoing aplenty, carrot missiles [from the earlier carrot-eating contest, no less], comedy underpants and all kinds of mess. It made the whole day worthwhile.

http://www.lessavyfav.com/

King Creosote

There’s a little danger of attaching stereotypes to a Glaswegian singer-songwriter with a guitar – it’s going to be dour and depressing Scottish folk. But no so. King Creosote was a nice closing memory of the festival. Although some of the Scottish-isms were lost of me (and I expect much of the shandy-drinking Southerner crowd) the simple comic tale of Ladedadeda Dadedum Dadedum, with The Pictish Trail accompanying, brought a smile to my face and with it a neat balance to the intensity of Les Savy Fav.

http://www.kingcreosote.com/

And so, with an overriding need for a bit of warmth and home comforts, forgoing Foals, Simian Mobile Disco and the remaining acts of the day, it was off to the awesome Palm Tree – the only way to end Field Day. Complete with gold lamé wallpaper, a live ratpack band and a local boozer atmosphere, it’s a worthwhile visit if you’re in the area.

I have high hopes for the next Field Day [assuming there’s still enough cash floating around this time next year] and I highly recommend getting yourself a ticket too.

• Filed in music and live-music under field day,tunng,emma pollock,les savy fav,jeffrey lewis,king creosote,efterklang,london,festival
• Add your comments...
• Publish this entry:
  • del.icio.us
  • Digg
  • Ma.gnolia
  • Reddit
  • TwitThis
• Permanent link to this entry: Field Day 2008 : Who rocked the party?