I took a Lighthouse score from 34 to 77 on one project. No hero rewrite. Part of it was system discipline, fewer one-off components, less CSS chaos, fewer font weights loaded because the type scale was governed.

Performance is a design-system outcome whether your roadmap admits it or not.

Design engineers think in budgets

Not webpack configs for every designer, budgets:

  • How many font weights load on first paint?
  • Does that hero need 400KB of unoptimized assets?
  • Will this component tree thrash on mobile?
  • Are we using the existing Card or inventing a new layout?

The system should make the light path the default path. When the governed component is also the fast component, teams stop negotiating.

Agents can estimate, humans set policy

Agents can flag bundle impact when you're choosing patterns. "Use existing primitive" vs "new layout with 12 dependencies", that's a diff worth seeing before merge.

Policy still lives with humans: what ships, what gets refactored, what the performance budget is for marketing vs app shell.

Simulate early, argue less later

Run performance thinking during design, especially when tokens and components are on the table. A heavy custom animation on a pattern used in 40 surfaces isn't a local decision; it's a system decision.

Fix the system and the score moves. Fix one page and you're playing whack-a-mole.