We stumbled upon a strange SSL/CCS Issue with IE6 and IE7 when we were tuning our homepage Alice. Found was this issue with Pat Meenans Pagetest and HTTPWatch. I am a little bit puzzled and still have not drawn conclusions yet. So here is what happened. For those not familiar with Pats Tool: Dark green is DNS Lookup, Orange is TCP Connection Setup, pink is SSL Handshake, Green is Time-to-first-Byte, and Blue is Data being received.
As the page is done via a Content Management System, we picked one page, which is pretty much representative how all the pages are constructed. The page we picked was this Rechnung, as it is delivered via SSL like almost all of the pages, but does not yet need authentication.
At roughly 5 seconds it has completed that, starts to render, and downloads all the images. So far so bad.
So we started to optimize and first concatenated all the 30 CSS files to just 5, one being IE7fixes.CSS. This gave us some improvement. You can see that a lot less CSS objects get fetched at the beginning. (The first 4 items are actually newly introduced Redirects due to an Single-Sign-On Service. Yikes.)
And the result is this:
And this seriously puzzled me. What we see here are at
Line 1 the Redirects and the download of the Basepage.
Line 3-7 A wonderful waterfall of two connections, with a full TCP and SSL Handshake for EACH CSS FILE…
Line 6-7 The last two SSL Connections are then reused for fetching all the images.
So what is so special about these CSS Files??? HTTP Headers are the same for all of them. Both, Request and Response Headers are HTTP/1.1 with the Header Connection: Keep-alive. And as you can see, for the images it works fine. Why not for the CSS assets?
I did a Wireshark trace and saw, that it is actually me (the Browser) who closes the connection. After receiving the data, I am sending a TCP FIN,ACK. Why does it do so?
So I tested a little bit more and found out, that this behavior is visible with IE6 on XP and IE7 on XP and Vista.
Tests with IE8 on XP showed a totally different picture. Here I got:
Now this is fine. You can see in
Line 3-4 Opening up 2 new connections to the second, static, domain to fetch the CSS files
Line 5-8 Opening up 4 more connections reaching the maximum limit of 6 connections per domain to fetch all the other assets.
THIS is how I expected the whole thing from the beginning. So I wonder what is going on with IE 6 and IE 7…?
As a final note I tried to fetch the page with IE7 via plain HTTP, no SSL. This is to some degree possible, but leaves me even more puzzled. Here it is:
Line 2 are the SSO Redirects via HTTPs
Line 3-4 are the CSS files, where it reuses the connection via Plain HTTP, and later on some images
Line 5-6 is fetching two CSS Images via SSL. These connections are NOT reused.
Line 7 fetches some more images
Line 8-13, 15 again a perfect two-connections per domain waterfall, where again CSS Images are pulled via SSL, NOT reusing these connections.
Line 14, 16 some more Images a fetched via plain HTTP, reusing the connection
So we have here with Plain HTTP a reuse of the connections for the CSS Files, the CSS Images though, fetched via SSL, show again the pattern of NOT reusing the connection.
Currently my assumption is, that IE6 and IE7 show this broken behavior, if the following is true:
MULTIPLE CSS Files, served from a DIFFERENT Domain, when fetched via SSL.
A final test would be, to put the CSS files (maybe even the CSS Images?) back on the first domain, and see what happens.
I searched a lot, but was unable to find any known bug for this. If this is indeed a bug and I am not totally misleaded with this analysis.
Any comments/help would be highly appreciated, if this is a known bug, a mistake by myself, or a workaround exists.
P.S.: In case you wonder: Some of the traces were taken from the UK, some from the US. So do not wonder about the different times to fully download etc.