# Profiling with a live FPS HUD > Drop a tiny perf HUD next to any grid in development. Measures FPS, > last-frame budget, and live DOM row count - every animation frame. > Behind a dev-only flag in production. This is a copy-paste pattern, not a component the package ships. Nothing to install: paste the code below into your own app. ## When You're trying to figure out: - Why does sorting feel sluggish on this dataset? - Is the row virtualiser actually working - or am I rendering 10k DOM rows? - Which user action spikes my frame time over the 16.7ms budget? A reload-and-check-Lighthouse loop is too slow for that. A live HUD puts the numbers right next to the grid as you interact. ## The pattern Three pieces: 1. **A `requestAnimationFrame` loop** that measures the delta between frames and pushes it onto a ring buffer. 2. **A live readout** (FPS, last-frame ms, budget bar) bound to that buffer. 3. **A DOM row counter** that queries `.sv-grid-row` to confirm virtualisation is keeping the live row count bounded. ## Implementation ```svelte {#if running} {/if} ``` ## Stress your own grid Wire toolbar buttons to spike the engine while you watch the trace: ```svelte ``` Each click should produce one visible spike on the trace. If a spike sustains over multiple frames, the work is too heavy for a single frame budget - move it off the main thread or memoise the inputs. ## Reading the numbers | Metric | Healthy | Investigate | | --------------- | -------------- | ---------------------------------------- | | FPS | ≥ 55 | < 30 during interaction = animation jank | | Frame time | ≤ 16.7 ms | > 33 ms = consistently missed frames | | DOM rows | < 100 always | Growing with dataset = virtualiser off | | Frame trace | flat baseline | Sustained plateau = synchronous work | If DOM rows grows linearly with dataset size, double-check `svelteVirtualizer` is in your `tableFeatures` and `containerHeight` is bounded (not `auto`). ## Shipping behind a flag Mount the HUD only when a dev flag is set: ```svelte {#if import.meta.env.DEV && localStorage.getItem('svgrid:hud') === 'on'} {/if} ``` Toggle from the console: `localStorage.setItem('svgrid:hud', 'on')`. ## Demo ## See also - [Bundle size reference](https://svgrid.com/docs/help/bundle-size/) - what each feature costs - [Benchmark harness recipe](https://svgrid.com/docs/recipes/benchmark-harness/) - measure across grid sizes - [Grid state inspector recipe](https://svgrid.com/docs/recipes/grid-state-inspector/) - the matching debug panel - [Million rows recipe](https://svgrid.com/docs/recipes/million-rows/) - virtualisation in anger --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/recipes/profiling-with-fps-hud/ . All docs: https://svgrid.com/llms.txt