[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

うちのトップページ重すぎ...? Googleの推奨は1.6MB!7,866のウェブサイトトップページをチェックした結果、モバイルデバイス向けトップページの平均サイズは2.43MBだった

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

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

測定方法について

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

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

lighthouse-network-payload.png

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

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

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

単位: MB上場企業コーポレートサイトブログ・ニュースサイトECサイトALL
最大 27.30 21.03 28.92 28.92
平均 2.84 1.43 2.69 2.43
25% 1.01 0.78 0.92 0.89
50% 1.96 1.10 1.82 1.56
75% 3.60 1.65 3.40 3.00

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

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

分布について

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

weights-histogram-all.png

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

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

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

weights-histogram-each.png

最後に

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

リクエストはこちらから

前へ前へ

コーヒーではなく珈琲。独自スタイルのカフェは人気も高く、味わい深さが魅力。ウェブサイトの画像軽量化で、もっとページが快適になる

次へ次へ

今回はセ・リーグ!ファンの応援が選手の力になる!コアな情報があるオフィシャルサイトは、画像軽量化でサクサク閲覧できるようにすれば、ファンのギガも節約ができる!