webgpu-impl-performance
Installation
SKILL.md
WebGPU Performance
Optimize WebGPU by minimizing CPU-side command-submission cost and GPU state churn. Most WebGPU apps are CPU-bound, so the levers below target per-frame JavaScript work.
Quick Reference
| Lever | Action | Pays off when |
|---|---|---|
| Pipeline caching | Create GPURenderPipeline / GPUComputePipeline once at load, reuse |
Always |
| Bind-group caching | Create GPUBindGroup once, reuse; vary data via dynamic offsets |
Always |
| Render bundles | Record a command subset once, replay via executeBundles |
Static or mostly-static scenes; content drawn multiple times per frame |
| State sorting | Sort draws by pipeline, then by bind group | Many draws with mixed state |
| Buffer sub-allocation | Pack many small uniforms into one buffer, use dynamic offsets | Many per-object uniform buffers |
| Workgroup-size tuning | @workgroup_size product is a multiple of 32 or 64 |
Compute shaders |
| Timestamp queries | GPUQuerySet of type "timestamp" + timestampWrites |
Measuring real GPU pass cost |
All values target WebGPU 1.0-stable (Chrome 113+, Safari 26+, Firefox 141+).