WebPagetest Forums
Conditional comment CSS blocking download - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Discuss Test Results (/forumdisplay.php?fid=4)
+--- Thread: Conditional comment CSS blocking download (/showthread.php?tid=519)

Conditional comment CSS blocking download - mattiasw - 01-31-2011 11:14 AM

I don't think this is the usual conditional comment blocking but I could have missed something. Looking at the results below, should the CSS file block the rest of the page like that? I do have an empty conditional comment before the CSS links and the inline scripts are also placed above. Note that I don't have a main CSS, each IE version gets all styles in their own single file (and one file for the other browsers).


RE: Conditional comment CSS blocking download - aaronpeters - 01-31-2011 09:13 PM

Hi Mattias,

I'm sure you've read Stoyan's blog post on this topic:

It actually does not show the expected behaviour for your specific case: you have all LINK tags inside conditional comments, and Stoyan's test pages always have the first LINK tag outside conditional comments.
And so, IE8 just might behave differently.

I took Stoyan's test page as a base and copied in the conditional comments you use for non-IE browsers. My code editor did not make the conditional comments green, and that is a signal for invalid code.
So I checked in the HTML5 Boilerplate template what the correct syntax is for a conditional comments that targets all non-IE browsers and it turns out that it differs from your syntax.
In the Boilerplate: <!--[if (gt IE 9)|!(IE)]><!--> <link href="file.css" rel="stylesheet"> <!--<![endif]-->
Yours: <![if !IE]> <link href="file.css" rel="stylesheet"> <![endif]>

I do think the syntax in the Boilierplate is favourable to yours. See the Wikipedia page for more info: http://en.wikipedia.org/wiki/Conditional_comment

In summary, after testing several variations of my page on Webpagetest.org, these are my conclusions:
- the position of the empty CC in your page is ok
- the syntax for the non-IE CC is ok (but again, the Boilerplate syntax is favourable
- the empty, inline JavaScript at the top of the BODY is causing the blocking !!!

I think you overlooked that empty JS. It blocks and now that you read this you're probably thinking "yeah, right, I knew that!".

FYI, here are the WPT results for the variations of my test page:
I was lazy and used one page the whole time and made changes to it as I went along. So the one currently online is the latest used and basically has your (blocking) syntax.

Empty CC at top, no inline JS

Empty CC at top, inline JS

Empty CC below the inline JS, inline JS

No empty CC, inline JS
> Leaving out the empty CC has no effect: nothing is blocking (huh?)

Empty CC at top, inline JS, 'old' CC for non-IE browsers

Empty CC at top, inline JS, 'old' CC for non-IE browsers, inline JS at top of BODY (aka: original code)

Have fun optimizing!


RE: Conditional comment CSS blocking download - mattiasw - 02-01-2011 12:27 AM

Hi Aaron,

Thank you for spending so much time on my problem! You are, of course, correct. I've removed the empty inline script and the blocking is gone.


I'm embarrassed to say that the inline script was a left over from some restructuring and I was so focused on the head and the conditional comments (which I knew could cause blocking in other cases) to notice it.

I will also change the syntax of the conditional comment for non-IE browsers. Actually, you made me realise I completely forgot about IE>=9 which should also use the "non-IE" CSS.

Thanks again for all your help.


RE: Conditional comment CSS blocking download - aaronpeters - 02-01-2011 06:35 PM

You're welcome.