Nearly two years later… :)

Yes – if each of your pages uses a different combination of stylesheets, then the stylesheet bundle for each new page will be a browser-cache miss on the first load. So yes – in some cases it will cause redundancy of downloaded styles, causing slightly more data to be downloaded.

However without the bundling, there would be at least one cache miss anyway, for the non-cached individual CSS file – and possibly multiple misses.

There’s no silver bullet, you just need to find the right balance. I’d almost always take a single slightly larger download over lots of small requests. And if you take this into account when layout out your CSS, it’s especially effective.

I request you to answer one thing that I am not able to understand.

@Eviltechie: The bundle will certainly be cached by the browser after the first load – we’re certainly not forcing every page to include all CSS and JS.

My question is as follows: A webpage A links to a1.css, a2.css, and a3.css. These are bundled into one request (http://example.org/bundle/a1.css, a2.css, a3.css). These are bundled and compressed and sent to the browser, lets say as bundle B1. The browser caches the bundle B1. The user navigates to another webpage (on the same website) webpage B, which links to a1.css, a2.css, and a4.css. In this case, all three css files are downloaded again as bundle, lets say B2, though a1.css and a2.css are already present inside bundle B1 cached on the client machine. Are we creating a bandwidth overhead??

Please answer as soon as possible! Thanks in advance!

I have created such a script for ligghtpd (using mod_magnet and lua). It can be found at here:

Faster page loads: Bundle your css and javascript with lighttpd and mod_magnet (lua)

in jsp

It seems to me that most of this effort is pointless. In almost all cases CSS, JS, and images are cached by the browser after the first view. Thus, when viewing a second page on the same site, it shouldn’t be making more requests for CSS or JS files, and should only request the images it hasn’t already cached.

That’s assuming they get as far as looking at a second page. Many people will typically be loading 3,4 or 5 tabs simultaneously, and if one of those hasn’t started rendering a usable page in a few seconds. they’ll click the ‘X’ and concentrate on the other tabs that have.

A user hasn’t received anything of value for you at that point so they have no perception of loss if they leave. That makes the first ever page load far more important than any future page load.

Even if the user knows your site but hasn’t visited for a few months (so no cached version) getting them the first page load quickly is critical to getting them to re-commit to you and not an alternative site. This is equally true whether you’re running a blog, a forum, an online store or a content site.

@bart: Also keep in mind that clicking the reload button in Firefox is different to visiting the page again – you’re telling Firefox that you want to re-download the content.

Also why do you say subsequent loads using this method won’t cache? It’s the exact same request for pages that use the same combination of files, so why wouldn’t it? If another one is added in the mix on another page you would still have to download it before it would be cached anyways, so I don’t see any difference in downloading the new bundle for that page.