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).

http://www.webpagetest.org/result/110131_R0_28C6/


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:
http://www.phpied.com/conditional-comments-block-downloads/

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
http://www.webpagetest.org/result/110131_0P_d5a762c80c90f511f186eddf94a09421/

Empty CC at top, inline JS
http://www.webpagetest.org/result/110131_2A_ed9db737f34800c5733a96394490fb1d/

Empty CC below the inline JS, inline JS
http://www.webpagetest.org/result/110131_EP_aefd3351e27a1e3f0012b7e2b2f53e7c/

No empty CC, inline JS
http://www.webpagetest.org/result/110131_05_2e8b6ba2e6054f7c9d2417a7a2f9097c/
> Leaving out the empty CC has no effect: nothing is blocking (huh?)

Empty CC at top, inline JS, 'old' CC for non-IE browsers
http://www.webpagetest.org/result/110131_B9_37ac85e5192bda3de3e7da3f5d259520/

Empty CC at top, inline JS, 'old' CC for non-IE browsers, inline JS at top of BODY (aka: original code)
http://www.webpagetest.org/result/110131_BW_83571588db6e8a19277d089580c290f2/
---

Have fun optimizing!

Aaron


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.

http://www.webpagetest.org/result/110131_NW_2AXN/

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.

Mattias


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

You're welcome.