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

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

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

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

調査結果

この記事の筆者

安田 英久（やすだ・ひでひさ）

株式会社インプレスビジネスメディア
Web担当者Forum 編集長

プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、現在Webサイト 「Web担当者Forum」編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開してい る。

個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模 索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。

→Google+

• コーナー：編集長ブログ―安田英久
• 内容カテゴリ：サイト企画／制作／デザイン

※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：検証：レスポンシブのCSSはモバイル向けを先に書くと表示が早い？ [編集長ブログ―安田英久] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.