React Performance Optimization: From 3s to 300ms Load Time

Last month, I inherited a React app that took 3.2 seconds to load. Users were bouncing, Core Web Vitals were in the red, and the client was not happy. After two weeks of optimization, I got it down to 300ms—a 10x improvement.

In this guide, I'll walk you through exactly what I did, with before/after metrics and code examples you can use in your own projects.

The Starting Point: What Was Wrong

Before diving into solutions, let's understand the problems. I ran Lighthouse and WebPageTest to identify bottlenecks:

• Massive bundle size: 1.2MB of JavaScript (gzipped)
• No code splitting: Everything loaded at once
• Unoptimized images: 5MB of images on homepage
• Render-blocking resources: CSS and fonts blocking render
• Poor caching: No cache headers, everything re-downloaded
• Unused dependencies: Moment.js, Lodash (full), and more

Step 1: Analyze Your Bundle

Install Bundle Analyzer

# For Create React App
npm install --save-dev webpack-bundle-analyzer

# Add to package.json scripts:
"analyze": "source-map-explorer 'build/static/js/*.js'"

# For Vite
npm install --save-dev rollup-plugin-visualizer

# Add to vite.config.js:
import { visualizer } from 'rollup-plugin-visualizer';
plugins: [visualizer({ open: true })]

What I Found

Running the analyzer revealed the culprits:

• Moment.js: 300KB (with locales) - only used for date formatting
• Lodash: 70KB - importing the entire library
• React-Quill: 150KB - rich text editor on every page
• Chart.js: 200KB - charts only on dashboard
• Unused components: 100KB of dead code

Step 2: Replace Heavy Dependencies

Moment.js → date-fns

// Before: 300KB
import moment from 'moment';
const formatted = moment(date).format('MMM DD, YYYY');

// After: 2KB (tree-shakeable)
import { format } from 'date-fns';
const formatted = format(date, 'MMM dd, yyyy');

Savings: 298KB (99% reduction)

Lodash → Native Methods

// Before: 70KB (full library)
import _ from 'lodash';
const result = _.debounce(fn, 300);
const unique = _.uniq(array);

// After: 0KB (native)
// Debounce: write your own (10 lines)
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

// Unique: use Set
const unique = [...new Set(array)];

Savings: 70KB (100% reduction)

React-Quill → React-Quill (Lazy Loaded)

// Before: 150KB loaded on every page
import ReactQuill from 'react-quill';

// After: 150KB only loaded when needed
import { lazy, Suspense } from 'react';
const ReactQuill = lazy(() => import('react-quill'));

function Editor() {
  return (
    Loading editor...}>
      
    
  );
}

Savings: 150KB on initial load (loaded only when user opens editor)

Step 3: Implement Code Splitting

Route-Based Splitting

// Before: All routes in one bundle
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';

function App() {
  return (
    
      } />
      } />
      } />
    
  );
}

// After: Each route is a separate chunk
import { lazy, Suspense } from 'react';

const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    Loading...}>
      
        } />
        } />
        } />
      
    
  );
}

Impact: Initial bundle reduced from 1.2MB to 180KB (only Home page loaded)

Component-Based Splitting

// Heavy component only loaded when needed
const HeavyChart = lazy(() => import('./components/HeavyChart'));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);
  
  return (
    

       setShowChart(true)}>
        Show Chart
      
      
      {showChart && (
        Loading chart...
}>
          
        
      )}
    
  );
}

Step 4: Optimize Images

Use Modern Formats

// Before: 5MB of JPEGs and PNGs


// After: 500KB of WebP/AVIF with fallbacks

  
  
  

Tools to convert images:

• Squoosh - Web-based, great for individual images
• sharp - Node.js library for batch processing
• Next.js <Image> - Automatic optimization

Lazy Load Images

// Native lazy loading (simple)


// Intersection Observer (more control)
import { useInView } from 'react-intersection-observer';

function LazyImage({ src, alt }) {
  const { ref, inView } = useInView({
    triggerOnce: true,
    rootMargin: '200px',
  });
  
  return (
    

      {inView && }
    
  );
}

Impact: Reduced image weight from 5MB to 500KB, and only load images as user scrolls

Step 5: Optimize Rendering

Use React.memo for Expensive Components

// Before: Re-renders on every parent update
function ExpensiveList({ items }) {
  return (
    

      {items.map(item => (
        
{item.name}
      ))}
    
  );
}

// After: Only re-renders when items change
const ExpensiveList = React.memo(function ExpensiveList({ items }) {
  return (
    

      {items.map(item => (
        
{item.name}
      ))}
    
  );
});

Use useMemo and useCallback

// Before: Expensive calculation runs on every render
function Dashboard({ data }) {
  const processedData = data.map(item => {
    // Expensive operation
    return complexTransformation(item);
  });
  
  return ;
}

// After: Calculation only runs when data changes
function Dashboard({ data }) {
  const processedData = useMemo(() => {
    return data.map(item => complexTransformation(item));
  }, [data]);
  
  return ;
}

Step 6: Implement Caching

HTTP Cache Headers

// In your server or CDN config

// Static assets (JS, CSS, images) - cache for 1 year
Cache-Control: public, max-age=31536000, immutable

// HTML - cache for 5 minutes, revalidate
Cache-Control: public, max-age=300, must-revalidate

// API responses - cache based on data freshness
Cache-Control: private, max-age=60

Service Worker for Offline Support

// Install Workbox
npm install workbox-webpack-plugin

// In your service worker
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

// Precache app shell
precacheAndRoute(self.__WB_MANIFEST);

// Cache API responses
registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60, // 5 minutes
      }),
    ],
  })
);

Impact: Returning users load the app in <100ms (from cache)

Step 7: Optimize Critical Rendering Path

Inline Critical CSS

// Before: Render-blocking external CSS


// After: Inline critical CSS, load rest async

Preload Key Resources

// Preload fonts


// Preload hero image


// Preconnect to third-party origins

Step 8: Monitor and Measure

Real User Monitoring (RUM)

// Track Core Web Vitals
import { onCLS, onFID, onLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  // Send to your analytics service
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify({
      name: metric.name,
      value: metric.value,
      rating: metric.rating,
    }),
  });
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

Performance Budget

// In package.json
"bundlesize": [
  {
    "path": "./build/static/js/*.js",
    "maxSize": "200 kB",
    "compression": "gzip"
  }
]

// Run in CI
npm install bundlesize
bundlesize

Results: Before and After

Quick Wins Checklist

Here's a checklist of optimizations ranked by impact:

1. Code splitting - Biggest impact, easiest to implement
2. Replace heavy dependencies - Moment.js, Lodash, etc.
3. Optimize images - WebP/AVIF, lazy loading, proper sizing
4. Enable compression - Brotli or gzip on server
5. Set cache headers - Long cache for static assets
6. Preload key resources - Fonts, hero images
7. Inline critical CSS - Reduce render-blocking
8. Use React.memo wisely - Prevent unnecessary re-renders
9. Implement service worker - Cache for returning users
10. Monitor Core Web Vitals - Catch regressions early

Summary

Optimizing React performance is about making smart trade-offs. Here's what I learned:

• Measure first: Use bundle analyzer and Lighthouse to find bottlenecks
• Start with code splitting: It's the highest-impact optimization
• Replace heavy dependencies: Modern alternatives are often 10x smaller
• Optimize images aggressively: They're usually the biggest culprit
• Cache everything: Returning users should load instantly
• Monitor continuously: Performance regressions happen silently

The result? A 10x faster app, happier users, and better Core Web Vitals. The best part: most of these optimizations are one-time changes that keep paying off.