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

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は、書きやすいように書くので問題なさそうです。

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

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

ツール

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

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

調査結果

「×」=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は反映されるが、全ダウンロードが完了するまで続きのコンテンツが表示されない
tweet38このエントリーをはてなブックマークに追加
日本赤十字社 東日本大震災 義援金募集
Web担メルマガでラクラク情報ライフを
注目記事が毎週手もとに届いて見逃さない
要チェックのセミナー情報もゲットできる
編集長コラムを一足先に読める
―― 10万人が読んでいる、Web担必読メルマガです

今日の用語

XMLサイトマップ
検索エンジンに対して、サイト内にあるページをリストアップして伝えるファイル。XM ... →用語集へ

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

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスHP Softwareトランスコスモス株式会社株式会社ハイパーボックスDomain Keeperアドビ システムズ 株式会社
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社SitecoreYahoo!プロモーション広告Oracle