Based on my own experience and research, and the replies when I asked around what others use, I have listed suggested solutions below:
- A PHP library that enhances your website performance by optimizing the front end using techniques such as minifying, compression, caching, concatenation and embedding. All the work is done on the fly on demand.
- CSS Crush
- Concats and minifies CSS files.
- Django Static Management
- Django compressor
- YUI Compressor
- Google Closure Compiler
- YUI Compressor for .Net
- A .NET port of the Yahoo! UI Library’s YUI Compressor Java project.
- Packer for .NET
- Microsoft Ajax Minifier
- A tool to concatenate and compress CSS files.
Other tools or approaches?
Please let me know, by writing a comment, if you want to suggest other tools, so I can update this list and keep it as accurate and useful as possible!
I like Sprockets: http://getsprockets.com/
This is basically how I minify my files. I run the Java port of YUI Compressor on one of my web servers, and wrote two PHP scripts. The first PHP script takes URIs of JS files as input and outputs the contents of the minified concatenation of those files (using the Java YUI Compressor). Obviously, this script is hosted on the same server as the YUI Compressor Java port.
Then, whenever I make some JS/CSS updates on another server, I just run another PHP script (on that server) which fetches the abovementioned page, passing the JS URIs as parameters, and then writes back the resulting output to my local copy of the concatenated file.
Someone (Yahoo!? Google?) should provide a RESTful API, which does just this — takes URIs of several CSS or JS files, and returns the minified, concatenated file.
People could then very easily create scripts in their language of choice to 'build' JS/CSS, i.e. concat them, like I do.
I personally prefer csstidy for CSS files, since it does much more than just minifies CSS code.
Concatenation is simply made from the Terminal via CAT. I usually name my JS- and CSS-files with beginning number to be able to run "cat *.js > all.js" on a folder.
I prefer it to keep simple since it's an easy task to create cronjobs if needed.
django-compress has support for various minify backends (yahoo, jsmin etc) . Its very easy to make your own if you just want plain concat.
Hmm… Any reason why you left out Google Closure Compiler (Java)? Which works just as well in Ant builds, and I found it to be reliable enough – with some 10% improvement over YUI Compressor.
In fact, I believe jQuery migrated to using that (or at least that's what GitHub latest commit to "build" folder says"
Thanks for your comments!
That sounds like a good approach! Do you prefer PHP script over Ant tasks for doing something like this?
And yes, it would be nice with such an API in general; however, Google do offer such an API for Google Closure Compiler.
Thanks for the tip!
Right, missed that one!
I added CSSTidy as well to the list. The Terminal approach is absolutely quite easy, but overall I'm looking for the easiest solution for large teams where as much automation as possible is available.
Great, thanks for bringing AssetPackager up!
I also like the new feature of Rails 2.0, which sounds like something that should be available as default of all web development frameworks.
It's great that it supports variable back-ends. However, in these solutions (although concatenation isn't difficult), I prefer if it's part of the solution as well.
And yes, I heard that about jQuery as well, which sounds very promising!
There's also the SmartOptimizer for PHP: http://farhadi.ir/works/smartoptimizer
I made a little PHP compression app last year -> http://github.com/danielstocks/phpcompressassets. Though, since then I've switched from PHP to Python/Django and i started using Google closure compiler instead.
Lim Chee Aun,
Nice, thanks for the tip!
Thanks for sharing, it is always to see different peoples' solutions – are you still maintaining that one?
Also, with Django and Google Closure Compiler, which approach do you use with it?
More sources for the Django-part of your list, most of them better than the one you supplied. Add them to the list! 🙂
django_compressor, reads your HTML and compacts what’s there
Via a simple management command
JS compression with a template tag
Oh, and also, GREAT LIST 😀
Bah, that got badly formatted… Your comment preview behaves very diffently than what shows up when posting. Please add a break after each link above… 🙁 (I tried a list…)
Great, thank you for your additions!
Well, above the comment fields it states the allowed elements in comments, and lists aren't one of them. The preview was just trying to be nice… 🙂
I know that the <a href="http://code.google.com/p/minify/" rel="nofollow">Minify project is looking into using JSMin+ and several other projects are already using it.
It does have some rough edges (it uses a lot of memory when processing large JS files and is slower than f.i. JSMin), but it does have more potential since it is based on an actual JS parser and therefor does not impose strict syntax rules. I still hope to add variable-name minification some day.
CSS minification on the other hand is no rocket-science though; a simple set of some regular expressions is quite effective for that
Good work! I'll add it to the list.
[…] Via: Robert Nyman […]
Very nice, thank you for sharing.
Just a tip for anyone working on these – regular expressions rock!
Thanks! Personally, though, I prefer tools that are offline and can be incorporated in build scripts and other scenarios with automation.
And I agree, regular expressions can be truly powerful. 🙂
CSScaffold seems nice, although it's a shame it doesn't support file concatenation out of the box – added it, though. Juicer is actually already in the blog post. 🙂
Nice JS minifier. Worth a look if you live in a .Net world.
Scott Gu talks about it here
CSscaffold does support file concatenation. It actually offers two ways to do it out of the box– via URL or by overriding @imports at compile time, automatically parsing into a single file.
Thanks for the tip!
I missed how you could that – but if it does, great to hear!
Thanks for the list! Very helpful!
… although I do find it highly ironic that an article which lists ways to make your files smaller has the longest article title known to man! 🙂
And yeah, the title length is a bit ironic – I wanted to cover as much as possible in the title. 🙂
Hey Robert, hey guys,
I’d like to throw my own CSS-JS-Booster into the mix. It is priliminary meant as stand-alone PHP-library that you hook into your PHP5-programming. At the same it also works as WordPress-plugin.
It tries to automate as many performance optimizing steps related to CSS and JS embedding as possible, in realtime (with aggressive client and server-side caching – still sensible to any version changes).
In contrast to most other tools the Booster embeds any image referenced in CSS as dataURI. This has the same benefits as spriting but doesn’t have the downsides like not being able to throw image-formats like 24bit-PNG + JPG into the same sprite or having to have empty areas or needing to calculate background-positions. It’s a no-brainer and what’s even cooler is the fact that this also works for IE6 + IE 7! Now coming to what the Booster does exactly:
For CSS these steps are:
* combine multiple CSS-files resulting in HTTP-requests going down
* optimize and minify CSS with CSSTidy
* Embed any CSS-images smaller 24KB as data-URI or MHTML (for IE <= 7) – this is really special!
* Split the output back into 2 even files that can load in parallel
* GZIP-compress the resulting CSS
* Have browsers cache the result as long as it remains unchanged
* If IE6: Issue a JS-command to fix background image caching behaviour
For JS these steps are:
* combine multiple JS-files resulting in HTTP-requests going down
* GZIP-compress the resulting JS
* Have browsers cache the result as long as it remains unchanged
+ GZIP-compresses the page calling those files.
Putting CSS-JS-Booster aside, people wanting to squeeze out every possible byte of optimization-potential should have a look at the (semi-free) tool WEBO Site SpeedUp. What they do is really extreme, but they are working with a lot of passion on their software.
And last but not least there is aptimize as a commercial solution targetted at all bigger players (visitor-on-your-site-wise).
Nice, thanks for the suggestion with CSS-JS-Booster – I have added it to the list. Like you mentioned, it would be nice to add Google Closure Compiler to it in the future.
Thank for putting the Booster on your list. Regarding the annotation for the missing minification: this only holds true for JS.
CSS is being fully optimized/minified with CSS-tidy (not using the most extreme and dangerous but instead the most style-safe settings)
Sorry, missed – will change that right away.
PS: BTW, the Gravatar-pictures do not work…
Great work – I have updated the list! Also, thanks about the Gravatars, I messed it up in a recent code upgrade.
I used Django compressor for my Django website.
It’s very easy to use and I love the “no-settings” approach.
However be careful as by default CSS files are not minimized.
Also be careful not to try to minimize dynamically generated JS as it will try to minimize it each time it’ll detect some changes.
Thanks for the advice!
For ASP.NET, I really like CombineAndMinify. Very easy to add to your ASP.NET site and tons of features (not just combine and minify).
Great, thanks for the tip!
Thanks! I saw that, but updated the post incorrectly. It is changed now.
In ASP.NET you can use StyleManager to combine and compress your CSS. It’s a free server control.
Nice overview, thanks for Packer for .NET link, exactly what I need 🙂
Thanks for the tip!
Glad it was of use to you!
I recommend to use Granule Tag lib the http://code.google.com/p/granule/
code sample is:
var dp = new goog.ui.DatePicker();
I recently came across this PHP tool for CSS minification, concatenation, variables, vendor-prefixing, data-URIing, and more. Haven’t had a chance to use it yet, but it looks very promising.
Thanks for your tips!
I’ve added them to the post.
Anyone know of a method for concatenating and compressing js on a local machine ie. not through a server. I’d rather compress it while writing it as I do with sass via sass or compass watch. I don’t see the point of having a server do the work when you could simply deploy the compressed file to the server. I know how to do it manually with cat an yui in a terminal bash but it requires having to specify the files in the bash file for each project.
Have attempted to use Sprokets and other Ruby based packagers but cant find any terminal commands (ie. they assume your project is a Ruby).
What I’d love is a packager that is on par with sass where you can watch a directory locally and it will compile to compressed assets as you edit save the original files – sass works like a dream for css dev
Oh yeah and I know sass is Ruby but it doesnt have to be a ruby server/project ie. you can just run in terminal and you site can be and serverside tech or static html
sorry wish I could edit, that should have read: can be ANY serverside tech
Sorry, I don’t know of any tool like that off the top of my head.
Right, that’s why I listed just preprocessing and concatenation of files. However, like you say, there are lots of ways to use it.
Great article! Fancy doing an update :)?
It depends on what you mean. 🙂
Not the full research, no, but I think/hope the list should be fairly accurate.
In case you are curious about what the performance benefits are for doing this today, I just wrote up a blog post that goes into some detail about it
Thanks for letting me know!
[…] images to reduce file size without compromising image quality and resolution. There are many online services to help wih the minification process, but I’m partial SquishIt. Another common issue on […]
iam using minify it works fine if we need multiple js files at the same time but , if i need js files at differnt level between the html code and now if i use minify then i got error it says this and that variable is not defined ?
That is something you have to ask the people behind Minify about.
Compression is great, but it’s also recommended to concatenate your files into one to cut down on the number of HTTP requests.