Monday, November 5th, 2007
How To Minimize Your Javascript and CSS Files for Faster Page Loads
Category: Performance
Max Kiesler continues he topic resources with a wrapup of how to minimize your Javascript and CSS files for faster page loads.
He links to resources that discuss:
- JavaScript and CSS compression
- Just JavaScript compressions
- JavaScript and CSS compression with Java
- JavaScript compression with PHP
- JavaScript and CSS compression with Rails
- JavaScript compression with Rhino and Maven
- Compression research
4.1 rating from 34 votes
Just use the free tool at http://www.packer.it
Sorry, is http://www.packed.it/
Yes Mega ;-)
… and please stay tuned, packed.it is going to be usable off-line with every server-side supported language: C#, PHP and Python (both psp and wsgi) – making even more simple personal site projects creation, caching and managment.
YUI works for CSS too.
MAN F@#K YOU ANDREA GIAMMARCHI!!! I TOLD YOU NOT TO GO THERE….BUT U DON’T LISTEN
Nice comment above … however my post was just because Max Kiesler (and Ajaxian before) didn’t talk about both JS and CSS compressed in a single file (every compressor He talks about doesn’t it).
So You now know that’s possible (and I can’t understand why anyone shouldn’t go there … so please tell me where’s the problem)
I can recommend http://code.google.com/p/minify/ which I’ve used successfully in several projects already. With mod_rewrite things get as easy as and it automagically a) combines and b) compressed the files and you end up with a single request.
I use the same for CSS, however usually I’ve only one CSS file anyway (vim folding helps :) and other CSS files are IE conditinal comments CSS so they make no sense to be combined anyway.
I’m with Andrea, I prefer being able to compress both JS and CSS into a single file. Neat work you have over there @ packed.it , but I’m happy using Minify, which also was not listed.
Minify is good too but if it’s based on original JSMin PHP porting it will have a lot of problems with some library (I partially rewrote JSMin fixing problems in mymin project and CSS parser is totally different from JS one)
packed.it has different goals, JS + CSS in a single file is just one of them.
packer style compressors aren’t always the better choice, expecially when You would serve 200Kb of compressed library with or without CSS.
Old PCs, with a compatible browser, should run even slower if they’re connected with a fast dsl line because every page that will contain a packer/packed code will require to recreate it and this operation is not always so fast (… however, with ES4 it should be really fast!!!).
Since not every browser can save or cache big sources using a Gear like application, code parsing is not a good solution as gzip or deflate is but at the same time mod_rewrite plus runtime gzip compression should stress too much our servers.
That’s why I prefer runtime parsing free solutions as packed.it is (and will be off-line too) and I hope Minify project doest it too and in an efficient way.
Yes Daniel, packed.it reduce, for example, 10 JavaScript files and 5 CSS files into a single one, allowing JS disabled browser to download alternative CSS version …. so, each page, one single request for every client dedicated file. That’s why I called them first Web 2.0 optimizer and not “yet another JS or CSS optimizer” :D
@Daniel … P.S. your solution is the same used by minify, the same used from different applications Max Kiesler talked about in His post.
However, I agree with You, 2 requestes instead of N is a good thing but one request instead of 2 is even better, don’t You agree?
Recently I wrote minimalistic compressor for JS an CSS (separated so far) in JSP ( http://blog.aujava.com/?p=29 ). I guess it will take somewhat about 30 minutes to develop new version that compress everything in one file.
Robert, You don’t need only a minimalistic compressor to compress both JS and CSS … and it’s quite obvious, anyone could create them in more than 30 minutes (don’t You never debug?) … the point is that any common compressor does it, so at least my idea is original as its implementation :-)
Though this is an old post, I think it may be useful for somebody looking for the solution for resource minimization problem to use wro4j open source project: http://code.google.com/p/wro4j/