Screen FPS Test
Fast, accurate, and free online Screen FPS Test tool that runs directly in your browser.
-
1Enter data
Enter content, paste text or load a file from disk. -
2Click the button
The tool will immediately process your data in the browser. -
3Get the result
Copy the finished text or save the file to your device.
return "Result ready in 0.1s";
}
Rate this tool:
Related tools
Other tools you may find usefulScreen FPS Test - Browser Rendering Performance Benchmark
FPS (Frames Per Second) is a measure of the smoothness of animation and rendering. A monitor refreshing at 60Hz displays a maximum of 60 frames/second. The tool measures real browser FPS using requestAnimationFrame, detects GPU and renderer limitations, and tests frame stability.
How the FPS measurement works
requestAnimationFrame (rAF): the browser invokes a callback before each frame rendering. Measurement: timestamp the difference between successive calls. FPS = 1000 / (t2 - t1) ms. Wed. rolling from the last N frames gives a stable result. Vsync: most browsers synchronize rAF with the monitor refresh rate (60Hz → 60 FPS max, 144Hz → 144 FPS max).
Monitor refresh standards
60 Hz: standard for 20 years. 1000ms / 60 = ~16.67 ms per frame. 75 Hz: budget gaming. 90 Hz: mid-range smartphones, VR minimum. 120 Hz: iPhone Pro, iPad Pro, gaming. 144 Hz: PC gaming standard. 165/240 Hz: high-end PC gaming. 4K OLED 120 Hz: premium. Higher Hz = smoother animation, but more GPU resources.
What affects FPS in the browser
GPU/iGPU: WebGL rendering and CSS transforms. CPU: JavaScript execution, layout recalculation. Memory: garbage collection drops. Power mode: laptops in power saving mode = throttled GPU. Background tabs: browsers limit background rAF to 1 FPS. Vsync: OS forced (60/120/144 FPS limit). Compositor thread vs main thread: paint and composite are separate.
FPS optimization techniques in web applications
CSS transforms instead of top/left (compositor layer). will-change: transform – hint for GPU layering. Avoid layout thrashing: don't read and write DOM in the same frame. RequestAnimationFrame instead of setInterval for animation. WebWorker for heavy computing. OffscreenCanvas: rendering off the main thread. Throttle scroll handlers: passive: true.
FAQ
Why is my FPS below 60 even though my monitor is at 60Hz?
Causes: CPU/GPU too slow for the task. Thermal throttling (laptop, no cooling). Background apps that eat up resources. Browser: no hardware acceleration (chrome://gpu). Power saver mode. Blocking extensions installed. Check: chrome://tracing or Performance tab in DevTools.
How to check monitor refresh rate?
Windows: Display Settings → Advanced → Refresh Rate. macOS: System Settings → Displays → enter the frequency. Linux: xrandr | grep \* (asterisk = active mode). Browser: FPS tool measures indirectly – if max = 60.X → 60Hz monitor.
What FPS is needed for smooth web animations?
60 FPS (16.7 ms/frame): comfortable standard. Below 30 FPS: visible jerking. 24 FPS: Cinema (Acceptable). 30 FPS: "console standard" (acceptable). 60 FPS: smooth UI. 120 FPS: UI CSS transitions are noticeably smoother on a 120Hz monitor. Scrolling: < 60 FPS is painful for the user.
What is jank and how to avoid it?
Janek: irregular frames (sometimes 8ms, sometimes 50ms) - worse than constant 30 FPS. Reason: long tasks > 50ms block the main thread. Tool: Lighthouse, WebPageTest, DevTools Performance. Solution: code splitting, lazy loading, WebWorker for calculations, optimize React renders.
How to measure FPS in a production application?
Performance API: performance.now() for timestamps. PerformanceObserver: observe "longtask" (>50ms). Stats.js (npm): FPS/MS/MB overlay for developers. Sentry Performance Monitoring: rea