Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

up vote 3 down vote accepted

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.

share|improve this answer
    
Thank you. There are different page.css files for certain sections/pages. The conditional IE6 rule makes sense to keep the combine (hope it does not affect too many other older browsers) and the alternative stylesheet seems to make sense for a printable view (although I do not believe we offer this). –  Metalshark Aug 16 '10 at 10:51
    
In that case if the page.css files are large and contain significant differences you might want to keep them separate, otherwise I'd try and merge the rules into the main one if you can. Some info on conditional comments: en.wikipedia.org/wiki/Conditional_comment - so just wrap your IE print stylesheet with <!--[if IE 6]> link tag here <![endif]--> . Other browsers just see the HTML comment, which they ignore. –  Tim Fountain Aug 16 '10 at 10:55
    
@Metalshark, "...the alternative stylesheet seems to make sense for a printable view (although I do not believe we offer this)". Regardless of whether you offer this explicitly, several mainstream browsers (eg. Firefox, Opera, IE8) give the user the ability to switch between alternative stylesheets. eg. In Firefox your users will be able to View > Style > Print. –  w3d Sep 7 '10 at 9:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.