Javascript and CSS - Compress and Caching

Question

I have a single huge minified JavaScript file (ditto for CSS). I am looking for some optimization in terms of speed of download and caching. I want to set the expiry headers for both these files such that with only 2 HTTP calls I get them (and until I change their version number in the URL) want them to be cached. My question is -

1. Where do I set expiry headers? Do I need to set it as part of response to each request? Or do I need to set it in the web server settings?
2. How do I compress these files (JS and CSS)? Where and how do I specify it? Is it normal .zip or .tar.gz compression? If so would the normal browser at the other end unzip it and use those scripts?
3. Can it be possible to put both the JS+CSS in a single file, minify and compress it? So that I can get by with a single HTTP request? Would this work? My guess is not, since JavaScript runs by <script> tag and CSS runs by <link> tag. But still, could this line of thought be explored? Maybe one could use Javascript itself to dynamically insert CSS into the DOM after it loads. But what kind of impact will this have on the page load. Since browsers apply CSS to DOM before any Javascript execution.

Any help, suggestions are welcome...

Answer 1

First off, you're already on the right track using a version number in the URL. (I assume it's not in the query string, but in the actual resource path.) V. smart.

Answers to your direct questions:

1. In your web server configuration.

2. In your web server configuration; you should have the option to enable gzip compression, at which point with modern servers it Just Happens(tm).

3. Yes, but you probably don't want to. You can embed CSS inside a JavaScript file as a bunch of string literals and then output a style element when the page loads (not via document.write, that would kill your apparent page load performance, but via DOM methods). But that would be a problem if JavaScript is disabled on the client. :-) There might be rendering delays as well, and in any case, you're probably not gaining enough to make the complexity worth it.

Other things to consider:

• If your site sets cookies, you want to avoid serving the JS and CSS from a path that the cookie will be sent back to, because the presence of the cookie in the request can defeat some caches. That's why you frequently see these sorts of resources loaded from a different domain or subdomain.
• Look at JS and CSS minifiers, if you haven't already -- you know, things that remove unnecessary whitespace, that kind of thing.
• Look at using a CDN for your JS and CSS if you're this concerned with speed. They're a lot less expensive than they used to be. This is a fun place to look at them: http://cloudharmony.com/speedtest So far (it's early days) I've been very impressed with MaxCDN's $39.95 intro (normally $99).

Answer 2

This is a topic I'm really interested in, just started to look at compression and speeding up my websites/saving bandwidth.

I've found this article pretty useful and interesting: