← All guides

7 min read

Browser overlay performance for complex OBS scenes

Every OBS Browser Source is a small webpage with its own rendering, scripting, media, and network work. One counter is inexpensive, but duplicated chats, animated embeds, high-resolution pages, and sources kept alive across many scenes can compete with encoding and game capture.

Measure before optimizing

Open OBS Stats and record baseline CPU usage, rendering lag, and skipped frames. Enable browser sources one at a time while the representative game, camera, and encoder are running. A source that looks inexpensive on an empty scene may behave differently under normal GPU load.

Use a local recording to reproduce the full scene sequence. Performance problems during transitions often come from multiple scenes remaining active through nested scene sources rather than from the overlay visible on screen.

Avoid accidental duplication

Reference an existing Browser Source when the same live instance should appear in multiple scenes. Creating a new source with the same URL can create another WebSocket connection, polling loop, animation timeline, and media decoder.

For overlays that should reset independently, separate sources are appropriate. Name them by purpose and scene so intentional duplicates can be distinguished from copies left behind during layout work.

  • Remove unused sources instead of only hiding them forever.
  • Audit nested scenes for duplicate browser instances.
  • Keep preview animations representative but lightweight.

Choose lifecycle settings by behavior

Shutdown source when not visible reduces background resource use, but disconnects real-time pages and can reset state. Use it for static embeds and occasional pages; leave it off for timers or event listeners that must continue while another scene is active.

Refresh browser when scene becomes active trades predictable reloads for extra startup work. Avoid it on every transition. Use manual cache refresh after a configuration change unless the show format truly requires a new session each time.

Control resolution, animation, and network work

Do not give a 300-pixel card a 4K browser viewport unless its layout requires it. Match the viewport to the role of the source and avoid extreme transforms. Smooth, restrained motion is easier to encode than constant large-area blur and transparency effects.

Polling tools should use responsible intervals and EventSub tools should keep one connection per required channel. When a third-party embedded page is heavy, replace it with a purpose-built overlay or static graphic rather than trying to optimize code you do not control.