背景画像を小さくトリミングして、cssでリピートするのと、
大きい画像をどーんと配置するのとでは、
どれくらい読み込み時間に差がでるのか、気になって調べてみた。
あと、リピートが読み込み時間に全く影響を与えないのかも気になっていたのでそこも。

検証方法

今回どのようにデータを出したか書いておきます。

流れ

1. Chromeをシークレットモードで開く。
2. 適当なページを開く。（最初に開いたページがやけに重いので。）
3. 検証ページを開く。
4. デベロッパーツールのNetworkで読み込みにかかった時間を測定。
5. 2回目以降はキャッシュで早く表示されるので、Chromeを開きなおす。
を繰り返し。

ちなみに、キャッシュが残ると40～60msという、
驚異的な速度でページが表示されるようになったｗ

用意した画像

・「400px × 400px」 画像サイズ：83KB
・「800px × 800px」 画像サイズ：327KB(約4倍)
・「800px × 4000px」 画像サイズ：746KB(約20倍)

上記3種類の画像を下記範囲でリピートたページを用意。

・「800px × 4000px」
・「8000px × 40000px (10倍)」

測定結果

サンプルページ（背景リピート範囲：800px × 4000px）

・「400px × 400px」 画像サイズ：83KB

・「800px × 800px」 画像サイズ：327KB(約4倍)

・「800px × 4000px」 画像サイズ：746KB(約20倍)

背景リピート範囲	回数	400px × 400px 画像サイズ：83KB	800px × 800px 画像サイズ：327KB(約4倍)	800px × 4000px 画像サイズ：746KB(約20倍)
800px × 4000px	1	153ms	248ms	398ms
	2	115ms	167ms	555ms
	3	104ms	195ms	431ms
	4	135ms	220ms	515ms
	5	166ms	186ms	653ms
	平均	135ms	203ms	510ms

サンプルページ（背景リピート範囲：8000px × 40000px）

・「400px × 400px」 画像サイズ：83KB

・「800px × 800px」 画像サイズ：327KB(約4倍)

・「800px × 4000px」 画像サイズ：746KB(約20倍)

背景リピート範囲	回数	400px × 400px 画像サイズ：83KB	800px × 800px 画像サイズ：327KB(約4倍)	800px × 4000px 画像サイズ：746KB(約20倍)
8000px × 40000px (10倍)	1	129ms	265ms	551ms
	2	113ms	259ms	558ms
	3	109ms	234ms	478ms
	4	119ms	274ms	594ms
	5	125ms	276ms	615ms
	平均	119ms	262ms	559ms

サンプルページで使用しているモデルさんの画像はこちら！
本で顔を隠す女性の無料人物写真素材・モデルピース

考察

リピート範囲で比べた場合。

やはり広範囲にリピートさせたもののほうが、読み込みに時間がかかっている。
今回の検証だとリピート範囲が10倍になると約60msくらい遅くなることが分かった。
背景リピートでは、読み込み時間にそこまで大きく影響しないと思われるが、指定している場所が多くなると塵も積もれば状態になるのだろうか？

画像サイズで比べた場合。

サイズが4倍、20倍となっても、読み込み時間がそれに比例して遅くなることは無かった。
ただ、リピート範囲に比べて、画像サイズのほうが、読み込み時間が大きく影響することがデータから見てとれる。

結論

よって今回の検証だと、いままでの常識どうり、
背景を繰り返し、画像は小さめが一番良い事が証明されたことになる。

背景画像は、
小さくスライスして、 リピートさせろ！

なにやってたんだろおれはorz
当たり前の結果ｗ