Lighthouseの監査項目のひとつに、Webページ全体のデータサイズがあります。HTML、画像、CSS、JavaScript、フォントなど、Webページの表示に必要なデータの総量のことで、Webページの重さに直結する指標です。ナローバンドの時代はガイドラインをよく耳にしました。いま実態はどうなっているのでしょうか。

...ということで、Lighthouseでチェックした7,866サイトの比較結果をレポートします。

測定方法について

最近はAjaxや画像の遅延読み込みなどで、ページが表示された後に後追いでダウンロードされるデータもあり、一概に総量を定義するのが難しいのですが、Lighthouseのレポート結果を基準に比較をしてみます。

監査項目の中に"Avoids enormous network payloads"という項目があり、こちらにダウンロードサイズが表示されます。

この値をコーポレートサイト(上場企業)、ブログ・ニュースサイト、ECサイトについて比較します。

ダウンロードサイズは、最大 28.92MB、平均は 2.43MB。なんと10倍以上も差が。

ジャンル別と全体の最大値、平均値、四分位が以下の通りです。

最大ではなんと28.92MB！ よく音楽データ1曲5MBと言われますが、ミニアルバム約6曲分に相当します。Googleが推奨するサイズは、1.6MBです。これは3G回線で10秒以内に操作可能になる水準として設定されたようです。4G LTEが主体の日本国内のWebサイトについては、もっとサイズが大きくてもよさそうです。

四分位(25%、50%、75%)とは、100人の軽さ比べ競争に例えたとき25位、50位、75位に位置する数値です。つまり、コーポレートサイトで3.6MB以上のWebページは、データ容量でいうと75位以下のヘビー級サイトになるということです。

分布について

ではデータサイズの分布をヒストグラムで見るとどうなっているでしょうか。

いずれのジャンルも、1〜2MBをピークとしてデータサイズが大きくなるほどサイトの数が少なくなる曲線を描いています。

テキスト中心になるブログ・ニュースサイトについては全体的にデータサイズが小さく、約2MB以内にサイトが集中しています。四分位を見ても75%が1.65以内となっています。

上場企業コーポレートサイトとECサイトの分布が非常に似ているように見えます。分解すると次のようになり、不思議と分布がよく似ていることが確認できます。

最後に

今回は単純なデータサイズを比較してみました。ここからが本題。引き続き、データサイズと実際のパフォーマンスの関係性について調査していきます。