[CSS]条件付きコメントを使用した際にレンダリングを早くするテクニック

IE用に条件付きコメントを使用してスタイルシートを配置した際に、ブラウザのレンダリングをすこし早くするテクニックを紹介します。
※下記の画像はクリックで拡大

測定結果のキャプチャ

Conditional comments block downloads

下記は上記ページを参考にしたものです。

はじめに

条件付きコメントを使用しない場合は通常、CSSファイルと次のファイルが並列で読み込まれます。

測定結果のキャプチャ

test 5の測定結果
test 5のファイル(条件付きコメントの使用無し)

上記ファイルに条件付きコメントを使用するとブロックが発生し、並列ではなくスタイルシートの読み込みが完了後、次のファイルの読み込みが始まります。

測定結果のキャプチャ

条件付きコメントを使用した場合
詳しくは後述のtest 1:ごく普通に条件付きコメントを使用を参照

これを並列で読み込むようにするテクニックを解説します。

スタイルシートの構成

スタイルシートの構成は基本的なものにしています。

  • screen.css(全ブラウザ対象)
    スクリーン用のスタイルシート
    分かりやすいようにh1(テキスト画像)にグレーのボーダー、li(バナナ画像)にグレーの背景色を指定。
  • print.css(全ブラウザ対象)
    印刷用のスタイルシート
  • ie.css(IEのみ対象)
    条件付きコメントで配置するIE用のスタイルシート
    分かりやすいようにli(バナナ画像)にブルーの背景色を指定。

※スタイルシートは全てBlueprintを使用しています。

上記三つのCSSファイルを下記のようにHTML内に指定します。

HTML

test 1:ごく普通に条件付きコメントを使用

ごく普通に条件付きコメントを使用します。

HTML

test 1のファイル

test 1の測定結果

ブロックが発生し、CSSファイルの読み込み完了後、次のファイルの読み込みが始まります。これによりページのロード時間が「4.004s」となっています。

測定結果のキャプチャ

test 1の測定結果

test 2:条件付きコメント使用時に並列読み込みを可能にする

CSSファイルを指定した箇所より前に空の条件付きコメント(<!--[if IE 6]><![endif]--> )を挿入します。

HTML

test 2のファイル

test 2の測定結果

CSSファイルの読み込みと並列に、次のファイルの読み込みがスタートします。これによりページのロード時間が「2.910s」に短縮されました。

測定結果のキャプチャ

test 2の測定結果

その他の解決方法とまとめ

その他の解決方法

空の条件付きコメントを使用する方法は元記事の中で、最も実装が簡単な方法です。他の方法としては、条件付きコメントに「lte」と「gt」を併用する方法があります。

元記事では他にも多くのテストで検証が行われています。
当方でもデモを用意したので、興味がある方は元記事および下記デモを参照ください。

まとめ

もしウェブサイトのパフォーマンスを心配するなら、条件付きコメントを使用しない方がよいでしょう。

条件付きコメントを使用すると、読み込み時にブロッキングの現象が起きます。これはパフォーマンスにとって良くありません。

やむなく条件付きコメントを使用する場合は、上記の方法で読み込み時のブロッキングを防ぐことができます。

top of page

©2017 coliss