検証：レスポンシブのCSSはモバイル向けを先に書くと表示が早い？

今日は、レスポンシブ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/

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

調査結果