Combining CSS files with regards to @media

Question

We have a website where the usual speed ups from High Performance Websites and Even Faster Web Sites paid dividends.

However we have neglected stylesheets (due to the difficulties laid out below) and it has finally come round to bite us, with CSS accounting for 500ms of our 1600ms page-load (the ratio of both results is pretty consistent across benchmarks - the actual numbers portrayed here are from the most convenient benchmark we have to hand).

In parallel to making the selectors more efficient, the total number of HTTP requests has to be reduced. Here is an example (without text="text/css" charset="utf-8" for brevity):

<link rel="stylesheet" href="global.css" media="all" />
<link rel="stylesheet" href="page.css" media="all" />
<link rel="stylesheet" href="print.css" media="print" />
<link rel="alternative stylesheet" href="print.css" media="all" title="Print" />

This would appear to be a common setup (global stylesheet, per page/category stylesheet and print layout) yet we are having real troubles figuring out a workable solution due to every option having a double edged sword:

• global.css and page.css can be combined, however global.css would be downloaded again and again alongside page.css (as page.css is per category/special page) if the user kept jumping to special pages/categories and should be served on its own

• print.css file can be combined and use CSS2 @media rules, but that wouldn't work with CSS1 browsers (this site has to work with IE6)

• the version of print.css linked using rel="alternative stylesheet" media="all" title="Print" does not appear to be necessary, yet the developers have Cargo Culted it on every project without knowing what it does and we are fearful of removing it

As this seems such a common setup what have others done when faced with a similar setup?, can anyone shed some light on alternative stylesheets for print?, is there a novel approach to the above?

Answer 1

Do you have just one page.css, or are there many different versions of it for different pages and categories?

Assuming there's just one, I'd suggest:

• Combine global.css and page.css into one stylesheet. After the first request the user will have a cached version of this anyway.

• Merge your print rules into the stylesheet above using @media. You can then add a conditional comment for IE6 only to give it a working print stylesheet.

• The 'alternative stylesheet' will give supporting browsers the choice of using this stylesheet instead of the main one. In your case this appears to be an easy way of giving the user a 'printable view'. If you want to keep this in you'll need to keep print.css separate, so don't bother merging the print rules into the main file.

As I'm sure the books you linked say, you'll also want to be serving these stylesheets compressed and with expires headers to maximise the benefits.