Optimizing HTML5 Games: 10 Years of Learnings
summary
PlayCanvas is an open source WebGL engine that packs concrete tactics: use Chrome DevTools and gzip to find big requests, convert 2.2 MB JPEGs to basis textures (down to ~1.7 MB, GPU memory 1/5–1/10, avoids 160 ms JPEG decode), switch JSON meshes to glTF/glb (pass time drops from ~1.25 s to ~50 ms) and compress big models with Draco (21 MB → ~1.8 MB, decompression ~0.4 s in a web worker), use spector.js, atlas textures and batching to cut draw calls and shave seconds off load and frame stalls.
AI-written summary · about
chapters (6)
- 0:00Introduction to optimization
- 3:18Optimizing load times
- 8:53Mesh and data optimization
- 13:58Game design for performance
- 16:04Frame rate optimization
- 22:19Conclusion and best practices
related talks
28mTurbo charging 2D on the web
20mOptimizing assets for graphics heavy Web Applicatoins: tips and tricks from the game dev background
44mSponsored session: Progressive Web Games
58mRendering performance from the ground up
47mOptimising for the Web
33mSaving the Web 16 Milliseconds at a Time
39mLife of a pixel: A visual explanation of rendering performance
34mModern Web Game Development