Browser Gaming
Browser Gaming Performance Tips
A small Canvas game draws a few dozen shapes per frame. That is not demanding work for any device made in the last decade, so when one stutters the cause is almost always something else competing for the same resources.
The main thread problem
JavaScript in a browser runs on a single main thread per tab, and that thread also handles layout, styling, event handling and painting. Anything else occupying it delays your game's frame.
This is why a game can run perfectly on one site and badly on another with identical code. Advertising scripts, analytics, chat widgets and animation libraries all compete for the same thread, and the game has no priority over any of them.
Causes ranked by how often they are the answer
- Too many open tabsBackground tabs are throttled but still hold memory and occasionally wake up. Closing them is the single fix that works most often, especially on phones.
- Browser extensionsContent-blocking and script-injecting extensions run on every page. Testing in a private window with extensions disabled tells you quickly whether one is responsible.
- Battery saver modeThrottles the processor and often caps the frame rate. It will make any game feel sluggish and is easy to forget is enabled.
- Thermal throttlingSustained load makes a device hot and it slows itself to cool down. The characteristic sign is a game feeling fine for five minutes and then degrading.
- Advertising on the pageAd scripts share the game's main thread. This is a site problem rather than a device problem, and it is why heavily monetised game sites feel worse than their games deserve.
- Genuinely old hardwareRare for a 2D game. Worth checking last rather than first.
Quick diagnosis
| Symptom | Likely cause |
|---|---|
| Fine at first, worse after five minutes | Thermal throttling |
| Consistently slow from the start | Battery saver or an extension |
| Occasional sharp hitches | Another tab or a background process waking up |
| Slow on one site, fine on another | Advertising or scripts on that page |
| Slow everywhere including simple pages | Memory pressure - restart the browser |
What a well-built game does
Performance is partly the site's responsibility, and there are specific things a game should be doing.
- Pause when the tab is hidden. Every game here does, which saves battery and preserves your run.
- Cap the device pixel ratio. Rendering at three or four times resolution costs real performance for a difference nobody can see. Capping at two is standard.
- Cull off-screen objects. Anything outside the visible area still costs time to process.
- Avoid expensive drawing operations. Shadow blur is by far the most costly common operation; used on a handful of objects it is fine, on hundreds it is not.
- Keep the object count bounded. Deleting things that have scrolled away keeps the per-frame work constant however long a run lasts.
Measuring rather than guessing
Every desktop browser has developer tools with a performance panel. Recording a few seconds of gameplay shows exactly where the time is going, and it usually contradicts the assumption - people expect drawing to dominate and it is often something else entirely.
The frame rate counter, where your browser offers one, is the quickest first check: a steady 60 with occasional dips is a different problem from a consistent 30.
On phones specifically
- Close background tabs before playing - this matters much more on mobile than on desktop.
- Turn off battery saver if a game feels sluggish.
- Let the phone cool if performance degrades partway through a session.
- Lower the screen brightness to reduce both heat and battery use.
Key Takeaways
- JavaScript shares one main thread per tab, so anything else on the page delays your game's frames.
- Background tabs, extensions, battery saver and heat account for most stuttering.
- Degrading after five minutes points at thermal throttling; slow from the start points at throttling or an extension.
- Well-built games pause when hidden, cap the pixel ratio, cull off-screen objects and avoid shadow blur.
- Measure with the developer tools rather than guessing - the bottleneck is often not what you expect.
Frequently Asked Questions
Why does a simple game stutter on a fast computer?
Almost always something else on the main thread - another tab, an extension, or scripts on the page.
Do these games work on old phones?
They should. The drawing work is minimal and the games are built to keep the per-frame object count bounded.
Does closing other tabs really help?
It is the fix that works most often, particularly on phones where memory is tighter.
Why does my phone get hot?
Sustained processor and screen use. Lower the brightness and let it cool if performance starts degrading.
Do ad blockers improve game performance?
On ad-heavy sites, often noticeably, because advertising scripts share the game's main thread. This site is built to work fine with one.
