The Journal

React & Performance3 min read

UI Performance: How to Make Your React App Feel Instant

Users don't care about your Lighthouse score. They care about how fast your app feels. Here's how to make your UI feel instant.

Your Lighthouse score is 98 and the app still feels sluggish. Score and feel aren’t the same thing. The speed a user notices comes from three moments: the first paint, things not jumping around, and clicks that respond right now.

The first paint

The largest thing on screen — hero image, headline, banner — should land in under 2.5 seconds. That’s your LCP, and it’s the number people actually feel.

Render it from the server, preload the hero image, and don’t hide it behind a spinner or a font swap. If it’s an image, give it a real width and height so the browser fetches it early and holds its place.

Fonts are the sneaky one. Use font-display: swap and preload the file, or your headline paints twice and the whole page feels late.

Reserve the space

Nothing feels cheaper than content that jumps. An image loads and shoves the paragraph down; an ad slot pops in and you tap the wrong thing. That’s layout shift, and your target is zero.

The fix is boring and total: reserve the space before the content arrives. Set explicit width and height on media, give async slots a fixed min-height, and use skeletons sized like the real thing.

Answer the click

When someone taps a like, a toggle, a delete — update the UI immediately, then let the server catch up. If it fails, roll it back. A 200ms round trip you hide feels instant; a 200ms spinner feels slow.

useOptimistic makes this a few lines in React. The perceived win is bigger than any query you could shave.

Don’t fake it for things that genuinely fail often, though, like a payment. There, an honest pending state beats a success you have to walk back.

Ship less JavaScript

Every kilobyte of JS gets parsed and run on the main thread — the same thread that answers taps. The cheapest speed-up is sending less of it.

  • Keep components on the server; only interactive leaves ship.
  • Load heavy widgets like charts and editors with next/dynamic.
  • Trade a 40KB date library for a small helper or the Intl API.

LCP under 2.5s, zero shift, instant feedback, a smaller bundle. Do those four and the app feels fast — whatever the score says.

Frequently asked questions

How do I make my React app feel instant?
Focus on three moments users notice: paint the largest element in under 2.5 seconds, reserve space so nothing jumps, and update the UI immediately on click before the server catches up. Perceived speed matters more to users than a Lighthouse score.
What is a good LCP time and how do I improve it?
Aim for Largest Contentful Paint under 2.5 seconds. Render the hero element from the server and preload the hero image with explicit width and height so the browser fetches it early, and use font-display: swap with a preloaded font file so the headline does not paint twice.
How do I make clicks feel instant in React?
Update the UI immediately, then let the server catch up and roll back if it fails; a 200ms round trip you hide feels instant while a 200ms spinner feels slow. React's useOptimistic makes this a few lines. Do not fake it for things that genuinely fail often, like a payment.