The Ashes

Web performance guru Steve Souders noted some time ago in his book that @import is harmful to web page rendering times, but today he elaborated on this claim in a longish blog post:

There are two ways to include a stylesheet in your web page. You can use the LINK tag:

<link rel=’stylesheet’ href=’a.css’>

Or you can use the @import rule:

<style>
@import url(‘a.css’);
</style>

I prefer using LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance, too.

He shows that while always using @import by itself is actually okay, there are a number of scenarios where @import can jack you up:

1. link mixed with @import breaks parallel downloads in IE
2. using @import from within a LINKed stylesheet breaks parallel downloads in all browsers
3. LINK blocks @import embedded in other stylesheets in IE
4. @import causes resources to be downloaded out-of-order in IE

His conclusion:

It’s especially bad that resources can end up getting downloaded in a different order. All browsers should implement a small lookahead when downloading stylesheets to extract any @import rules and start those downloads immediately. Until browsers make these changes, I recommend avoiding @import and instead using LINK for inserting stylesheets.

See the full blog post for fancy charts and more detail.