Typeface pairing tool ships 1.8 MB of JavaScript for one page

Care about it, because four seconds on a tool people try once is the difference between trying it and closing the tab.

Two specific cuts from what you describe. The icon set is almost certainly imported as a namespace, import * as Icons from ..., which defeats tree shaking. Import the six icons you use by name and that chunk mostly disappears.

The metrics library is the bigger half, and you probably need it only after someone picks a font. Load it on demand:

const { getMetrics } = await import('font-metrics')

That moves it out of the initial bundle entirely. Between the two you should land well under 400 KB without changing a single feature.

Check what is client at all. A page that renders a preview and reads user input usually needs one client component around the controls, but Cursor tends to put 'use client' at the top of the page file, which pulls every import below it into the browser bundle including things that only run at build time. Moving that directive down to the interactive component is sometimes the entire fix.