[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか
外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。
内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。
下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。
@import @import
2つの外部スタイルシートを@importで指定。

2つのスタイルシートが並列に読み込まれており、どの環境でも問題無し。
LINK @import
2つの外部スタイルシートをlink, @importの順番で指定。

IEでは1つ目が読み込まれてから、2つ目を読み込むため、パフォーマンスが悪い。
LINK with @import
linkで外部スタイルシートを指定し、そのスタイルシートに@importで外部スタイルシートを指定。

IE, Fx共に並列に読み込まず、パフォーマンスが悪い。
LINK blocks @import
2つの外部スタイルシートをlinkで指定し、2つ目は@importで外部スタイルシートを指定。

IEでは@importが次のファイルの読み込みを阻止しているため、パフォーマンスが悪い。
many @imports
たくさんの外部スタイルシートを@importで指定。

IEでは、連続して読み込まれるため、パフォーマンスが悪い。
LINK LINK
2つの外部スタイルシートをlinkで指定。

サイトでは、linkはIEでも平行して読み込まれるとあるのですが、当環境(IE7)では連続して読み込まれてしまいました。
何回試しても、平行して読み込まれないのでキャプチャも貼っておきます。IE8だと平行なのでしょうか。
Post on:2009年4月10日









Comments
ゆっくりと… » CSS最適化に関するTips
on 2010年1月10日
[...] [CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか [...]
外部スタイルシートの指定 | 風俗 ふーちゃんの開発ブログ
on 2010年5月26日
[...] Cats: 未分類| view plaincopy to [...]
CSSの構造化 | XCrossOver
on 2011年2月1日
[...] tで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 外部スタイルシートの指定は@importとlinkでどちらがいいか | コリス [...]
@importとは何だったのか | CROSSBLASTER.com | Ashes Design Weblog
on 2011年4月8日
[...] Screw-Axis – [css] @importを使うべきでない理由 コリス – [CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか [...]
Sweetf中の人、ともちんのブログ
on 2011年6月12日
CSSで@IMPORTは使わないほうがいいんだって
Web系は進化が速いので、ちょっとうっかりしていると世の中が変わってしまいます。
「最新の技術」と「お客様に提供すべき技術」は必ずしも同じじゃありません。
最新の技術はそ…
CSSの書き方 | yopibox
on 2011年8月12日
[...] [CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか カテゴリー: CSS, その他 作成者: admin パーマリンク [...]
8log - CSSの読み込みについて
on 2011年9月20日
[...] 参照:coliss 外部スタイルシートの指定は@importとlinkでどちらがいいか [...]
賢威テンプレート(WordPress版)のファイル構成 | プログラミングアフィリエイトで集客する方法
on 2012年3月29日
[...] @import規則によるサイトの速度について、以下リンクが参考になるリンク: [CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか wordpress.css WordPressウィジェット用スタイルシート [...]