Frontend Performance Visualizer
Measure and visualize frontend performance in real time. See live FPS with a frame budget bar, record a RAF timeline to spot janky frames, simulate layout thrashing and CLS, and understand the browser render pipeline.
Measuring real RAF frame times in this browser tab. Open DevTools and run heavy JS to see jank.
Frequently Asked Questions
What is the frame budget?
At 60fps, each frame has 16.67ms to complete. This includes JavaScript, style calculations, layout, paint, and composite. Exceeding this budget causes dropped frames and jank.
What is layout thrashing?
Layout thrashing occurs when JavaScript alternates between reading and writing DOM geometry (e.g., reading offsetWidth then changing width, then reading again). Each read after a write forces the browser to recalculate layout synchronously.
What is CLS?
Cumulative Layout Shift (CLS) measures how much page content shifts unexpectedly. It is a Core Web Vital. Common causes: images without dimensions, dynamically injected content, and web fonts.