Thursday, April 9th, 2009

Souders: Don’t Use @import

Category: CSS, IE, Performance

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.

Posted by Ben Galbraith at 9:00 am
11 Comments

++++-
4 rating from 136 votes

11 Comments »

Comments feed TrackBack URI

well! i never liked @import because of it’s odd syntax, vs. regular HTML tags, but now that I know there are other, more reasonable arguments for avoiding it, I can feel appropriately smug for avoiding it all these years!

Comment by tomh — April 9, 2009

Unless network latency isn’t a worry for you, there’s no reason to ever use @import at all anymore. It is always best, given the browser landscape, to stream all of your stylesheets into a single file, just as we’re all hopefully doing with our scripts as well.

Comment by eyelidlessness — April 9, 2009

I use YAHOO.util.StyleSheet, I don’t use link tags or @import. I used to use CSS.Loader which injected link tags into the DOM but that does not work after window.onload is called for the first time. Link tags are actually not that great of an option either for this reason.
http://developer.yahoo.com/yui/stylesheet/

Comment by jhuni — April 9, 2009

@jhuni: Have I got the wrong end of the stick here? you use Javascript to load all your CSS? That sounds (pardon my bluntness) just silly…

Comment by sixtyseconds — April 9, 2009

One handy use of @import is for easing the addition or removal of styles from an entire website. For instance you link to a style sheet that @imports a bunch of other sheet. That way if you need to add or remove a style sheet yo don’t have to add the link reference to each page. This could also be done with server side includes, but for those without that ability @import can actually be very helpful.

Comment by fredclown — April 9, 2009

RE: ‘sixtyseconds’ you use Javascript to load all your CSS? That sounds (pardon my bluntness) just silly

I never said I load all my CSS using JavaScript I was just saying that there isn’t only two options and this one is great for performance, besides that if your doing something that is really heavy in JavaScript (as I am) then I think Yahoo.util.StyleSheet is the best option available. I am recommending it to other people because it was a major help to me.

Comment by jhuni — April 9, 2009

Although LINK works well, it must be noted that having multiple CSS files is a burden on any page request. By stitching your .css files into a single one — and compressing them for good measure — you can save on a few requests to the server.

Then again, you can hope on browser behavior and send the right HTTP headers. :)

Comment by dimitryz — April 10, 2009

I usually put all generic (overall) styles into one file, that is included on all subpages, and put subpage-specific styles into separate files and serve them when required.
The same goes to JS.
This way I don’t serve one big file, and don’t stress server with unnecessary requests.

Sometimes, when subpage-specific CSS/JS is not that big, then I put that in one file. But that is not always the case.

There is some use for @import as well, if for example you let people to use custom styles, and those people would like to separate their styles into different files, so that they would look clean – this works.

I think that there isn’t any perfect method for all purposes, you have to use what is best for what you are doing at the moment. Knowing what is best – that is important, and that article provided me with some additional knowledge, that I’m sure to use in future. Thanks :)

Comment by paziek — April 10, 2009

Another vote for loading css through javascript here. To get the initial page size down I’m loading in all scripts and stylesheets not necessary for the initial page view from script.

Comment by Joeri — April 10, 2009

I shall amend my ways! Cheers Steve!

Comment by oopstudios — April 13, 2009

I’d recommend this article by Dave Hyatt which addresses perf impact and FOUC (Flash of unstyled content): http://webkit.org/blog/66/the-fouc-problem/

And the original FOUC post itself: http://bluerobot.com/web/css/fouc.asp/ This article was really influential in getting web-devs to stop using @import.

Cheers,
Nicole

Comment by Stubbornella — April 14, 2009

Leave a comment

You must be logged in to post a comment.