Skip to content
Gaming & Esports Medium #frame-time#fps#performance

Frame Time vs FPS

Average FPS hides stutter - frame time graphs reveal what the player feels.

A free, animated frame time vs fps you can read here or embed on any website, from Scrollchart.

Frame Time vs FPS

Frame Time GraphFrame delivery time (ms) - spikes above baseline cause visible stutter

Frame time over a 30-second sample. Average FPS calculated as 1000/mean. Spikes (frame-time bursts) cause visible stutter even at high average FPS. 1% and 0.1% lows annotated.

Good for

  • GPU benchmark articles
  • Stutter-troubleshooting guides

Source & accuracy

This frame time vs fps is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Why average FPS masks frame pacing problems

A system averaging 60 FPS might deliver 16ms frames most of the time but occasionally spike to 50ms when a background process runs. The average hides these spikes. A player experiences the longest frame as a stutter, not the average. Frame time graphs show every frame in sequence, exposing the worst-case experience.

An inconsistent 60 FPS (45ms then 16ms then 18ms) feels worse than a consistent 50 FPS because the brain detects variation as jank. Frame time graphs make this visible and comparable across different systems or settings.

Measuring what players actually feel

The time between pixels hitting the screen is what determines perceived smoothness. A frame that takes 20ms feels smoother than one that takes 30ms, regardless of how many frames per second the system claims to deliver. Frame time analysis separates the outliers, showing which settings or hardware combinations create the smoothest experience for the player.

Embed this diagram

Add this animated frame time vs fps to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated frame time vs fps for any website.
Who uses it
Gaming blogs & wikis.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="frame-time-graph" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Frame Time vs FPS" for my website?
Scrollchart provides "Frame Time vs FPS" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a frame time vs fps in WordPress or a static site?
Paste the HTML snippet from the Scrollchart diagram page into your WordPress post (in HTML/code view), your Webflow embed block, or directly into a static HTML file. No plugin is needed. The diagram loads from scrollchart.com and paints in as the reader scrolls.