[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか

外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。

don't use @import

内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。

下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。

@import @import

2つの外部スタイルシートを@importで指定。

<style>
@import url('a.css');
@import url('b.css');
</style>

@import @import

2つのスタイルシートが並列に読み込まれており、どの環境でも問題無し。

LINK @import

2つの外部スタイルシートをlink, @importの順番で指定。

<link rel='stylesheet' type='text/css' href='a.css'>
<style>
@import url('b.css');
</style>

LINK @import

IEでは1つ目が読み込まれてから、2つ目を読み込むため、パフォーマンスが悪い。

LINK with @import

linkで外部スタイルシートを指定し、そのスタイルシートに@importで外部スタイルシートを指定。

<link rel='stylesheet' type='text/css' href='a.css'>

in a.css:
@import url('b.css');

LINK with @import

IE, Fx共に並列に読み込まず、パフォーマンスが悪い。

LINK blocks @import

2つの外部スタイルシートをlinkで指定し、2つ目は@importで外部スタイルシートを指定。

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>

in proxy.css:
@import url('b.css');

LINK blocks @import

IEでは@importが次のファイルの読み込みを阻止しているため、パフォーマンスが悪い。

many @imports

たくさんの外部スタイルシートを@importで指定。

<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>

<script src='one.js' type='text/javascript'></script>

many @imports

IEでは、連続して読み込まれるため、パフォーマンスが悪い。

LINK LINK

2つの外部スタイルシートをlinkで指定。

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='b.css'>

LINK LINK

サイトでは、linkはIEでも平行して読み込まれるとあるのですが、当環境（IE7)では連続して読み込まれてしまいました。

何回試しても、平行して読み込まれないのでキャプチャも貼っておきます。IE8だと平行なのでしょうか。

Post on:2009年4月10日