Three numbers that changed a design

A year of GitHub contributions, drawn in the ink ladder because the design system has no green to spend on decoration. Straightforward. It was wrong three times, and every time the number said so before the eye did.

93 / 12 / 6 / 1

The first version bucketed each day as a fraction of the busiest day. Reasonable, and the grid read as flat - almost every active day in the lowest bucket.

max-relative   93 / 12 / 6 / 1     ← one 80-contribution day owns the scale
quartiles      33 / 23 / 28 / 28   ← same year, same data

The median was 7 and the maximum 80. A single outlier compressed everything else into one bucket. Quartiles of the active days spread the same year evenly. No visual judgment involved - the histogram decided it.

76KB

365 <div>s with a fill class. Correct, semantic, and it added 76KB to a 102KB homepage.

Empty days are the large majority and every one is the same square, so they became a tiled SVG <pattern> with only active days carrying path data. 179KB → 111KB.

Then the honest correction: over the wire, brotli took that delta to about 1KB. Repetitive markup compresses roughly 10:1, so the raw number was never the one that mattered. Chasing bytes further would have been wasted work, and the compressed figure is what said so.

0.09

Lighthouse fell 94 → 92. The instinct is to look at what you just added.

BASE: 94 94 94   ← three runs, zero variance
GRID: 91 92 92

Real, not noise. But every metric except LCP scored a perfect 1.0, and the LCP element was the hero <h1> - not the new section at all. LCP moved 3.1s → 3.4s, which is 0.76 → 0.67 on the sub-score, and 0.09 × LCP's 25% weight is almost exactly the two points.

The page was sitting on a scoring cliff. Any added content cost about that much. The finding was not "this feature is slow", it was "this page is fragile here", and the fix belonged in the hero.

content-visibility: auto looked like the obvious mitigation. It did nothing - the section is partly in viewport at 412×823 - so it came out again rather than staying in as speculative complexity.

What generalises

All three fixes were the opposite of the obvious move: quartiles rather than the max, compressed size rather than raw, and the element you did not touch. None were visible without a measurement, and the first guess was wrong every time.