Single big cache-able CSS vs page-specific small CSS snippets

Question

Right now my CSS files look like this:

Then I have a php snippet that looks like this:

<?php $Compress->folder(Configuration::get('Public').'/style/',
                        '.css',
                        Configuration::get('Public').'/style.css'); ?>

This minimizes all the css files stored in the directory public_html/style/ (shown in the picture) and creates a file in the directory /public_html/ called style.css. It is run only when needed, although in development, always.

Then I just include the big file: <link rel="stylesheet" href="http://newfutureuniversity.org/style.css" type="text/css" media="screen" >.

I was focused on php development, and now I'm actually starting to develop the design of the site and would like to optimize it. As far as I understand it, the less files the user has to download and the smaller they are, the better (thus my join-and-minimize class). However this raises other question, when there are few page-specific CSS files. Why would my main page have to load the form CSS file? Or the form the main page one? As far as I know, there are 3 main options:

1. Download everything the first time.

The first time the user visites the site, he downloads the whole minimized css file. First time it will be slow, but every other visit it will be much faster. Also it's much easier to configure.

2. Download the common code the first time and then page-specific code.

Every visit has a medium speed; the first one slightly slower and then the next ones a bit faster but still not the best. First time user downloads 2 files, and the common one is cached for next visit.

3. Every page has different CSS file.

The CSS of each page is the needed CSS plus the page specific, so it cannot be stored in cache. Faster than first time of 2. but slower later on.

---

I am JUST guessing that it comes down to how many pages the user visits and the amount of page-specific code. If the average user visits 1 or 2 pages, you'd want the 2nd or even 3rd option. However, if the user visits 20 or 30 pages of your site, then you want the 1st option.

So, which method would be better for both the server load and the user latency and why? The page I'm working on needs to be small, since mobile access and remote location access is expected.

Answer 1

Personally, downloading one, large CSS file is preferable to incurring multiple HTTP requests, especially if your web page is being viewed via a browser that only allows two simultaneous HTTP requests per domain. Plus, the style sheet would be cached for subsequent requests.

Answer 2

I guess the Download everything the first time, my arguments:

• Even a big (>50KB) CSS file won't hurt your browser, with proper minification and compression it can be reduced to ~15KB or less
• You/we are probably already including bigger files (jQuery unminified uncompressed :~70KB) and you/we don't complain