HTML5ゲームの読み込みが速い理由

はじめに： 速度=変換

ブラウザのゲームでは「、読み込みが速くなる」ということは、バイト数が少なく、リクエスト数が少なく、最初のフレームを待つ時間が少ないことを意味します。HTML5スタック（HTML/CSS/JS/WebGL/WASM）は、近代的な配信とキャッシュをボックス外に提供します。これは、短いTTFB、低いLCP、高速なTime-to-First-Interaction （TTT FI）。

1）ネットワークとトランスポート： Webがデフォルトで速い理由

HTTP/2 HTTP/3 （QUIC）

多重化：数十のアセット（スプライト、コードの塊）が1つの接続に入ってきます-TCP「嵐」はありません。

0-RTT TLS 1。3：速い握手、最初のバイトへのより短い方法。

スレッドの優先順位付け：重要な資産（エンジンの初期化、マスタートラス）が優先度が高くなります。

CDNとエッジキャッシュ

POPノードはプレーヤーキャッシュ不変アセット（ハッシュ名）に近い。

'stale-while-revalidate'では、古いバージョンを表示し、同時に新しいバージョンをプルアップすることができます。

タイトル（レシピ）：


キャッシュ制御：パブリック、max-age=31536000、不変
Content-Encoding： JS/CSS （Brotli）
クロスオリジン-リソースポリシー：クロスオリジン
Timing-Allow-Origin：

2）バンドリングとコード分割： 「必要なだけ」を提供"

ESモジュールと動的インポート

コードをレベルパックに分けます：「lobby」、「tutorial」、「level1-3」、「store」。

初期画面は初期化チャンク（50-150 KB gz/br）のみを受信します。残りはオンデマンドです。

木の揺れと縮小

未使用のエンジン/ライブラリAPIを削除します。

Terser/LightningCSS+module sideEffects=falseはデッドコードを積極的にカットします。

動的ロードの例：

js： js
//battle const {BattleRenderer}=await import （'。/chunks/battleRenderer。js'）；
新しいBattleRenderer（）。マウント（キャンバス）；

3）資産： 主要なバイト節約

［イメージ］

WebP/AVIF for UI/illustrations： PNG/JPEGと比較してサイズが25〜50％引きます。

スプライトリストとアトラスは、クエリとオーバーヘッドを削減します。

デバイス/クライアントヒント：'Accept-CH： DPR、 Width、 Viewport-Width'→server/edgeは目的のサイズを指定します。

3D/Textures

Basis/UASTC （KTX2）： GPUテクスチャの普遍的な圧縮（ETC1S/ASTC/BC）-1つのファイルをロードし、ビデオカード形式で解凍します。

ミープレベルは徐々にロードされます：最初の低品質→次にサンプル。

オーディオ

MP3/AACの代わりにOpus-低ビットレートで優れています。ストリーミングトラックをオンデマンド（ゾーンの音楽-ゾーンに入った後）。

ビデオ/cutscenes

短いビデオのためのWebCodecs/MediaSourceおよびLL-HLS；ポスターと最初のセグメント-プレロード、残り-怠惰。

4）エンジンの初期化： 最初「骨格」、次に「肉」

怠惰なシーングラフ

クリティカルシーンノード（UI、カメラ、背景）のみをロードします。モデル/シェーダー-必要に応じて。

バックグラウンドアセットジョブ：ブートローダーは優先キューを保持します。

「ウォームキャッシュ」としてのサービスワーカー（SW）

最初の訪問時にインストールされ、クライアントカーネル、アトラスマニフェスト、シェーダーをキャッシュします。

再ログインすると、オフライン対応とTTFI ~が即座に実行されます。

SW戦略の例（簡略化）：

js self。addEventListener （'fetch'、 e=>{
e。 respondWith（キャッシュ。（'game-v12'）を開きます。（async=>{
const cached=await 。c match （e。リクエスト）；
const fresh=fetch （e。リクエスト）。（r=>{c。 put （e。リクエスト、r。クローン（））；return r；}）；
キャッシュを返す        新鮮な；
}));
});

5） WebGLとWASM： ブラウザの「ネイティブ」速度

WebGL/WebGPU：シェーダーとレンダリング-GPU；CPUはロジック上に残ります。

WebAssembly （WASM）：エンジンの重い部分（物理、パス、解凍テクスチャ）はネイティブライブラリのように機能します。

Web Workers：テクスチャ/オーディオのデコード、レベル解析、メッシュの準備-主流ロックはありません。

FTF （First Time to Frame）最適化：

FTFのために、私たちは「美しさ」を犠牲にします。

6）ローディングの優先順位を付けること： 重要なパスを最初に許可して下さい

HTMLヒント：

html
<link rel="preconnect" href="https ：//cdn。例を示します。com">
<link rel=「preload」=「script' href=」/app。a1b2c3です。js" crossorigin>
<link rel="preload"="image" href="/atlases/ui@1x。avif」 imagesrcset=」/ui@2x。avif 2x">

優先順位の取得と'fetchpriority'

'fetchpriority=」high」'-初期化JSおよびUI atlases。

残りの資産はクリティカルパスに干渉しないように「低い」です。

7）「高速」HTML5ゲームのメトリックとSLO

ターゲット：

TTFB <200-300ミリ秒（CDN付き）。
LCP（ロビー）<1。8–2.モバイルで5 s。
Time-to-First-Interaction （TTFI） <2-3 。
ゲーム内の最初のフレーム<シーンの開始後1-2秒。
Total Download（初回実行）：1ロビーあたり1-3 MBを≤し、最初の戦闘/レベルまで5-10 MBを≤します。
再起動：SWキャッシュのおかげで0-200 KBを~します。

観測可能性：ネットワーク/地理/デバイス上のRUMイベント、Web Vitals、ブートローダの進行状況、タイムアウト障害。

8）パイプラインアセンブリ： 「薄い最初のバイト」を取得する方法"

1.バンドル解析（source-map-explorer、 webpack-bundle-analyzer）。

2.シーン/機能によってコード分割、「厚い」ポリフィルの除去（我々は現代のブラウザをターゲット）。

3.Minification： Terser/ESBuild+CSS Minify、 dev logicの削除。

4.画像：'sharp/squoosh'→AVIF/WebP、 'srcset'の生成。

5.テクスチャ：KTX2 （Basis/UASTC）のエンベロープ、作成mips。

6.オーディオ：Opus VBR 48-96 kbps、クリップ-ショートプレビュー。

7.マニフェストアセット（アーティファクト）+ハッシュ名+'immutable'。

8.PWA/SW：カーネルプリキャッシュ、'stale-while-revalidate'を持つアトラスのランタイムキャッシュ。

9.CDN： Preload-hints、 'Surrogate-Control'、 Soft-Purge by tag。

9）ランタイムパフォーマンス： ロード後にゲームを「飛ばす」ようにする

メインスレッド予算：ホールドJS-taski <50ミリ秒；重い-労働者で。

Batch render： group draw-calls、 use instancing。

GC圧力圧レントアレイ/バッファは、ゲームチックで「ゴミ」を避けます。

アダプティブFPS：ゲームプレイに触れることなくFPSが低下した場合のポストエフェクトを低減します。

10）アンチパターン（ゲームを遅くする）

1つのモノリシックバンドル5-15 MB「開始する」。

GPU圧縮なしのPNGテクスチャ、KTX2/Basisなし。

資産ローダーの'rng％ N'（決定はより重要ですが、これもPFについてです）。

キャッシュヘッダーなしまたはハッシュ名なしのリクエスト→各訪問"cold'。

全世界のためのポリフィル（IE、古いサファリ）-無駄にメガバイトを引っ張る。

SW/preloadsの欠如-繰り返された訪問は最初と同じくらい困難です。

「重い」フォント（'unicode-range'と'font-display： swap'のないいくつかのスタイル）。

11）高速HTML5ゲームチェックリスト

ネットワークとCDN

HTTP/3が有効になっています。CDN/プロバイダに'再接続'する。
'Cache-Control： immutable'+hash-émutable； 'stale-while-revalidate'。

コードとバンドル

コードはシーンごとに分割されます。ESモジュール；木の揺れ。
初期化JS ≤ 150KB br；コードカードは別々に。

アセット（Assets）

UIのためのWebP/AVIF；テクスチャのためのKTX2 Basis/UASTC。
アトラスとミップ；Opusオーディオ；怠惰なビデオ/cutscenes。

PWA/キャッシュ

Service Worker：カーネルプリキャッシュ、アトラスのランタイムキャッシュ。
2回目の訪問は「暖かい」キャッシュからロードされます。

優先順位

クリティカルチャンク/アトラスの'preload'；重要なのは'fetchpriority'である。
セカンダリシーンへの優先度が低い。

メトリクス

TTFB/LCP/TTFI/FTF/ダッシュボードのダウンロードバジェット。
体重増加、ヒット率CDN低下に関する警告。

12）ミニタイトルレシピ

静的（JS/CSS/Atlases）：


キャッシュ制御：パブリック、max-age=31536000、不変
コンテンツエンコーディング：br

JSONシーンのマニフェスト（しばしば変更）：


キャッシュ制御：public、 max-age=60、 stale-while-revalidate=120
サロゲート制御：max-age=60、 stale-if-error=600

フォント：


キャッシュ制御：パブリック、max-age=31536000、不変
クロスオリジン-リソースポリシー：クロスオリジン

Webプラットフォームは効率的なトランスポート（HTTP/2-3 TLS 1。3）、スマートデリバリー（CDN、キャッシュ、プリロード）、ライトアセット（WebP/AVIF、 KTX2、 Opus）およびインクリメンタル初期化（コード分割、遅延シーン、SWキャッシュ）。WebGL/WASMと厳密なメートル法の規律を追加すると、最初のフレームが数秒で表示され、再入力がほぼ瞬時になります。