React Performance Optimization: My Journey to 97/100

After days of optimizing my React web app, I finally achieved what every developer dreams of: 97 Performance, 100 Accessibility, 100 Best Practices, and 100 SEO on Page Speed Insights! Here’s how I did it.

The Starting Point

My initial React app had decent functionality but poor performance metrics:

• Performance: ~65
• First Contentful Paint: 3.2s
• Largest Contentful Paint: 4.8s
• Time to Interactive: 5.1s

Technique #1: Smart Code Splitting

The Problem with React.lazy()

Initially, I used React’s built-in React.lazy() for code splitting. While this improved initial load time, it made the user experience feel like a traditional multi-page website.

The Solution: @loadable/component

I switched to @loadable/component, which offers powerful prefetching and preloading capabilities while maintaining smooth SPA transitions.

The Results

• ✅ Maintained SPA smooth transitions
• ✅ Reduced initial bundle size by 60%
• ✅ Routes loaded instantly with smart prefetching

Technique #2: Critical CSS Extraction

The Problem

Loading large CSS files blocks rendering. My stylesheet was 180KB.

The Solution

I extracted critical CSS (the styles needed for above-the-fold content) and inlined it, then deferred the rest of the CSS.

The Results

• ✅ First Contentful Paint improved from 3.2s to 1.1s
• ✅ No flash of unstyled content (FOUC)

Technique #3: Social Media Optimization with SSR

The Problem

When sharing links on WhatsApp, Twitter, or Facebook, they would show generic titles and no preview images. Why? Social media crawlers only fetch the HTML—they don’t execute JavaScript!

The Solution: Backend Wrapper

I wrapped my React app with ASP.NET Core and implemented dynamic meta tag injection.

The Results

• ✅ Beautiful link previews on all social platforms
• ✅ Proper SEO for each page
• ✅ No impact on client-side performance

The Final Results

Metric	Before	After	Improvement
Performance	65	97	+32
First Contentful Paint	3.2s	1.1s	-66%
Largest Contentful Paint	4.8s	1.8s	-63%
Time to Interactive	5.1s	2.2s	-57%
Total Bundle Size	850KB	320KB	-62%

Conclusion

Optimizing a React app to achieve high performance scores isn’t just about following a checklist. It requires understanding how browsers work, how users interact with your site, and making thoughtful trade-offs.

The effort is worth it—not just for the scores, but for the real improvement in user experience!

• #react
• #performance
• #optimization
• #web development