html内にcssを直接書き込むとどんだけ表示速度遅くなるの？という話

こんにちは。
先日、会社で
「ファーストビューのCSSをhtmlに書いておくことでユーザの体感速度が上がる？」
的な話があり、
「レンダリングエンジンもそんなアホじゃないっしょ。。」とか思いながら、
実際そんなことしたらどうなっちゃうのか調べてみました。

まぁ、
・キャッシュが参照できないので再訪したユーザへのパフォーマンスが落ちる
・htmlにもcssにも手を入れないと行けないので管理コストが増える
って感じでいいことないんですけどね。
ものは試しってことで。

【準備】

計測

SPEEDINDEX (TOKYO - IE9/Chrome)

html

<div id="css_search_test_box_1">
	<ul class="wrapper">
		<li><a href="#">テキスト<em>01</em></a></li>
		<li><a href="#">テキスト<em>02</em></a></li>
		<li><a href="#">テキスト<em>03</em></a></li>
		<li><a href="#">テキスト<em>04</em></a></li>
		<li><a href="#">テキスト<em>05</em></a></li>
		<li><a href="#">テキスト<em>06</em></a></li>
		<li><a href="#">テキスト<em>07</em></a></li>
		<li><a href="#">テキスト<em>08</em></a></li>
		<li><a href="#">テキスト<em>09</em></a></li>
		<li><a href="#">テキスト<em>10</em></a></li>
	</ul>
</div>

上記のリストを1000回繰り返し。
idの末尾の数字が増える作り。実際にはSmarty使った。

CSS (というかSass)

@for $i from 0 through 1000 {
	#css_search_test_box_#{$i} {
		.wrapper {
			margin: 10px 20px;
		}
		ul {
			border: solid 1px #999;
			@include border-radius(4px);
		}
		li {
			border-bottom: solid 1px #999;
			&>a {
				font-size: 16px;
				vertical-align: middle;
				min-height: 35px;
				padding: 10px;
				@include display-box;
				@include box-align(center);
				em {
					font-weight: bold;
				}
			}
			&:last-child {
				border-bottom: none;
			}
		}
	}
}

こんな感じで無駄にスマホっぽくしてみた。
CSSにfor文使うの新鮮で楽しい。

【準備ファイル】

	ファイルサイズ(html)	ファイルサイズ(CSS)
html内記述 0%	546KB	749KB
html内記述 25%	733KB	562KB
html内記述 50%	920KB	375KB
html内記述 100%	1.3MB	-

【結果】

	ファイルサイズ(html)	ファイルサイズ(CSS)	読み込み速度
html内記述 0%	546KB	749KB	292ms
html内記述 25%	733KB	562KB	468ms
html内記述 50%	920KB	375KB	498ms
html内記述 100%	1.3MB	-	1381ms

・html自体の読み込みに思いのほか時間がかかってる様子。

まとめ

やはり事前予想通りで、仮説のようなことはない。
SPEEDINDEXの体感速度指数もhtml内記述が0%のものが一番良かったし。
cssは全て別ファイル管理がよいね。