検証：レスポンシブのCSSはモバイル向けを先に書くと表示が早い？ [編集長ブログ―安田英久]

この記事を読むのにかかる時間：約 4 分

» 編集長ブログ―安田英久のバックナンバーを見る

Image may be NSFW.
Clik here to view. Web担のなかの人

Image may be NSFW.
Clik here to view. feed

このブログだけのフィードを購読

今日は、レスポンシブWebデザインでのスタイルシートを書く順番について。CSSを書く順番が、デバイスごとの表示速度に関係するのかを検証してみた話題です。

レスポンシブWebデザインでは、モバイル向けのCSSを先に書くほうが、モバイル端末で早く表示される

以前に、そんなことを耳にしました。「んー、どうなんだろう」と思ったので、実際に検証してみました。

仮説では、「ブラウザはDOM要素を構築してからレンダリングするだろうから、モバイル向けとPC向けでCSSを別にしてlink要素で読み込めば、たしかにそれも有り得る」でしたが、実際にはどうだったのでしょうか？

テスト用に、専用のスクリプトを用意しました。いろんなパターン（link要素とか、style要素とか、style要素で@importとか）のCSSを、head内・body上部・body下部に出力できるようにして、モバイル向けCSSを出力して数秒ほど経ってからPC向けCSSを出力する仕組みを作り、Android 4.0（Chromeと標準ブラウザ）やiPhone 5、PC向けブラウザ（FirefoxとChrome）で表示を試しました。

さて、その結果は？

結論：現状のモバイルブラウザでは、レスポンシブWebデザインのCSSを書く順番は、ほぼ表示順序には関係ない。

たしかにPC向けのブラウザでは、link要素を使った場合に先に読み込んだCSSが先に反映される場合もありましたが、モバイル向けでは原則として、ほとんどの場合に全部のデータを読み込んでからでないと、スタイルが表示に反映されませんでした。

body要素の下にスタイルをstyle要素として直書きした場合は先に読み込んだCSSが先に反映されましたが、それだとスタイルなしの状態でレンダリングして、そのあとでまたスタイルを適用した状態でレンダリングすることになるので、全体の動作は遅くなってしまいます（そもそもHTMLの文法違反なんですよね）。PC向けスタイルシートが非常に大きい場合にはそれでもユーザーの体験速度が改善する可能性はあるのですが、そうした書き方が有効な場合は、ほとんどないのではないでしょうか。

レスポンシブWebデザインのCSSは、書きやすいように書くので問題なさそうです。

ただし、書く順序で表示速度を改善する手法はないので、できるだけ記述量を減らして軽くすることが重要になりそうですね。

検証用のツールと、詳細な調査結果

ツール

テスト用のページをだれでも使える状態にしていますので、気になる方はご自分で試してみてください。

レスポンシブWebデザインでのCSS記述順序テスト
→ http://web-tan.forum.impressrd.jp/tools/rwd_css_test/

記事は「書く順番は関係ないことがわかった」で短いですが、その準備と検証に結構な手間がかかっていたので、もったいないので一般に公開！フィードバックお待ちしております。

調査結果

「×」＝CSSの記述順序に関係なし（全部読み込み後に表示に反映）
「○」＝先に書いたCSSのほうが先に表示に反映される
Android 4.0（Chrome）
	head	body 上部	body 下部
link要素（モバイル向けとPC向けを別ファイル）	×	×	×
link要素（モバイル向けとPC向けをまとめて1ファイル）	×	×	×
style要素の@import（モバイル向けとPC向けを別ファイル、別style要素）	×	×	×
style要素の@import（モバイル向けとPC向けを別ファイル、1つのstyle要素）	×	×	×
style要素の@import（モバイル向けとPC向けをまとめて1ファイル）	×	×	×
style要素（モバイル向けとPC向けを別要素）	×	○	○
style要素（モバイル向けとPC向けをまとめて1要素）	×	×	×

Android 4.0（標準ブラウザ）
	head	body 上部	body 下部
link要素（モバイル向けとPC向けを別ファイル）	×	×	×
link要素（モバイル向けとPC向けをまとめて1ファイル）	×	×	×
style要素の@import（モバイル向けとPC向けを別ファイル、別style要素）	×^※1	×^※1	×^※1
style要素の@import（モバイル向けとPC向けを別ファイル、1つのstyle要素）	×	×	×
style要素の@import（モバイル向けとPC向けをまとめて1ファイル）	×^※1	×^※1	×^※1
style要素（モバイル向けとPC向けを別要素）	×	×	○
style要素（モバイル向けとPC向けをまとめて1要素）	×	×	×
※1　CSSが反映されない

iPhone 5
	head	body 上部	body 下部
link要素（モバイル向けとPC向けを別ファイル）	×	×	×
link要素（モバイル向けとPC向けをまとめて1ファイル）	×	×	×
style要素の@import（モバイル向けとPC向けを別ファイル、別style要素）	×	×	×
style要素の@import（モバイル向けとPC向けを別ファイル、1つのstyle要素）	×	×	×
style要素の@import（モバイル向けとPC向けをまとめて1ファイル）	×	×	×
style要素（モバイル向けとPC向けを別要素）	×	×	○
style要素（モバイル向けとPC向けをまとめて1要素）	×	×	×

PC（Firefox）
	head	body 上部	body 下部
link要素（モバイル向けとPC向けを別ファイル）	×	○	○
link要素（モバイル向けとPC向けをまとめて1ファイル）	×	×	×
style要素の@import（モバイル向けとPC向けを別ファイル、別style要素）	×	○	○
style要素の@import（モバイル向けとPC向けを別ファイル、1つのstyle要素）	×	×	×
style要素の@import（モバイル向けとPC向けをまとめて1ファイル）	×	×	×
style要素（モバイル向けとPC向けを別要素）	×	×^※2	○
style要素（モバイル向けとPC向けをまとめて1要素）	×	×	×
※2　CSSは反映されるが、全ダウンロードが完了するまで続きのコンテンツが表示されない

PC（Chrome）
	head	body 上部	body 下部
link要素（モバイル向けとPC向けを別ファイル）	×	×	×
link要素（モバイル向けとPC向けをまとめて1ファイル）	×	×	×
style要素の@import（モバイル向けとPC向けを別ファイル、別style要素）	×	×	×
style要素の@import（モバイル向けとPC向けを別ファイル、1つのstyle要素）	×	×	×
style要素の@import（モバイル向けとPC向けをまとめて1ファイル）	×	×	×
style要素（モバイル向けとPC向けを別要素）	×	×^※2	○
style要素（モバイル向けとPC向けをまとめて1要素）	×	×	×
※2　CSSは反映されるが、全ダウンロードが完了するまで続きのコンテンツが表示されない