Disable Heavy Effects When FPS Drops

Modern web development still faces a stubborn challenge: fancy styles and effects can tank performance on lower-end hardware.

While browsers continue to improve, there’s no shortage of devices—especially mobile and embedded systems—where CSS effects like backdrop-filter, box-shadow, or even complex JavaScript animations can cause significant frame drops during user interactions.

To help address this, I created fps-poll, a simple NPM package designed to detect poor rendering performance and give you a hook to adjust your UI in response.

What It Does

fps-poll checks the actual frame rate during user interaction (or any other event you choose) and gives you the average FPS over a configurable window. If the framerate dips below your threshold, you can use that signal to disable performance-heavy visuals or animations.

Here’s a quick example that activates a slow-mode CSS class if performance drops below 30 FPS on touch:

import { fpsPoll } from 'fps-poll';

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