CSS files downloaded twice in Internet Explorer with protocol relative URLs

I think we can all agree that performance of web sites matters a lot, and slow web sites are very annoying both for developers and, more importantly, end users. Therefore, we need to talk about a newly discovered problem: Internet Explorer, protocols and inclusion of stylesheets.

Steve Souders, web performance guru and all-around top bloke, writes in Missing schema double download about a performance issue. Apparently, as it turns out, when you include CSS file with the link element or @import statements, there’s a risk that the same file will be downloaded twice in Internet Explorer. Yes you read that right: twice!

The downside of this is of course multiple HTTP requests for just one file (and the latency, superfluous header info etc to go with that) and downloading double the size in kilobytes for CSS code; same file, not read from cache at all. The problem lies in using protocol relative paths to your CSS file(s), like this:

<link href="//example.com/css/base.css" type="text/css" rel="stylesheet">

That code will start at the root of the web site and from there look for a catalog named css and then a file named base.css in it. Where it fails in Internet Explorer, though, is that this asset will be downloaded twice.

Recommended ways to get around this problem is to use an absolute, root relative or location relative path to your CSS files, like this:

<link href="/css/base.css" type="text/css" rel="stylesheet">


<link href="http://example.com/css/base.css" type="text/css" rel="stylesheet">


<link href="../css/base.css" type="text/css" rel="stylesheet">

This could suck in the perspective of flexibility (e.g. different environments, mixed http and https protocols etc), but at the same time, if there’s anything you can do to make things faster in the web browser that is already far slower than the others, you should do it.

Post updated with corrections, where I had misunderstood parts in the original version
Posted in CSS,Developing,HTML5/HTML/XHTML,Technology,Web browsers |

Leave a Reply

Your email address will not be published. Required fields are marked *