Comments on: Maximizing Performance with Compression and Combination

By: hat27533

hat27533 — Tue, 24 Jun 2008 19:10:46 +0000

So you want automated compressed JS/CSS files in your builds check out my blog http://nnbs.blogspot.com/ its simple to achieve.

By: Frederick Townes

Frederick Townes — Fri, 22 Dec 2006 13:25:00 +0000

Great Post Dion, these techniques are tried and true. And Kae thanks for that input as well – very valuable. I’ve been dynamically building CSS and JS files for some time, but now I’m getting more into the benefits of caching and more often than not, unless the JS deals with navigational functionality I always opt to use external files – since most of our sites are going for multiple page views during a session. Sometimes we use a combination of PHP and mod_rewrite to achieve the caching effects we’re going for.

By: Alex Russell

Alex Russell — Thu, 21 Dec 2006 20:42:23 +0000

Anjan,

If you’re using Dojo, just make a custom build. It combines all your code into a single file and doesn’t require that you change the way you include it in your page (unlike all of these other methods). As for compression, there are servelet filters, or if you really care about performance, host these (mostly) static resources on a separate server/port/domain with an HTTP server that’s got gzipping built in (mod_deflate with disk caching should do what you need).

Regards

By: Alastair James

Alastair James — Wed, 20 Dec 2006 23:47:29 +0000

We have been using this technique at http://www.mapsack.com. One big advantage is that it is possible to version each ‘build’ of the combined javascript, thus stopping any browser caching issues. Basically, every time our combined JS files changed, their version number gets incremented, i.e. comb/explore-23.js. We automatically update the pages to request the most up to date version, therefore when a change is made, all clients will download the new version (as the filename is different).

By: anjan bacchu

anjan bacchu — Wed, 20 Dec 2006 20:41:57 +0000

hi there,

great!

Is there a way(tool/script/task) to do it automatically in the java world where most of us use ant? It will be nice if someone can demonstrate it for the Petstore application. I wish sun takes an initiative in this so that a lot of Java developers can incorporate this in their process. It will be a bonus if eclipse and netbeans have a tookit for the web development modules to automatically enable this.

Thank you,

BR,
~A

By: Ulises Enrico

Ulises Enrico — Wed, 20 Dec 2006 20:33:43 +0000

hi, im from argentina. In our company we have serious problems with website performance, our app have 500kb of JS, a lot of CSS and images. One of my task was find the way to improve performance, so we did that,
with javascript files:
1Âº join all js into one file
2Âº use custom_rhino.jar to compress de js (no comments, rename with shorter names functions, vars, etc)
3Âº delete all \n and \r (one line file)

with css files:
1Âº join all css files into one
2Âº remove comments and \n \r

with images we use only 1 file for all images, all images are joined in one file, and with use css position to use it in app

and all that data its cached, and send it compressed to the browser (http 1.1)

we obtained an excellent improve doing that.
bye

By: Mikhail

Mikhail — Wed, 20 Dec 2006 18:04:57 +0000

I use the compression of CSS/JS stuff myself, though it happens that I have several files to load. Does that PHP script know which file to load in what sequence? :)

By: David Davis

David Davis — Wed, 20 Dec 2006 18:04:31 +0000

We’ve been doing this on vox from the beginning. It works pretty well. We also use another technique to bootstrap the javascript before the page finishes loading. Ads and images don’t slow us down. :)

By: Eric Miraglia

Eric Miraglia — Wed, 20 Dec 2006 15:58:52 +0000

See also Ed Eliot's excellent PHP-based js/css combinator script, which is now inclusive of JSMin. The overall approach here is very consistent with what we're advocating at Yahoo and with YUI -- but Dion, your point is an interesting one about the challenges of determining a logical caching strategy that leverages modular, reused css/js chunks and relies on them being downloaded only on the first use. Modularity and aggregation/concatenation seem irreconcilable in many implementations.

By: Ryan Breen

Ryan Breen — Wed, 20 Dec 2006 14:01:45 +0000

Yeah, that’s a great tip. JavaScript source file loads are a serious bottleneck in the browser because they are handled serially, so anything that increases the performance of JavaScript is a huge win.