初代編集長ブログ―安田英久

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

CSSを書く順番が、デバイスごとの表示速度に関係するのかを検証してみました。
よろしければこちらもご覧ください
Web担のなかの人

今日は、レスポンシブ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は、書きやすいように書くので問題なさそうです。

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

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

ツール

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

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

調査結果

「×」=CSSの記述順序に関係なし(全部読み込み後に表示に反映)
「○」=先に書いたCSSのほうが先に表示に反映される
Android 4.0(Chrome)
 headbody
上部
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(標準ブラウザ)
 headbody
上部
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
 headbody
上部
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)
 headbody
上部
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)
 headbody
上部
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は反映されるが、全ダウンロードが完了するまで続きのコンテンツが表示されない
この記事が役に立ったらシェア!
よろしければこちらもご覧ください
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

CVR
顧客転換率。購入や申し込みなどにどれくらい至っているかを示す指標。 CVR ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]