Debugging GPU Performance Issues in T3 Code
Theo - t3.gggo watch the original →
the gist
When AI agents failed to diagnose a 50% GPU load on an idle web app, manual instrumentation and targeted CSS isolation revealed that infinite compositor animations and layered backdrop blurs were the culprits.
The Problem: Invisible GPU Bloat
Theo encountered a significant performance regression in his T3 Code application, where the GPU process consumed up to 50% of his CPU while the app was idle. Despite the app feeling responsive, the high resource usage caused thermal throttling on his hardware. Standard browser performance profiling tools failed to identify the source, as they primarily focus on JavaScript execution and network bottlenecks rather than compositor-level GPU stress.
The Failure of AI Agents
Both Fable and GPT-5.6 (Codeex) failed to diagnose the issue. They repeatedly hallucinated causes, such as blaming the 'Ultraink' composer treatment or suggesting poor-quality design compromises (like removing animations entirely). The agents struggled because they lacked the ability to correlate high-level GPU process metrics with specific CSS rendering layers. They also fixated on irrelevant code paths, leading to massive, useless refactors that did not address the root cause.
The Manual Debugging Strategy
Theo bypassed the agents' suggestions by building a custom runtime debugging tool. He injected a window.__t3GPU binding that allowed him to toggle specific CSS properties (animations, filters, shadows, blurs) in real-time via the console. By systematically disabling these layers while monitoring the browser task manager, he isolated the offenders: infinite CSS animate-pulse classes on small UI elements (like terminal icons) and the cumulative cost of backdrop blurs combined with a global noise overlay layer.
The Root Cause: Compositor Overload
Each infinite animation promoted its element to a dedicated GPU layer. On a 120Hz display, these layers forced the browser compositor to re-render at the full refresh rate, even when the UI was otherwise static. The issue was exacerbated by the 'noise' layer, which, when combined with backdrop blurs, created a heavy rendering pipeline that the GPU could not handle efficiently. The fix involved removing the infinite pulse animations and optimizing the CSS layering strategy to avoid unnecessary compositor promotion.