Thursday, April 9th, 2009
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:
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:
- link mixed with @import breaks parallel downloads in IE
- using @import from within a LINKed stylesheet breaks parallel downloads in all browsers
- LINK blocks @import embedded in other stylesheets in IE
- @import causes resources to be downloaded out-of-order in IE
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.
Posted by Ben Galbraith at 9:00 am