UnityのWebゲームの読み込み時間を測る（軽量化の前後で比較）

ビルドを 10.1MB から 7.37MB に減らしました。で、実際どれだけ速くなったのか。

サイズの記事に「測れたら追記する」と書いたので、測りました。

結果

起動が19%速くなりました。 ダウンロードが27%減った分に加えて、展開とコンパイルの時間も減っています。

ダウンロードの内訳（本番・光回線）

配信は自分の VPS（Caddy が Content-Encoding: br を返す）です。ブラウザのキャッシュを使わずに取り直して測りました。

約78Mbps 出ています。この回線なら 1.4秒で遊び始められる。 ただし、これは速い回線での話です。実際には回線が細いほど、サイズを減らした効果が大きく出ます。

見落としやすい数字：圧縮を外したあとのサイズ

ダウンロード量ばかり見ていましたが、展開後のサイズのほうが大きく減っていました。

展開後のサイズはメモリと wasm のコンパイル時間に効きます。14.7MB 分のコードをコンパイルしなくてよくなったということです。起動が19%速くなったのは、ここが効いています。

この数字はブラウザの Resource Timing から取れます。

performance.getEntriesByType('resource').map(r => ({
  file: r.name.split('/').pop(),
  transferred: r.encodedBodySize,   // 転送量（圧縮後）
  expanded:    r.decodedBodySize,   // 展開後
}))

計測用のページを作る

本番のページにはローディング表示や全画面ボタンが載っていて、どこが「遊べるようになった瞬間」なのかが分かりにくい。計測用の小さい HTML をビルドのフォルダに置きました。

<canvas id="c" width="800" height="450"></canvas>
<script>
var t0 = performance.now();
var s = document.createElement("script");
s.src = "Build/WebGL.loader.js";
s.onload = function () {
  createUnityInstance(document.getElementById("c"), {
    dataUrl:      "Build/WebGL.data.br",
    frameworkUrl: "Build/WebGL.framework.js.br",
    codeUrl:      "Build/WebGL.wasm.br",
    streamingAssetsUrl: "StreamingAssets",
    companyName: "m", productName: "m", productVersion: "1"
  }).then(function () {
    window.READY = performance.now() - t0;   // ここが「遊べるようになった」時刻
  });
};
document.body.appendChild(s);
</script>

これをビルドごとに置けば、同じ物差しで比べられます。

スマホ幅で見る（エミュレーション）

実機ではなく、ブラウザの端末エミュレーション（Pixel 8 の UA・375×812・タッチ5点）です。

• 起動する。コンソールにエラーなし
• 縦画面いっぱいにレイアウトされ、HUD とブロックとパドルが全部入る
• タップで開始・発射でき、スコアも入る

ただし1つ気になる数字がありました。

描画している画素は 121.8万。スマホの GPU にとっては軽くない量です。Unity の WebGL テンプレートには config.devicePixelRatio = 1; という行（既定ではコメントアウト）があり、これを有効にすると等倍で描いて負荷を落とせます。見た目は少しぼやけます。

実機で fps を測ってから決めることにしました。

fps：60.1（ただし自動では測れなかった）

プレイ中の実測です。

環境は Chrome（Windows 11）・GeForce RTX 2080 Ti です。

60 に張り付いています。 ただしこれは「速い」ことの証明にはなりません。ディスプレイが 60Hz なので、上限に当たっているだけです。1フレームにどれだけ余裕が残っているかは、この測り方では出ません。低い性能の端末で測るのが次の手です。

詰まったところ：非表示のタブでは測れない

requestAnimationFrame の呼ばれた回数を10秒数えれば fps が出る。そう思って自動操作のブラウザで走らせたら、10秒で1回しか呼ばれませんでした。

{ n: 1, fps: null, hidden: true }

document.hidden が true。画面に映っていないタブでは requestAnimationFrame が進みません。 Unity の描画ループも同じ仕組みなので、そもそも描画されていません。バックグラウンドのタブに切り替えても同じです。

同じ理由で、ページを開いた直後の1回目は低く出ます。 ウィンドウを切り替えている最中のフレームが欠けるためです。10秒ごとに測り直して、2回目以降の値を見てください。

結局、fps だけは人が見ている画面で測りました。 計測用ページに数字を出して、実際に遊んでもらった値が上の 60.1 です。

まとめ

• ダウンロード 0.76秒＋起動 0.62秒＝約1.4秒（78Mbps の回線で）
• 軽量化で起動が19%速くなった（705ms → 569ms）
• 展開後のサイズはダウンロード量より大きく減る（wasm −38%）。ここが起動時間に効く
• 計測はタブを毎回開き直す。同じタブだと WebGL のコンテキストが尽きて黙って止まる
• fps は 60.1。ただし 60Hz の上限に当たっているだけで、余裕の量までは分からない
• fps は見えているタブでしか測れない。自動化からは外す