⚡

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.

At 60fps, each frame has a 16.67ms budget covering JavaScript execution, style recalculation, layout, paint, and composite. This tool shows your live FPS, frame budget bar, RAF timeline, and simulates performance problems like layout thrashing and CLS — helping you build jank-free UIs.

Diagnosing dropped frames and animation jankUnderstanding the browser render pipelineSimulating layout thrashing for educational demosMeasuring requestAnimationFrame callback timing

100% private — all processing runs in your browser. No files are uploaded to any server.

–

FPS

target: 60fps (16.67ms)

Avg frame

—

Worst frame

—

Janky frames

—

Frame Budget (16.67ms)

RAF Timeline (last 120 frames)

≤16.67msjank (>25ms)

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.

Related Tools

JSON Formatter

Format, beautify and minify JSON with syntax highlighting.

JSON Validator

Validate JSON syntax with detailed error messages and line numbers.

Base64 Encoder/Decoder

Encode and decode Base64 strings and files instantly.