Monday, November 5th, 2007

How To Minimize Your Javascript and CSS Files for Faster Page Loads

Category: Performance

<p>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

Related Content:

Posted by Dion Almaer at 7:05 am
14 Comments

++++-
4.1 rating from 34 votes

14 Comments »

Comments feed TrackBack URI

Just use the free tool at http://www.packer.it

Comment by Mega69 — November 5, 2007

Sorry, is http://www.packed.it/

Comment by Mega69 — November 5, 2007

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.

Comment by Andrea Giammarchi — November 5, 2007

YUI works for CSS too.

Comment by Boris — November 5, 2007

MAN F@#K YOU ANDREA GIAMMARCHI!!! I TOLD YOU NOT TO GO THERE….BUT U DON’T LISTEN

Comment by ANDREA HATER — November 5, 2007

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)

Comment by Andrea Giammarchi — November 5, 2007

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.

Comment by Markus — November 5, 2007

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.

Comment by Charles — November 5, 2007

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.

Comment by Andrea Giammarchi — November 5, 2007

Minifying JS and CSS is one thing. Reducing the number of requests for external JS and CSS files will probably bring an even larger performance increase.

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

Comment by Andrea Giammarchi — November 5, 2007

@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?

Comment by Andrea Giammarchi — November 5, 2007

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.

Comment by Robert — November 5, 2007

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 :-)

Comment by Andrea Giammarchi — November 5, 2007

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/

Comment by alexobjelean — June 26, 2010

Leave a comment

You must be logged in to post a comment.