How To Minimize Your Javascript and CSS Files for Faster Page Loads | Hacker News Reader

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

maxkiesler.com

16 pointschaostheory11 comments

I've always had an instinctual resistance to using lots of outside building blocks unless there was a real compelling reason. Now, it sounds like using javascript libraries like scriptalicious causes performance problems. Did I read this right?

Also, I understand the need for obfuscation, but to improve page load speed? How?

Yes you read it right. Anything you load into the browser, both in terms of size and additional http requests, is a performance hit.

Obfuscation helps improve performance speed by making the variables as small as possible while avoiding name collisions. In practice this probably means a file full of one-letter variables, instead of things like elemResult

Every byte that is in your Javascript that has to be downloaded to the client is another millisecond or more of response time. This is the reason why I wouldn't use huge honking JS libraries unless I was really sure I needed them (call me old-fashioned). Interestingly enough, looks like there is a case to be made for package libraries, where you download one file and it explodes into both the CSS and JS part of your app. Makes sense to me, although I've never tried it.

Smaller variables to have less going down the line? Sounds like striking out the pitcher to me.

One of my constant struggles has been where to build HTML that has to be built on the fly, server or client? On the server, lots more bytes to ship down the line but less javascript to run once it gets there. On the client, 10% as much data to send, but then lots of javascript to run to assemble the HTML. Anyone else ever struggle with this problem?

I don't know what that reference means, but welcome to web app optimization.

There are a couple of apps that can convert any HTML into their dynamic counterparts. You can also do some XML/XSLT/XHTML stuff, or you can load and pre-cache in the background, which might be your best bet. Depends on your architecture and what you are trying to accomplish. I've used all of the above. I'm sure there are lots more options.

Sorry. In major league baseball, the pitcher is often a terrible hitter, easy to strike out. "Striking out the pitcher" means doing the easy thing that almost anyone can do instead of focusing on the real problem (in the baseball analogy: striking out the good hitters).

"Every byte that is in your Javascript that has to be downloaded to the client is another millisecond or more of response time."

How many people still use 1KB/s net connections?

It was rhetorical. I didn't do the math. So sue me :)

I used YUI compressor with langpop, which has a big chunk of javascript:

http://journal.dedasys.com/articles/2007/11/07/yui-compresso...

if you're using rails, just use the asset packager plugin. it's awesome. and gzip your javascript and css -- use mod_deflate if you're using apache. that's all you really need. and mod_expires, if you want to get an 'A' grade from the yslow firefox/firebug extension.

I could be wrong but with rails 2.0 it's built-in - so no more need for bundling plugins once it's out (unless you want javascript minfication)

Excellent resource. Thanks.

Reply on news.ycombinator.com