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

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

don't use @import

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

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

@import @import

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

@import @import

計測のキャプチャ

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

LINK @import

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

LINK @import

計測のキャプチャ

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

LINK with @import

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

LINK with @import

計測のキャプチャ

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

LINK blocks @import

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

LINK blocks @import

計測のキャプチャ

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

many @imports

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

many @imports

計測のキャプチャ

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

LINK LINK

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

LINK LINK

計測のキャプチャ

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

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

計測のキャプチャ

top of page

©2017 coliss