Frontend performance: the 100ms budget

May 15, 2026 #performance #frontend #css

Where input latency actually goes, and the measurements that locate the thief.

I kept a log of every decision during this project, and reading it back a month later was humbling: the choices that aged well were the boring ones, and the clever ones all came with a footnote I hadn't written yet.

The story so far

There is a version of this article that opens with theory. I decided against it, because the theory is easy to find and the motivation is not — so let's start with the thing that actually broke.

The measurement

The first version worked, which is exactly why it was hard to see how wrong it was. Everything looked fine in the demo, and everything looked fine until traffic arrived on a Tuesday afternoon and the graph started doing something I'd never seen before.

Tools matter less than the feedback loop they enable. A fast, boring loop beat every sophisticated setup I tried, and I've kept it ever since, even as the rest of the stack changed twice over.

A note for context that helps the reader.

const debounce = (fn, ms = 200) => {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), ms);
  };
};

The change

I want to be honest about the trade-offs here. The approach I settled on solves the problem I had, not every problem of this shape, and there is a clear point where you should reach for something more heavy-duty.

The best engineering advice I've received is unglamorous: make it measurable, make it reversible, and only then make it fast.

Numbers

By the end of this post you should be able to reproduce the whole thing yourself in under an hour, including the parts I got wrong the first time — those are marked so you can skip them if you're in a hurry.

There is a version of this article that opens with theory. I decided against it, because the theory is easy to find and the motivation is not — so let's start with the thing that actually broke.

Approach	Best for	Watch out for
Baseline	Quick comparisons	No tail visibility
Instrumented	Finding the real hotspot	Overhead of the probes
Production	Truthful numbers	Harder to reproduce

What remains

There is a version of this article that opens with theory. I decided against it, because the theory is easy to find and the motivation is not — so let's start with the thing that actually broke.

A risky operation or a likely mistake.

The story so far

def load_config(path: str) -> dict:
    with open(path, encoding="utf-8") as f:
        return {k.strip(): v.strip() for k, v in
                (line.split("=", 1) for line in f if "=" in line)}

The measurement

The numbers below are from my own machine and my own workload. Treat them as a method, not a benchmark: the point is how the measurement was taken, not the exact figures it produced.

Capture the current behavior before touching the code
Make the smallest change that preserves it
Delete the workaround you were sure you'd need

The change

Tools matter less than the feedback loop they enable. A fast, boring loop beat every sophisticated setup I tried, and I've kept it ever since, even as the rest of the stack changed twice over.

Wrap-up

If you remember one thing, make it this: where input latency actually goes, and the measurements that locate the thief compounds. The cost of getting it right early is a afternoon; the cost of getting it late is a migration.