Stream Overlays and Alerts Without Wrecking Your Performance
How to build a clean overlay and alert setup in OBS that does not cost you frames, from someone who ran a cluttered one for two years.
The short answer
Browser-source overlays are the main performance cost in a typical stream setup because each one runs a separate Chromium instance. Consolidating alerts, chat and goals into as few browser sources as possible, and disabling the ones not visible on the current scene, recovers most of that cost. Two or three well-placed elements read better on stream than a busy frame full of widgets.
Verified and last updated August 12, 2026.
- Time needed
- 30 min
- Difficulty
- Beginner
- Read time
- 4 min
I ran a stream for two years with an overlay that had a chat box, a follower goal, a recent-subscriber list, a now-playing widget and an animated frame. I thought it looked professional. What it actually did was eat about eight percent of my CPU and push my encoder into dropping frames every time a fight got busy.
Then I deleted all of it except the camera and one alert. Nobody noticed. My dropped frames went to zero.
Each browser source is a whole browser
A browser source in OBS is a full Chromium instance. Six overlay widgets means six browsers running at your canvas frame rate, on the same machine that is rendering your game.
The cost, measured
Those numbers are from my own machine, not a benchmark suite, and yours will differ. The shape is what matters: the relationship between browser source count and dropped frames is close to linear.
Step 1: Count your browser sources
Open the sources list on every scene and count the browser entries. Include hidden ones — a hidden source in OBS still runs unless you have explicitly told it not to.
Most people I have helped with this are surprised by the number. Widgets accumulate. You add a goal bar for a subathon and never take it off.
Step 2: Consolidate into one overlay page
Every major alert provider lets you build a combined overlay containing alerts, chat, goals and anything else, served from a single URL. That is one browser source instead of four, and the CPU cost is close to the cost of one.
If you are hand-rolling your overlay in HTML, the same applies: one page with everything positioned absolutely beats four pages layered in OBS.
Step 3: Turn off inactive sources
In the browser source properties there are two options worth enabling:
- Shutdown source when not visible — stops the Chromium instance entirely on scenes where the source is hidden
- Refresh browser when scene becomes active — reloads it cleanly when you switch back
The catch: a source that shuts down loses its state. A chat box will reload empty and a goal bar will re-animate from zero. For alerts this is fine. For a chat overlay you actually watch, leave it running.
Step 4: Cut the frame down to what viewers read
Here is the uncomfortable part. Ask yourself which overlay elements a viewer has ever mentioned. In two years, mine were: the camera, and the alert sound. Nobody ever referenced the goal bar, the recent-sub list or the now-playing widget.
Viewers on a phone see your stream at roughly 400 pixels wide. Anything smaller than about 24 pixels in your 1080p canvas is illegible there, which is most overlay text.
What works
What doesn't
The chat box deserves a specific mention. On Twitch, chat is already visible next to the player for anyone watching live. An on-stream chat box only serves VOD and clip viewers, and it costs you a browser source permanently to serve them. Worth it for some channels, not most.
Key takeaways
If your dropped frames persist after all this, the bottleneck is the encoder rather than the overlay, and a two-PC or NVENC-based setup is the next thing to look at. If you are still deciding on capture hardware, the recording setup guide covers what is actually necessary.
Frequently asked questions
Do overlays really cost frames?
Browser sources do, yes, though the cost is usually CPU rather than GPU. Each browser source is a separate Chromium instance rendering at your canvas frame rate. Six of them on a single-PC setup on a mid-range CPU is measurable, and it shows up as dropped encoder frames rather than a lower in-game frame rate, which is why people miss the connection.
Should I use a static image instead of an animated overlay?
For the border and frame elements, yes. An animated PNG sequence or webm loop running constantly costs more than a static image and adds nothing that viewers notice after the first thirty seconds. Save motion for alerts, where it does its job of pulling attention.
How many alerts should I have?
One alert style for follows and subs is enough to start. Distinct sounds and animations for six event types means every one of them is less distinctive. The point of an alert is that it interrupts, and interruptions stop working when they are constant.
Do I need a paid overlay pack?
No. A clean typeface, a consistent accent colour and correct alignment beat most paid packs. Paid packs mostly sell visual density, which is the opposite of what helps a small stream read clearly on a phone screen where most of your viewers actually are.
About the author
Competitive & Settings Editor
Dan played CS:GO semi-professionally in a regional ESEA Main roster between 2017 and 2020, and has hit Radiant in VALORANT in three separate acts. He now spends most of his competitive energy on the unglamorous side of the game: input latency, sensitivity consistency and warm-up routines that actually transfer.
Found something wrong? Games patch and fixes go stale. If a step here no longer works, tell us at hello@spyld.com and we will retest it. Read how we test and our editorial policy.