CSSの取り込み方法にはlinkタグを使う方法と、@importを用いる方法があります。
多くの場合はlinkを用いても、大規模なサイトになるほど、CSSを複数のファイルに分割して、それを@importで構造化するようなことを行いたくなるかと。
しかし、そういったことはサイトのパフォーマンス（と、場合によっては挙動にも）悪影響を与えるので行ってはいけない...と、「ハイパフォーマンスWebサイト」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。
同氏は前述の著書の中でもそのことに触れていますが、今回、更に詳細に「悪影響」の内容を公開してくれています。
多くのパターンでの挙動の違いが説明されていますが、端的に言うと次のようなことのようです。
@importを用いると、パラレルダウンロードが崩れる
@importとlinkの組み合わせ方にもよりますが、IEでは殆どの場合、パターンによっては全ての主要ブラウザで、CSSのダウンロードがシーケンシャルになってしまいます。
これはページレンダリングの体感速度にとって非常に重大な劣化をもたらします。
ダウンロードの順序が変わる
@importを用いるとIEでダウンロードされる順番が不定になってしまいます。
記述した順にダウンロードされないということです。
これは、単にレスポンスだけではなく、挙動にも影響をおよぼすことがあります。
パッケージ化/構造化の面で@importを使いたい場面は多々ありますが、挙動の安定やパフォーマンス向上を目指すならば、使わない方が良いようです。
Social Flares:
Netscape
コメント