Do IE Conditional Comments slow down page load?

Question

I've been having the "CSS hacks" vs "Conditional Comments" argument enough times lately that I thought I'd throw this question out to the Stack Overflow community.

<!--[if IE]>
 <link type="text/css" rel="stylesheet" href="ie-specific.css" /> 
<![endif]-->

The main argument against using IE Conditional Comments seems to be that you're adding additional HTTP requests on each pageload, thus slowing down the display of your page. What I haven't been able to find are any real-world metrics either proving or disproving this statement.

Leaving aside the argument of maintenance of multiple stylesheets vs. one stylesheet (though that's a valid discussion in and of itself), has anyone here done any testing to determine just how much of a slowdown using Conditional Comments gives you, or be able to point me in the direction of any stats anyone else has collected?

Answer 1

This isn't really about conditional comments per se, it's like conditional compilation.

An IE browser will see your page as including

<link type="text/css" rel="stylesheet" href="ie-specific.css" />

(with a tiny bit of extra processing to evaluate the comment condition).

A non-IE browser will just see a comment there.

So the only potential performance impact is that IE browsers will need to evaluate the conditional comment condition (which is going to be negligible), and then is going to include another CSS file. While of course other browsers just see the generic file and completely ignore the comment.

The question then is what the pros and cons of serving IE a (say) 5Kb standards-compliant CSS file followed by a (say) 2Kb "hacks" file, and having everyone else get just the 5Kb file; vs serving everyone a 7Kb file with dodgy CSS in it. Depending on various factors including network speed and latency, the size of the file, the number of resources used on the page overall, etc., this may or may not make a noticeable impact on performance in the IE case (it will unquestionably be faster for non-IE user agents).

As with all performance questions, you'll have to profile your code in your environment to see what the impact is - but as a general guideline I would expect the impact to be negligible for IE, a small performance increase for all other browsers, as well as the fuzzy feeling being able to write "proper" CSS in your actual file and then fix IE separately.