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?