The Need for FPS Polling in Web Applications

While building web apps for low-end devices, like for example a dashboard for a video surveillance system, I kept running into a familiar problem: certain CSS effects—like backdrop-filter or filter—still wreak havoc on performance, even in 2025.

Despite how far browsers have come, there’s no shortage of entry-level hardware out there that chokes on these styles, especially in mobile environments. That’s when I decided to create a lightweight utility that could help developers detect and respond to poor rendering performance in real time.

Say hello to fps-poll , a small NPM package that does exactly what it sounds like: it polls the current frames-per-second over a short period and gives you the average.

Here’s how it works: call the fpsPoll method when it makes the most sense for your app. In my case, I trigger it on the first user gesture event.

import { fpsPoll } from 'fps-poll';

document.addEventListener('touchstart', () => {
    fpsPoll({
        fpsThreshold: 30,
        pollAmount: 100,
        onBelowThreshold: (avg) => {
            document.body.classList.add('painfully-slow-device-mode');
        },
        onStartPolling: () => {
            console.log('Started monitoring FPS');
        },
        onEndPolling: (avg) => {
            console.log(`Average FPS: ${avg}`);
        }
    });
});

This gives you a quick and practical way to adapt your web experience for underpowered devices—without needing complex benchmarks or external profiling tools.

If you’re building for a global audience or expect your app to run on a wide range of hardware, give fps-poll a try.

Enjoy! 🚀