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.
High Performance Web Sites :: don’t use @import
『ハイパフォーマンス Web サイト — 高速サイトを実現する 14 のルール』の著者、Steve Souders 氏のブログより。HTML ドキュメントに CSS ファイルをインクルードする際、link 要素と @import ルールをどう組み合わせるのが速いか、という話。上記の引用もとでは様々なパターンでのパフォーマンス実験の結果が紹介されている。ものすごくざっくりとまとめちゃうと、@import よか link のが速いよ、が結論。
CSS ファイルをどう分割するかってのはけっこう悩むもの。たとえば、この宣言は layout.css と modules.css のどちらに書くべきか、とか、そもそもどこまで細かく分割すべきか、とか。その結果、あの宣言ってどこに書いたっけ、とか。でもインクルードの方法でパフォーマンスに違いが出るってのは意識したことなかったなー、と反省。
ていうかパフォーマンスを考えるなら、link か @import かっていうより、まずは CSS ファイルの数を減らすことが先だよな。あとは保守性との兼ね合いで、どこまで分割するかを決めればいい。
つまり、CSS ファイルは可能な限り分割せず、かつ @import ではなく link でインクルードすべし、と。そうすれば分割についての悩みも減るうえ、サイトのパフォーマンスも向上する、はず。