3

I recently started working with a large code base with many (15-20) js requests per page. I'm tasked with optimization and performance improvement of these sites.

I've been using tools like Google's PageSpeed and Yahoo's YSlow in conjunction with WebPageTest.org's tests to determine a baseline speed of the site and area of improvement. I'm curious if there are some standard or best-practice solutions for concatenation and minification of JS and CSS files.

I watched: http://www.youtube.com/watch?v=30_AIEhar-I and the first 20 minutes were really good at hammering mod_pagespeed as a good target.

I'm currently considering mod_pagespeed with a YUI compressor and perhaps a sprite generator on top of it all.

What are some good tools that I may have missed or things that I should be concerned about with my current build?

Edit: It should be noted that this is one page of many (possibly hundreds) and the site receives a new build every two weeks so being able to automate this concatenation and minification is a must, I can't just do it once and call it good.

Edit 7/30/2012 - I spent some time looking at different tools, it's hard to say which ones are the best but at this time, not very many people use mod_page speed.

Closure is more widely used for certain, but even that is lacking. It seems the optimal way to do this is to just use a plugin with YUI.

There are other places that suggest Packer but it seems that many believe the smaller file sizes are eliminated by the necessity to unpack them on the client machine. This stackoverflow response is a good read regarding these types of tools.

Community
  • 1
  • 1
J V
  • 92
  • 9

1 Answers1

2

Google's Closure Compiler is quite nice for concatenating and minifying JavaScript. It has the added bonus of linting your code for you when you compile, it will remove dead code, and it can also perform compile-time type checking if you include type hints in docblocks.

In certain cases, the dead code removal feature gives Closure a huge advantage over other minifiers... for example, think of cases where you include a library, but only use about 10% of the functionality. The other 90% can be removed if you compress the library along with the rest of the project.

As for CSS, YUI compressor is probably your best bet if you want something fancy. Otherwise, you could just concatenate the files together using cat and take the hit of a few extra bytes from whitespace.

Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
  • Part of the reason I chose YUI was that the documentation was very good and it was very resilient. Is there a way to automate the closure compiler? I started by looking at one page on the site, but unfortunately, the hundreds of pages that are attributed will need to be stripped down like this, so automation is a must. – J V Jul 11 '12 at 23:42
  • Closure is a Java executable (jar) that runs on the command line, so automating it is just a matter of calling it from a build script or similar. Their [online documentation](https://developers.google.com/closure/compiler/) is pretty good, about what you'd expect from Google. Take a look at the "advanced optimizations" feature; that's where things get interesting. – Dagg Nabbit Jul 12 '12 at 14:59
  • Interesting, I'm going to investigate this a little more. Thank you for the direction! – J V Jul 12 '12 at 20:50