Wednesday, June 3, 2009

@import is evil [CSS]

Steve Souders analyses how browsers treat @import compared to the more comment <link> method of including style sheets.
In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page.
Personally, I've always disliked @import, so I'm happy to have some solid metrics proving that using it is a bad idea.

Read the full article at www.stevesouders.com/blog/2009/04/09/dont-use-import/.
Posted by at
Labels: , ,

2 comments:

  1. AnonymousJune 4, 2009 at 4:27 PM

    I like the ole i~mport - handy for css nesting, just watch for FOUC on IE - ie. never use on main base.css. ps. if you want to elimated white space in sheets may save a few k's...

    ReplyDelete
  2. Kelvin MackayJune 4, 2009 at 4:31 PM

    as always appreciate the input gerii, but next time read the article lol ;)

    ReplyDelete

Subscribe to: Post Comments (Atom)