Game Performance

1. Audit your bundle: Unzip your build and examine every file. Look for files that should not be there (development tools, source maps, documentation, unused assets).
2. Minify JavaScript: Use a minifier like Terser, UglifyJS, or your engine’s built-in minification. Minification can reduce JS file size by 50-70%.

   npx terser game.js -o game.min.js --compress --mangle
   
3. Minify CSS: Use a CSS minifier like cssnano or clean-css.
4. Remove unused code: Use tree shaking (available in bundlers like Webpack, Rollup, and esbuild) to eliminate JavaScript code that is never called.
5. Compress images: See Asset Optimization below.
6. Use audio compression: See Audio Optimization below.
7. Defer non-essential assets: Only include assets needed for the first screen in your initial bundle. Load everything else after the game starts.

• Resize images to their display size: If an image is displayed at 100x100 pixels, do not include a 1000x1000 source file. Resize it to 100x100 (or 200x200 for high-DPI displays).
• Use lossy compression when possible: For most game art, a quality setting of 75-85% produces images that look great but are significantly smaller.
• Use tools like these for batch compression:
  • TinyPNG⁠ — PNG and WebP compression
  • Squoosh⁠ — Compare formats and quality settings
  • ImageOptim⁠ — Lossless optimization
• Remove metadata: Strip EXIF data and other metadata from images.

• Pack sprites into atlases using tools like TexturePacker⁠, ShoeBox⁠, or your game engine’s built-in atlas tools.
• A single 2048x2048 atlas is better than 100 individual 64x64 sprites.
• Keep atlas dimensions as powers of 2 (256, 512, 1024, 2048) for optimal GPU memory usage.

• ETC1/ETC2 — Supported on most mobile devices.
• ASTC — Higher quality, supported on newer devices.
• Basis Universal — A “supercompressed” format that can be transcoded to the best format for the current device.

• Never ship WAV files. Convert them to MP3 or OGG.
• Use mono audio for sound effects. Stereo doubles the file size and is usually unnecessary for short sound effects.
• Reduce sample rate: 22,050 Hz is sufficient for most sound effects. Use 44,100 Hz only for music where quality is critical.
• Reduce bitrate: 128 kbps is sufficient for music in most games. 64 kbps works for sound effects.
• Trim silence: Remove any silence at the beginning or end of audio files.
• Use audio sprites: Combine short sound effects into a single audio file and play specific segments, similar to sprite atlases for images.

• Use system fonts when possible: System fonts (like -apple-system, sans-serif) do not add any size to your bundle.
• Subset custom fonts: If you must use a custom font, use a tool like Font Squirrel⁠ or glyphhanger⁠ to include only the characters you actually use.
• Use WOFF2 format: WOFF2 is the most compressed web font format and is supported by all modern browsers.

1. Initial bundle: Include only what is needed to start the game — the core engine, the first screen’s assets, and the loading UI. Target under 5 MB.
2. During loading screen: While the SDK loading screen is showing, begin fetching assets for the first level or main menu.
3. After game start: Load subsequent levels, optional features, and bonus content in the background as the player plays.

FBInstant.initializeAsync().then(function() {
  var totalAssets = 10;
  var loadedAssets = 0;

  function onAssetLoaded() {
    loadedAssets++;
    var progress = Math.floor((loadedAssets / totalAssets) * 100);
    FBInstant.setLoadingProgress(progress);

    if (loadedAssets === totalAssets) {
      FBInstant.startGameAsync().then(function() {
        startGame();
      });
    }
  }

  // Load each asset and call onAssetLoaded when done
  loadImage('hero.png', onAssetLoaded);
  loadImage('background.png', onAssetLoaded);
  loadAudio('music.mp3', onAssetLoaded);
  // ... more assets
});

• Keep the initial bundle small.
• Update assets without re-uploading the entire bundle.
• Load assets on demand.

• Use a bundler like Webpack, Rollup, esbuild, or Parcel to combine your modules into a single file and apply minification.
• Enable tree shaking to remove unused code.
• Generate source maps separately (do not include them in your upload bundle) so you can debug issues if needed.

• Object pooling: Pre-allocate objects (bullets, particles, and enemies) and reuse them instead of creating new ones. See Object Pooling below.
• Avoid creating objects in the game loop: Do not use new, {}, [], or string concatenation inside your update() function.
• Reuse vector/point objects: Instead of creating {x: 0, y: 0} every frame, create one and update its properties.
• Use typed arrays: For numerical data (positions, velocities), Float32Array is more memory-efficient than regular arrays.

// Bad: Creates a new object every frame
function update() {
  var velocity = { x: 1, y: 0 }; // New object every frame!
  player.x += velocity.x;
  player.y += velocity.y;
}

// Good: Reuse an existing object
var velocity = { x: 1, y: 0 };
function update() {
  player.x += velocity.x;
  player.y += velocity.y;
}

function gameLoop(timestamp) {
  update(timestamp);
  render();
  requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);

var lastTime = 0;

function gameLoop(timestamp) {
  var deltaTime = (timestamp - lastTime) / 1000; // Convert to seconds
  lastTime = timestamp;

  // Move 100 pixels per second, regardless of frame rate
  player.x += 100 * deltaTime;

  render();
  requestAnimationFrame(gameLoop);
}

// Bad: Layout thrashing
elements.forEach(function(el) {
  var width = el.offsetWidth;       // Read (forces layout)
  el.style.width = (width + 10) + 'px'; // Write (invalidates layout)
});

// Good: Batch reads, then batch writes
var widths = elements.map(function(el) {
  return el.offsetWidth; // All reads first
});
elements.forEach(function(el, i) {
  el.style.width = (widths[i] + 10) + 'px'; // All writes after
});

• Minimize draw calls: Batch similar objects together. Use sprite atlases so multiple sprites can be drawn in a single draw call.
• Reduce canvas resolution on low-end devices: Rendering at 75% resolution and scaling up can double frame rates with minimal visual difference.

  var scale = isLowEndDevice() ? 0.75 : 1.0;
  canvas.width = window.innerWidth * scale;
  canvas.height = window.innerHeight * scale;
  canvas.style.width = window.innerWidth + 'px';
  canvas.style.height = window.innerHeight + 'px';
• Avoid overdraw: Do not draw objects that are completely hidden behind other objects.
• Use willReadFrequently for 2D canvas if you call getImageData often:

  var ctx = canvas.getContext('2d', { willReadFrequently: true });

function createPool(factory, size) {
  var pool = [];
  for (var i = 0; i < size; i++) {
    var obj = factory();
    obj.active = false;
    pool.push(obj);
  }

  return {
    get: function() {
      for (var i = 0; i < pool.length; i++) {
        if (!pool[i].active) {
          pool[i].active = true;
          return pool[i];
        }
      }
      // Pool exhausted -- optionally grow it
      var obj = factory();
      obj.active = true;
      pool.push(obj);
      return obj;
    },
    release: function(obj) {
      obj.active = false;
    },
    getActiveObjects: function() {
      return pool.filter(function(obj) { return obj.active; });
    }
  };
}

// Usage
var bulletPool = createPool(function() {
  return { x: 0, y: 0, vx: 0, vy: 0, active: false };
}, 50);

function fireBullet(x, y) {
  var bullet = bulletPool.get();
  bullet.x = x;
  bullet.y = y;
  bullet.vx = 0;
  bullet.vy = -500;
}

• Unload textures for screens or levels that are no longer visible.
• Use smaller textures when possible. A 1024x1024 texture uses 4x less memory than 2048x2048.
• Use texture compression formats (ETC2, ASTC) to reduce GPU memory usage by 4-8x.

• Cache aggressively: Use the browser’s cache (via proper HTTP headers on your hosted assets) to avoid re-downloading assets on subsequent visits.
• Compress network payloads: Use gzip or Brotli compression for API responses and data files.
• Minimize API calls: Batch multiple data requests into single calls when possible.
• Handle offline gracefully: Detect network failures and show meaningful error messages instead of crashing.
• Use exponential backoff for retries: When a network request fails, wait increasing intervals before retrying (1s, 2s, 4s, 8s, and so on) to avoid overwhelming the server.

function fetchWithRetry(url, retries, delay) {
  return fetch(url).catch(function(err) {
    if (retries > 0) {
      return new Promise(function(resolve) {
        setTimeout(function() {
          resolve(fetchWithRetry(url, retries - 1, delay * 2));
        }, delay);
      });
    }
    throw err;
  });
}

// Usage: try up to 3 times, starting with a 1-second delay
fetchWithRetry('https://example.com/data.json', 3, 1000);

1. Test on a real low-end Android device: Borrow or purchase an inexpensive Android phone (under $100). This will reveal performance issues you cannot see on your development machine.
2. Use Chrome DevTools throttling: If you do not have a low-end device, use Chrome DevTools to simulate slower conditions.
   • CPU throttling: Open DevTools > Performance > CPU dropdown > select 4x slowdown or 6x slowdown.
   • Network throttling: Open DevTools > Network > Throttling dropdown > select Slow 3G or Fast 3G.
3. Monitor performance metrics:
   • Frame rate: Use performance.now() or Chrome DevTools’ FPS meter to measure frame rate. Target 60 fps; accept 30 fps minimum.
   • Memory usage: Use Chrome DevTools > Memory to take heap snapshots and identify memory growth.
   • Load time: Measure time from page load to startGameAsync() completion.
4. Test on iOS: iOS WebViews behave differently from Android. Audio autoplay policies, memory limits, and rendering behavior vary. Test on a real iPhone or iPad if possible.

1. Open your game in Chrome.
2. Open DevTools (F12 or Ctrl+Shift+I).
3. Go to the Performance tab.
4. Click the record button and play your game for a few seconds.
5. Stop recording and analyze the flame chart.
6. Look for:
   • Long frames (frames that take more than 16.67ms, which means you dropped below 60 fps).
   • Frequent garbage collection (GC) events.
   • Heavy scripting in the main thread.
   • Layout recalculations caused by DOM manipulation.

• Report progress accurately: If you are loading 20 assets, update progress after each one loads.
• Start at 0 and end at 100: The progress should go from 0 to 100 smoothly.
• Only call startGameAsync() when truly ready: Do not start the game before essential assets are loaded.
• Make progress updates feel smooth: Avoid long pauses at any percentage.

• Do not jump from 0 to 100 instantly: This makes the loading bar useless and can look broken.
• Do not report fake progress: Do not use a timer to slowly increment progress if nothing is actually loading. If the real loading finishes at 40% fake progress, the player will see a jarring jump.
• Do not get stuck at 99%: If your progress reaches 99% and then takes 10 more seconds, players will think the game is frozen. Design your loading pipeline so the final steps are fast.
• Do not call setLoadingProgress() after startGameAsync(): The loading bar is gone at that point. It has no effect.

FBInstant.initializeAsync().then(function() {
  var assetManifest = [
    { type: 'image', url: 'sprites/hero.png' },
    { type: 'image', url: 'sprites/enemies.png' },
    { type: 'image', url: 'sprites/background.png' },
    { type: 'image', url: 'sprites/ui.png' },
    { type: 'audio', url: 'audio/music.mp3' },
    { type: 'audio', url: 'audio/sfx.mp3' },
    { type: 'data',  url: 'data/levels.json' },
    { type: 'data',  url: 'data/config.json' }
  ];

  var loaded = 0;
  var total = assetManifest.length;

  function updateProgress() {
    loaded++;
    var percent = Math.floor((loaded / total) * 100);
    FBInstant.setLoadingProgress(percent);

    if (loaded === total) {
      FBInstant.startGameAsync().then(function() {
        initializeGame();
      });
    }
  }

  assetManifest.forEach(function(asset) {
    loadAsset(asset).then(updateProgress);
  });
});

• Initial bundle is under 5 MB
• All JavaScript is minified
• Unused code has been removed (tree shaking)
• No source maps included in the upload bundle
• No development-only files (tests, docs, READMEs)

• Images are in WebP format (or PNG/JPEG where appropriate)
• Images are resized to their display dimensions
• Sprites are packed into atlases
• No unnecessarily large images

• No WAV files in the bundle
• Sound effects are mono
• Audio bitrate is appropriate (128 kbps max for music, 64 kbps for SFX)
• Silence is trimmed from audio files

• Game targets 60 fps (or 30 fps minimum)
• Game loop uses requestAnimationFrame
• Movement and animation use delta time
• No objects created inside the game loop (use object pooling)
• No layout thrashing (if using DOM elements)

• No memory leaks (verified with DevTools heap snapshots over several minutes of play)
• Event listeners are cleaned up when objects are destroyed
• Unused textures are unloaded when no longer needed
• Object pooling is used for frequently created/destroyed objects

• FBInstant.setLoadingProgress() reports accurate progress
• Loading progress increases smoothly (no long pauses)
• FBInstant.startGameAsync() is called only when the game is ready
• Non-essential assets are loaded progressively after game start

• Tested on a low-end Android device (or with CPU throttling)
• Tested on iOS
• Tested on desktop
• Tested on slow network (3G throttling)
• No crashes after extended play sessions (5+ minutes)