世界中のウェブサイトを対象とした標準的なウェブページのサイズや構成

長らく このようなデータ を基に測定対象ページとしていましたが、年々ウェブページの容量や構成が変化していることもあり、測定ページを構成し直すことにしました。以前のコンテンツはデータ容量を基準にやや大ざっぱな構成でしたが、今回はより標準的（平均的）なウェブページとなるように修正しています。

前回と同様に「http archive（httparchive.org）」のデータを採用しています。

測定ページの詳細を公開することが目的のページです。かなり説明を省いているため意味が分からないと思いますが、「公開されているデータを基にしたウェブページが測定対象である」ことが伝われば十分です。

ページ構成

http archiveでは世界中のウェブサイトを継続調査したデータが公開されています。ウェブページのサイズやリクエスト回数、各リソースの平均サイズなどを確認できます。

http archiveの測定対象サイトは、Alexaのデータ（1,000,000サイト）を基にしています。「All、TOP100、TOP1,000」から選択でき、今回のページ構成の参考とするのは「All」のデータです。

平均的なウェブサイトの構成は上図のようになっており、6割強を画像（Images）が占めていることが分かります。

それでは、これらのデータを基に測定対象ページを構成するリソースを算出します。

• 全体のサイズが約2.4MBになるように調整します。
• Video（225kB）とOhter（12kB）はImagesに加算します。

個々の合計が図の値と異なりますが、計算間違いではありません。グラフ上では細かい数値が省かれているのでしょう。

ここからの説明に出てくる数値の多くは、ウェブサイト（ウェブページ）あたりの平均値を示します。

これはウェブページのサイズとサーバーへのリクエスト回数です。つまり、一つのページを開くために平均103回のリクエストが発生していることになります。

個人でウェブサイトを運営している方なら「非常に多い」と感じるかも知れません。しかし、カカクコムのトップページなら200近く、Amazonなら300近いリクエストが発生しています。大手サイトであれば普通の数値ですが、そのほとんどを画像データが占めます。

このリクエスト回数をそのまま利用しても良いのですが、

• レンタルサーバーに意味もなく負荷をかけたくない。
• 相対的な評価ができればよいので、厳密にあわせる必要がない。
• Alexaのリストはアクセス数上位のサイトであり、個人サイトの傾向とは異なる。
• 外部ドメインやCDNへのアクセスも含まれる。例えば、アフィリエイトやtwitterです。
  • 外部サーバーへのアクセスは対象レンタルサーバーの性能とは無関係です。
  • 平均19ドメインへのアクセスが発生しており、最大50reqsとなっています。

これらのことから、リクエスト数を半分の50reqsとします。個人運営のウェブサイトなら妥当な数値でしょう。

それでは、50reqsを基準に各リソースのリクエスト回数とファイルサイズを決定します。

採用データ

Aug 15 2016（2016年8月15日）

ウェブページを構成する総サイズ

2,424kB（約2.4MB）とします。

Images

Total 1,573kB+225kB（Video）+12kB（Other） = 1,810kB

ファイル形式ごとの平均サイズとリクエスト割合です。WebP、SVG、Ohterは無視します。

GIF 9kB  reqs 24%
JPG 41kB reqs 45%
PNG 26kB reqs 28%

56reqs/2 = 28reqs （リクエスト数を半分にする）

GIF 
28reqs*(24/97) = 6.93reqs
1810kB*(9kB/76kB)/6.93reqs = 30.93kB

JPG
28reqs*(45/97) = 12.99reqs
1810kB*(41kB/76kB)/12.99 = 75.17kB

PNG
28reqs*(28/97) = 8.08reqs
1810kB*(26kB/76kB)/8.08 = 76.63kB

Total (30.93kB*6.93reqs)+(75.17kB*12.99reqs)+(76.63kB*8.08reqs) = 1810kB

reqs = ファイル数となります。小数点は最後に調整します。

Scripts（JavaScript）

22reqs/2 = 11reqs
401kB/11 = 36.45kB

36.45kBのJSファイル11個

Fonts

2.6reqs/2 = 1.3reqs
84kB/1.3reqs = 64.62kB

64.62kBのFontファイル1.3個

Stylesheets（CSS）

7.2reqs/2 = 3.6reqs
75kB/3.6reqs = 20.83kB

20.83kBのCSSファイル3.6個

HTML

9.4reqs/2 = 4.7reqs
54kB/4.7reqs = 11.49kB

11.49kBのHTMLファイル4.7個

各リソースの調整

小数値のファイル数は意味がないため、ざっくりと四捨五入します。

これらの数値はあくまでも基準です。HTML、CSS、JS、FontについてはWordPressが出力するファイルを基に再調整します。採用テーマにより出力ファイルが異なるため、ここでは算出しません。

例えばHTMLの場合、残りのファイルサイズは以下の様になります。
(11.49[kB]*5[個]-WodPress出力HTML[kB])/4[個]

テキスト形式のファイルはダミーテキスト、ImagesとFontsについては下記の方法で生成します。

• ファイルサイズが調整されたダミー画像を作成する方法