Optimizing HTML5 Games: 10 Years of Learnings - Will Eastcott, JS GameDev Summit 2022

Optimizing HTML5 Games: 10 Years of Learnings

• Gzip or compress data on infrastructure to reduce load times
• Use glTF format for 3D assets, which stores data in GPU-ready format
• Compress large texture data using Basis format
• Limit graphical complexity to reduce CPU and GPU usage
• Use batching to combine similar models into combined draw calls
• Optimize draw calls by atlasing textures and reducing number of draw calls
• Use Profile and Usage tab in Chrome DevTools to investigate load times and identify hotspots
• Consider using Web Workers to offload CPU-intensive tasks
• Use tools like Spectre.js to profile and optimize game performance
• Compress glB files using technology like Draco
• Use gzip or Brotli compression on backend services provider
• Prioritize optimization early in development cycle
• Design games with performance in mind, considering platform limitations
• Consider using JSON format for model data, as it compresses well
• Use Performance tab in Chrome DevTools to investigate frame rate and identify optimization opportunities
• Render scene with batching and atlasing textures to reduce draw calls