Performance, serve all CSS at once, or as its needed?

Question

As far as I know, these days there are two main techniques used for including CSS in a website.

A) Provide all the CSS used by the website in one (compressed) file B) Provide the CSS for required by the elements on the page that is currently being viewed only

Positives for A: The entire CSS used on the site is cached on first visit via 1 http request
Negatives for A: if it's a big file, it will take a long time to load initially

Positives for B: Faster initial load time
Negatives for B: More HTTP requests, more files to cache

Is there anything (fundamental) that I am missing here?

Answer 1

What's better?

1. Writing one css file
2. Writing more css files

What's better?

1. Tracking, keeping 1 css file updated
2. Tracking, keeping more css files updated

What's esier?

1. Making decisions what to insert into one css file
2. Deciding what to put in every of your css files

What's the cost of generating each individual css file compared to generating one global css file.

Answer 2

Even a largish CSS file, gzipped, is tiny compared to a lot of other things (like images, movies, etc.) that get downloaded. The only real reason to break up CSS into separate files is to swap in special rules to make certain browsers behave (I'm looking at you, IE).

Answer 3

There is no A or B, it's always a trade-off between the two. For example: you'd want the front-page to load as quickly as possible, so you only request what's necessary. For the following pages you request the remaining CSS. A total of 2 requests.

In essence, you're creating packages/groups of related CSS. By dynamically combining and compressing these packages, you can create a maintainable structure of files. This also enables you experiment with the best combination of speed, performance, requests and bandwidth...

This whole story also applies to JavaScript files, since the same trade-offs can be made.

Answer 4

Profile it. It depends on the way your users use your site.

If it's a web application and your users are likely to interact with it a lot and see most of the layout you designed, you probably want to use a single CSS which is loaded once and then stored in the browser cache. The first time overhead is negligible in this case.

If most of your users come with a cold cache and just look at two or three pages, separate CSS files will probably improve their experience.

You can't tell without having a look at what the users actually do.