How to Actually Fix Your HTML5 WebGL FPS Drops
Listen, there's nothing more frustrating than building a beautiful browser game, getting it running locally, and then watching it completely stutter and die as soon as you open it on a mobile phone. Browsers are amazing, but they are also greedy. If you don't play nice with the JavaScript event loop, your game is going to feel like a slideshow.
I've spent years tracking down these annoying performance bugs here at Movuter Arcade. Here is the actual, practical stuff I do to keep games locked at 60 FPS.
1. Ask the Browser nicely for the GPU
A lot of times, your game is running on the CPU because you didn't explicitly ask for hardware acceleration. If you're using Three.js or raw WebGL, you have to tell the browser you want high performance. Otherwise, it might just use integrated graphics to save battery.
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('gameCanvas'),
powerPreference: "high-performance",
antialias: window.devicePixelRatio < 2,
alpha: false,
stencil: false
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
2. Stop Making So Much Garbage
The single biggest reason for random frame hitches in JavaScript games is the Garbage Collector (GC). If you create a new object (like a bullet, a particle, or a vector) every single frame, V8 eventually has to clean all that up. When it cleans it up, your game pauses.
The Fix: Object Pools. Instead of making a new bullet every time you shoot, make 100 bullets when the game loads. Keep them invisible. When you shoot, just grab an invisible one, move it to the gun, and make it visible. When it hits a wall, turn it invisible again. Recycle everything.
3. Don't Touch the DOM While Drawing
If you have to read a DOM element's size (like clientWidth) and then write to a DOM element's style (like changing a HUD element) inside your game loop, you are causing something called "Layout Thrashing." The browser is forced to recalculate the entire page layout on every frame. Don't do this. Cache your DOM sizes outside your main loop.
4. Ditch the MP3 Files
Loading MP3s over the network and waiting for them to decode causes huge stutters, especially on iOS. If you just need a simple beep, laser sound, or explosion, learn how to use the native Web Audio API. You can synthesize those sounds instantly with oscillator nodes. No downloading, no decoding, zero latency.
5. Your Images Are Too Big
If you're still using raw PNG files for all your textures, you're killing your VRAM. A single big PNG takes up a ridiculous amount of memory once it's unpacked by the GPU. Switch your 2D assets to WebP. It cuts the file size drastically without ruining the art. We use WebP for basically everything at Movuter now, and it cut our initial load times in half.
6. Batch Your Sprites
If you tell the GPU to draw 100 different images, that's 100 draw calls. That's a lot of overhead. If you pack all 100 images into one giant image (a sprite atlas), you only have to send it to the GPU once. The fewer draw calls you have, the happier your CPU is going to be.
7. Use the Profiler, Don't Guess
When your game lags, your first instinct is to guess what's causing it. Stop guessing. Open Chrome DevTools, go to the Performance tab, hit record, and play for 10 seconds. Look for the tall red bars. Click on them. The browser will literally tell you the exact function that took 15 milliseconds to run. Fix that function.
My Quick Checklist
- Always use
requestAnimationFrame. Never usesetInterval. - Request
"high-performance"WebGL contexts. - Pool your objects so the Garbage Collector leaves you alone.
- Stop reading the DOM in your game loop.
- Compress your textures to WebP.
- Cap your
devicePixelRatioto 2. Rendering at 3x or 4x resolution on a phone is a waste of power.
Stuff You Might Be Wondering
Why does it lag on my iPhone but not my PC?
Because a phone CPU is way slower at chewing through JavaScript. If your game loop isn't insanely optimized, a phone will choke on it.
Is OffscreenCanvas worth it?
Only if you're building something really complex. Moving drawing to a Web Worker keeps the main thread free, but it adds a lot of headache. For simple arcade games, it's usually overkill.
Check Out the Results
We basically treat these rules as law on Movuter Arcade. Go play Cyber Runner or Car Stunt 3D on your phone, and you'll see how smooth a web game can feel when you manage your memory and draw calls correctly.
