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

Post on:2010年9月21日

はじめに

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

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

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

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

スタイルシートの構成

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

screen.css（全ブラウザ対象）

スクリーン用のスタイルシート

分かりやすいようにh1（テキスト画像）にグレーのボーダー、li（バナナ画像）にグレーの背景色を指定。
print.css（全ブラウザ対象）

印刷用のスタイルシート
ie.css（IEのみ対象）

条件付きコメントで配置するIE用のスタイルシート

分かりやすいようにli（バナナ画像）にブルーの背景色を指定。

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

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

HTML

&lt;link&nbsp;type=&quot;text/css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;screen.css&quot;&nbsp;media=&quot;screen,&nbsp;projection&quot;&gt;
&lt;link&nbsp;type=&quot;text/css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;print.css&quot;&nbsp;media=&quot;print&quot;&gt;
&lt;!--[if&nbsp;IE&nbsp;6&nbsp;]&gt;
&lt;link&nbsp;type=&quot;text/css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;ie.css&quot;&nbsp;media=&quot;screen,&nbsp;projection&quot;&gt;
&lt;![endif]--&gt;

<!--[if IE 6 ]>

<![endif]-->

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

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

HTML

&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN&quot;&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&nbsp;xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&nbsp;lang=&quot;ja-jp&quot;&nbsp;xml:lang=&quot;ja-jp&quot;&gt;
&lt;head&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;meta&nbsp;http-equiv=&quot;Content-Style-Type&quot;&nbsp;content=&quot;text/css&quot;&nbsp;/&gt;

&lt;link&nbsp;type=&quot;text/css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;screen.css&quot;&nbsp;media=&quot;screen,&nbsp;projection&quot;&gt;
&lt;link&nbsp;type=&quot;text/css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;print.css&quot;&nbsp;media=&quot;print&quot;&gt;

&lt;!--[if&nbsp;IE&nbsp;6&nbsp;]&gt;
&lt;link&nbsp;type=&quot;text/css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;ie.css&quot;&nbsp;media=&quot;screen,&nbsp;projection&quot;&gt;
&lt;![endif]--&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;&lt;img&nbsp;src=&quot;img/2010092101-01.png&quot;&nbsp;alt=&quot;Conditional&nbsp;comments&nbsp;block&nbsp;test&quot;&nbsp;/&gt;&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;&lt;img&nbsp;src=&quot;img/2010092101-02.png&quot;&nbsp;alt=&quot;バナナ画像&quot;&nbsp;/&gt;&lt;/li&gt;
&lt;li&gt;&lt;img&nbsp;src=&quot;img/2010092101-03.png&quot;&nbsp;alt=&quot;バナナ画像&quot;&nbsp;/&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-jp" xml:lang="ja-jp">

<head>

<!--[if IE 6 ]>

<![endif]-->

</head>

<body>

<ul>

</ul>

</body>

</html>

test 1のファイル

test 1の測定結果

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

test 1の測定結果

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

CSSファイルを指定した箇所より前に空の条件付きコメント（ ）を挿入します。

HTML

&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;&quot;-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN&quot;&nbsp;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&nbsp;xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&nbsp;lang=&quot;ja-jp&quot;&nbsp;xml:lang=&quot;ja-jp&quot;&gt;
&lt;head&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;meta&nbsp;http-equiv=&quot;Content-Style-Type&quot;&nbsp;content=&quot;text/css&quot;&nbsp;/&gt;

&lt;!--[if&nbsp;IE&nbsp;6]&gt;&lt;![endif]--&gt;

&lt;link&nbsp;type=&quot;text/css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;screen.css&quot;&nbsp;media=&quot;screen,&nbsp;projection&quot;&gt;
&lt;link&nbsp;type=&quot;text/css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;print.css&quot;&nbsp;media=&quot;print&quot;&gt;

&lt;!--[if&nbsp;IE&nbsp;6&nbsp;]&gt;
&lt;link&nbsp;type=&quot;text/css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;ie.css&quot;&nbsp;media=&quot;screen,&nbsp;projection&quot;&gt;
&lt;![endif]--&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;&lt;img&nbsp;src=&quot;img/2010092101-01.png&quot;&nbsp;alt=&quot;Conditional&nbsp;comments&nbsp;block&nbsp;test&quot;&nbsp;/&gt;&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;&lt;img&nbsp;src=&quot;img/2010092101-02.png&quot;&nbsp;alt=&quot;バナナ画像&quot;&nbsp;/&gt;&lt;/li&gt;
&lt;li&gt;&lt;img&nbsp;src=&quot;img/2010092101-03.png&quot;&nbsp;alt=&quot;バナナ画像&quot;&nbsp;/&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;