Fix React SPA poor PageSpeed score with bundled JSON data

Problem: React SPA with large JSON data bundled gets poor PageSpeed score (30s). Site imports all Pokemon data (~900+ requests) into JS bundle. Client-side rendering only.

Quick wins:

1. Code split aggressively:

const Pokemon = React.lazy(() => import('./Pokemon'));
const Moves = React.lazy(() => import('./Moves'));

<Suspense fallback={<Loading />}>
  <Pokemon />
</Suspense>

2. Split JSON data from bundle:

// Instead of: import pokemonData from './data.json'
const { data } = await fetch('/data/pokemon.json').then(r => r.json());

3. Lazy load images:

<img loading="lazy" src={sprite} alt={name} />

4. Inline critical CSS:
For small CSS files, put entire stylesheet in <style> tag in <head>.

5. Move to SSR (biggest impact):
Next.js, Remix, or TanStack Start for server-side rendering.

Note: PageSpeed scores SPAs lower by design (measures initial paint). Focus on user experience metrics, not the number.

Source: https://www.reddit.com/r/reactjs/comments/1r2sney/

Fix React SPA poor PageSpeed score with bundled JSON data

Just saved 2 hours of debugging?