「HTMLファイル」に“直接書き込んだCSS“を使ってページを表示する場合と、
「HTMLファイル」で“CSSファイルを読み込んで”読み込んだCSSを使用してページを表示する場合とでは
どちらの方がページの表示が軽くなのでしょうか？
【コンピュータ処理イメージ】
■HTMLにCSS直書きの場合
ＨＴＭＬファイル読む → 上から探していきCSSの定義を読み込み → 続いてＨＴＭＬファイルの記述を読む → CSS適用箇所があればCSSをそこに適応する
■CSSを読み込む場合
ＨＴＭＬファイル読む → 上から探していくとＣＳＳ読み込みファイルを発見 → ＣＳＳ読み込みファイルの中身を参照できるようにする → 続いてＨＴＭＬファイルの記述を読む → CSS適用箇所があれば適応
こう考えたところ、CSSを読み込んだ方が「CSS参照時間」が増えてしまうため、処理が重くなってしまうと考えています。
実際にはどちらの場合の方が表示処理は軽くなるのでしょうか？
No.1
95
10
20pt
小規模サイトの場合はどっちも似たり寄ったりですが、1ページ単位で厳密に考えるとイメージされている通りインラインで記述した方がリクエストのコストが減る分速くなると思います。
ただし、1ページの場合は体感上有意な差が出ない程度(webサーバのMaxClientsの設定等が適正な場合)ですが、規模が大きくなってcssを多くのファイルで共有している場合は、外部cssにしておくとキャッシュが効くのでパフォーマンスはインラインの場合よりも上がります。
管理上も別ファイルにしておくとなにかと便利なので、小規模でも別ファイルにしておいた方が良いと思います。インラインで書く場合は、ユーザーによるカスタマイズ部分ぐらいしかオススメするシーンが思い浮かばないです。
No.2
22818
20pt
ＨＴＭＬファイル読む → 上から探していきCSSの定義を読み込み → 続いてＨＴＭＬファイルの記述を読む → CSS適用箇所があればCSSをそこに適応する
たぶん，実際の処理では，
・HTML を一気に読み込む
・CSS の定義を，並行して読み込む
・レンダリング
という流れになるので，上記のように，途中で CSS の定義を読むために HTML 関係の処理が止まったりしません
サーバ側の回線が極端に遅い場合などを除けば，別ファイルにしたからといって処理が遅くなる事はまず無いでしょう
試しに，数MB ある CSS を，直接書いた場合と，外部ファイルにした場合とで試しては如何でしょうか
ご回答ありがとうございます。
＞という流れになるので，上記のように，途中で CSS の定義を読むために HTML 関係の処理が止まったりしません
処理はとまらないのですね（驚）
レンダリングについても
ある一定を読み込んで → レンダリング → 読み込んで → レンダリング ではなく
イメージとしては HTMLを一気に読み込む → ＣＳＳの定義も読み込む → レンダリング ということなのですね。
＞試しに，数MB ある CSS を，直接書いた場合と，外部ファイルにした場合とで試しては如何でしょうか
ありがとうございます。
一度試してみようと思います。
No.3
393
20pt
クライアントのブラウザの設定にもよりますが、同一ファイルはキャッシュしますので、同一CSSファイルを異なるページで読み込ませる場合は外部CSSファイルを読み込ませる方が処理は軽くなります。
ご回答ありがとうございます。
私にはキャッシュの考えを知らなかったのですが、そういう訳なのですね･･･
キャッシュを使用している場合、
外部CSSファイルを読み込ませる方が処理は軽くなるということ、覚えておきます。
No.4
40
20pt
初めて見るページだと、サーバに対してCSSファイルをリクエストする時間が省略されるので、「HTML直書き」の方が早いでしょう。
２回目の閲覧以降、自分のPC(またはプロキシ)にキャッシュが残っている場合は表示処理時間に違いが出ることはほとんど無いでしょう。
私はCSSファイルを外部に設置するメリットは表示処理時間の違いではなく、HTMLファイルとCSSファイルが独立しながらページのデザインの更新が一括で行えることにメリットがあると思います。
ご回答ありがとうございます。
＞初めて見るページだと、サーバに対してCSSファイルをリクエストする時間が省略されるので、「HTML直書き」の方が早いでしょう。
つまり、初めて見るページの場合であれば
HTMLにCSS直書きの場合は「CSS内容読み込み時間」のみでレンダリング可能。
HTMLにCSSファイルを外部読み込みする場合は「CSSファイルの参照時間」＋「CSS内容読み込み時間」が必要となる。
この為、キャッシュを使用しないでレンダリングする場合では、
HTMLにCSSファイルを外部読み込みすると「CSSファイルの参照時間」が発生してしまうため、
HTMLに直書きされているファイルの方が読み込み時間が早くなる、という風になるのですね。
【キャッシュを使用してレンダリングする場合】
恐らく １ページだけであれば
HTML直書きの場合も、CSSファイル外部読み込みの場合のどちらでも、
「キャッシュを使用したCSS内容読み込み時間」だけで済むと思うのですけれども、
そこから、複数ページ（２ページ以上に渡る場合は）
CSSファイル外部読み込みした場合の方が早くなるということですよね。
HTMLにCSSが直書きされたHTMLファイルが複数ページある場合
「HTML読み込み時間」 ＋ 「CSS内容を読み込んだ上で処理する時間」 が必要となってくる。
（※）直接書かれているCSSファイルの部分を、１ページ１ページで読み込む動作が必要となるため、遅くなる。
CSSファイルを外部読み込みしたHTMLファイルが複数ページある場合
「HTML読み込み時間」 ＋ 「CSS内容を処理する時間」 が必要となってくる。
（※）一度読み込んだCSSファイルのCSSの記述部については、読み込みは一度で済むため、処理が早くなる。
ちょっと考えが長くなってしまい申し訳ありません･･･（汗）
この考えの理解で合っていますでしょうか。
[疑問]
もしよろしければ、少しお聞きしたいのですけども、
自分のPC(またはプロキシ)にキャッシュが残っている場合とありますが、
自分のPCはクライアントで、プロキシはサーバー側だと思っているのですが、
これは、両側のどちらかにキャッシュが残ってさえすればいいのでしょうか？
No.5
592
20pt
コメントがつけられなかったので、回答にて
余談な回答なので、お気に召さなければ0ポイントで結構です
各ファイル(CSS,js等々)が読み込み・表示のタイミング、所要時間についてはFirebugで確認ができます。
Firebug
https://addons.mozilla.org/ja/firefox/addon/1843
Firefox限定なのが難点ですが、CSSのデバッグ(継承関係が見られるのは非常に便利)にも使える逸品です。
あと、こちらも余談ですが(苦笑)
クライアントが携帯電話 auでez-webの時。こちらもHTML(XHTML)とCSSが使えますが、CSSを別ファイルにすると
CSSの反映は最後の最後になります。
HTML上で記載されたデザインでまず一旦表示され、一呼吸、0.3～0.5秒程度(「間がある」と認識できる程度)の
間が空いて、CSSデザインが反映されます。
まだ、特定機種でしか検証できていないのですが、PCでもWebブラウザが異なる(例：Internet Explorer/Firebox/Safari/Chrome…)と表示のタイミングは変わるかもしれません。
# もし、これを検証しているサイトがあるようでしたら、私もみたいです(苦笑)
ご回答ありがとうございます。
質問者さんがおっしゃられている余談が、私には為になりました。
お詳しい検証を進められているのですね（驚汗）
私はWeb暦が短くて色々とわからないことが多い状態なので、
とても助かります。
＞HTML上で記載されたデザインでまず一旦表示され、一呼吸、0.3～0.5秒程度(「間がある」と認識できる程度)の
間が空いて、CSSデザインが反映されます。
レンダリングについては他の回答者様も上げてくださっていました。
そして、時間のお話までして下さってありがとうございます。
＞PCでもWebブラウザが異なる(例：Internet Explorer/Firebox/Safari/Chrome…)と表示のタイミングは変わるかもしれません。
ソフト上の組み込み方によって、ファイル内容の読み込み順序が変わる可能性があるからということですよね。
この辺りどうなんでしょうか･･･変わるような気はしますが、私もちょっと気になってきました。。。
God_24
2008/12/02 12:21:02
70
69
1
1
ご回答ありがとうございます。
＞ ただし、1ページの場合は体感上有意な差が出ない程度(webサーバのMaxClientsの設定等が適正な場合)ですが、規模が大きくなってcssを多くのファイルで共有している場合は、外部cssにしておくとキャッシュが効くのでパフォーマンスはインラインの場合よりも上がります。
境界分けとして考えてみたのですが、
つまるところ 「キャッシュが効いてからは、CSSファイルを読み込んでレンダリングする方が早い」ということになるのですね。
＞管理上も別ファイルにしておくとなにかと便利なので、小規模でも別ファイルにしておいた方が良いと思います。
アドバイスありがとうございます。
＞ユーザーによるカスタマイズ部分ぐらいしかオススメするシーンが思い浮かばないです。
イメージ的には９割がたの大部分を、
CSSファイルで内で定義しているCSSを使用するが、
一部に関しては「インラインとして直接書いて、ある一部分だけをカスタマイズする」
（例えば ここだけピンポイントで文字サイズを変更したい、などの場合）
には、インラインで使用する用途も発生する、という考えで良いでしょうか。