Pourquoi les jeux HTML5 sont plus rapides à charger

Entrée : taux = conversion

Pour les jeux dans le navigateur, « charge plus rapide » signifie : moins d'octets, moins de requêtes, moins d'attente pour la première image. La pile HTML5 (HTML/CSS/JS/WebGL/WASM) permet une livraison et une mise en cache à la pointe de la technologie, ce qui signifie un TTFB court, un LCP bas et un Time to First-Interaction rapide (TTTFI).

1) Réseau et transport : pourquoi le web est plus rapide par défaut

HTTP/2 и HTTP/3 (QUIC)

Multiplexage : des dizaines d'assets (sprites, cuvettes de code) vont avec une seule connexion - pas de « tempêtes » TCP.

0-RTT и TLS 1. 3 : poignée de main rapide, chemin court jusqu'au premier octet.

Hiérarchisation des threads : Les assets critiques (initialisation du moteur, atlas maître) sont plus prioritaires.

CDN et cache sur le bord

Les nœuds POP sont plus proches du joueur, mettent en cache les assets immuables (noms hash).

'Stale-while-revalidate 'permet d'afficher l'ancienne version et d'en tirer une nouvelle en parallèle.

Titres (recette) :


Cache-Control: public, max-age=31536000, immutable
Content-Encoding: br   // для JS/CSS (Brotli)
Cross-Origin-Resource-Policy: cross-origin
Timing-Allow-Origin:

2) Bandling et code-split : nous livrons « exactement autant que nécessaire »

Modules ES et importation dynamique

Nous divisons le code en packs de niveau : « lobby », « tutorial », « niveaux 1-3 », « magasin ».

Le premier écran ne reçoit que l'initialisation (50-150 KB gz/br). Le reste est sur demande.

Tree-shaking et minification

Nous supprimons les API moteur/bibliothèques inutilisées.

Terser/LightningCSS + module sideEffects = false pour l'abattage agressif du code mort.

Exemple de chargement dynamique :

js
//Nous ne chargeons le rendu de combat qu'au début du combat const {BattleRenderer} = await import ('./chunks/battleRenderer. js');
new BattleRenderer(). mount(canvas);

3) Assets : La principale économie d'octets

Images

WebP/AVIF pour UI/illustrations : moins 25-50 % à la taille contre PNG/JPEG.

Les feuilles de sprite et les atlas réduisent le colle dans les demandes et les frais généraux.

Device/Client Hints : 'Accept-CH : DPR, Width, Viewport-Width' → le serveur/edge donne la taille souhaitée.

3D/Textures

Basis/UASTC (KTX2) : compression universelle des textures GPU (ETC1S/ASTC/BC) - nous chargeons un fichier, déballons au format de carte graphique.

Les mip-niveaux sont chargés progressivement : d'abord la qualité inférieure → puis апсемпл.

Audio

Opus au lieu de MP3/AAC - mieux avec de faibles bits ; streaming des pistes à la demande (musique de zone - après l'entrée dans la zone).

Scènes vidéo/kat

WebCodes/MediaSource et LL-HLS pour les courtes vidéos ; l'affiche et le premier segment sont pré-démarrage, le reste est paresseux.

4) Initialisation du moteur : d'abord « squelette », puis « viande »

Lazy scene graph

Nous ne chargeons que les nœuds critiques de la scène (UI, caméra, arrière-plan). Modèles/shaders - par nécessité.

Fond asset jobs : le chargeur tient la file d'attente avec les priorités.

Service Worker (SW) en tant que « cache chaud »

Inséré lors de la première visite et cache le noyau du client, le manifeste des atlas, les shaders.

Lors de la reconnexion, la disponibilité hors ligne et le TTFI ~ instantanément.

Exemple de stratégie SW (simplifié) :

js self. addEventListener('fetch', e => {
e. respondWith(caches. open('game-v12'). then(async c => {
const cached = await c. match(e. request);
const fresh = fetch(e. request). then(r => { c. put(e. request, r. clone()); return r; });
return cached          fresh;
}));
});

5) WebGL et WASM : vitesse « native » dans le navigateur

WebGL/WebGPU : shader et rendu - sur GPU ; Le CPU reste logique.

WebAssembly (WASM) : les parties lourdes du moteur (physique, chemin, déballage des textures) fonctionnent presque comme des bibliothèques natives.

Threads (Workers Web) : décode texture/audio, parsing des niveaux, préparation des épées - sans verrouillage du thread principal.

Optimisation de la première trame (FTF - First Time to Frame) :

Pour le FTF, nous sacrifions la « beauté » : nous chargeons low-poly/low-res, avant-strimim high-res plus tard.

6) Hiérarchiser le téléchargement : laisser l'important passer en premier

Indices HTML :

html
<link rel="preconnect" href="https://cdn. example. com">
<link rel="preload" as="script" href="/app. a1b2c3. js" crossorigin>
<link rel="preload" as="image" href="/atlases/ui@1x. avif" imagesrcset="/ui@2x. avif 2x">

Priorités fetch et « fetchpriority »

"fetchpriority =" high "est l'initialisation de la JS et de l'atlas UI.

Les autres assets sont « low » pour ne pas interférer avec la voie critique.

7) Métriques et SLO « rapide » HTML5 jeux

Objectifs :

TTFB <200-300 ms (avec CDN).
LCP (lobby) <1. 8–2. 5 s sur mobile.
Time-to-First-Interaction (TTFI) < 2–3 с.
First Frame In-Game <1-2 avec après le début de la scène.
Total Download (la première mise en marche) : ≤ 1-3 MB sur le lobby, ≤ 5-10 MB jusqu'au premier combat/niveau.
Redémarrage : ~ 0-200 Ko grâce au cache SW.

Observation : Événements RUM sur les réseaux/géo/appareils, Web Vitals, progrès du chargeur, pannes sur les délais d'attente.

8) Assemblage Pipline : Comment obtenir un « mince premier octet »

1. Analyse de bandle (source-map-explorer, webpack-bundle-analyzer).

2. Code-split par scènes/fiches, suppression des polyphylles « épais » (nous ciblons les navigateurs modernes).

3. Minification : Terser/ESBuild + CSS Minify, suppression de la logique dev.

4. Images : 'sharp/scoosh' → AVIF/WebP, génération 'srcset'.

5. Textures : enveloppe en KTX2 (Basis/UASTC), création de mips.

6. Audio : Opus VBR 48-96 kbps, clips - raccourcis en avant-première.

7. Manifeste des assets (artefact) + noms hash + 'immutable'.

8. PWA/SW : pré-cache du noyau, cache runtime des atlas avec 'stale-while-revalidate'.

9. CDN : Preload-hint, 'Surrogate-Control', Soft-Purge par tags.

9) Performance Rantim : pour que le jeu « vole » après le téléchargement

Main-thread budget : tenez un JS-tasky <50 ms ; lourd - à Workers.

Butch rendu : regroupez les draw-calls, utilisez l'instancing.

GC-pression : louer des matrices/tampons, éviter les « débris » dans les tics de jeu.

FPS adaptatif : réduisez la qualité des effets postérieurs lorsque le FPS tombe sans toucher au gameplay.

10) Anti-modèles (ce qui rend le jeu lent)

Un bandle monolithique de 5 à 15 Mo « au départ ».

Texture PNG sans compression GPU, pas de KTX2/Basis.

'rng % N' dans le chargeur d'assets (la déterminisme est plus importante - mais c'est aussi sur le PF).

Les requêtes sans en-têtes cache ou sans noms hash → chaque visite est « froide ».

Polyphylles pour le monde entier (IE, vieux Safari) - tirer des mégaoctets pour rien.

L'absence de SW/pré-démarrage - les visites répétées sont aussi lourdes que la première.

Polices « lourdes » (plusieurs caractères sans 'unicode-range' et 'font-display : swap').

11) Chèque-feuille de jeu HTML5 rapide

Réseau et CDN

HTTP/3 inclus ; 'preconnect' vers le CDN/les fournisseurs.
`Cache-Control: immutable` + hash-имена; `stale-while-revalidate`.

Code et bandles

Code-split par scène ; Modules ES ; tree-shaking.
Initialisation JS ≤ 150 KB br ; les cartes de code séparément.

Les assets

WebP/AVIF pour l'IA ; KTX2 Basis/UASTC pour les textures.
Atlas et mips ; Opus audio ; vidéos/vidéos paresseuses.

PWA/cache

Service Worker : pré-cache du noyau, atlas runtime-cache.
La visite répétée est chargée de cache chaud.

Priorités

'preload' des cuves critiques/atlas ; 'fetchpriority' pour l'important.
Faible priorité sur les scènes secondaires.

Métriques

TTFB/LCP/TTFI/FTF/Download-budget sur dashboard.
Alerte sur la croissance du poids, la chute du hit-ratio CDN.

12) Les mini recettes des titres

Statique (JS/CSS/atlas) :


Cache-Control: public, max-age=31536000, immutable
Content-Encoding: br

Les manifestes JSON des scènes (changent souvent) :


Cache-Control: public, max-age=60, stale-while-revalidate=120
Surrogate-Control: max-age=60, stale-if-error=600

Polices :


Cache-Control: public, max-age=31536000, immutable
Cross-Origin-Resource-Policy: cross-origin

Les jeux HTML5 se chargent plus rapidement parce que la plate-forme Web combine un transport efficace (HTTP/2-3, TLS 1. 3), livraison intelligente (CDN, cache, pré-démarrage), assets légers (WebP/AVIF, KTX2, Opus) et initialisation incrémentielle (code-split, scènes paresseuses, cache SW). Ajoutez WebGL/WASM et une discipline rigoureuse des métriques - et la première image apparaît en quelques secondes, et la réintroduction devient presque instantanée.