Don't Optimize Your React App, Use Preact Instead

Nilanth - Nov 1 '21 - - Dev Community

Preact - Performance Optimization by default

A few months ago, I wrote an article based on optimizing react loading time, and most of the reader's comments were to try Preact to get default optimization. So I decided to try preact with the same app used for the previous article. Let's first get an intro about Preact.

Preact is a React alternative library with all the react features!.. Preact is a 3KB library. It is very small compared to react, as react and react-dom gzip size is around 41KB excluding react-scripts based on bundlephobia. Some highlighted features of preact are

  1. Lightweight Virtual Dom
  2. Small in Size
  3. Performance optimized by default
  4. Integration is simple
  5. PWA by default

Now let's see preact in action.

I have developed the same app in React and Preact to test the app performance.

React

ReactJS

Preact

PREACT

For react app I used Create React App and for Preact used preact-cli. Preact also gives an option to convert your existing react app to preact using preact-compat, but I have built an app from scratch to see the best result.

To compare both app performances, I used GTmetrix and hosted both apps in Netlify.

React App Performance

Below is the score given by GTMetrics for React-based App. I have used Route Based Code Splitting for the dashboard Component. The performance is 80% with B grade, largest content paint (LCP) and Layout Shifting (CLS) seems low.

react-p

As we see in the below image, the entire page is loaded in 2 sec, First Content Paint is around 1 sec. Seems the performance is Not bad.

react-lt

ReactJS Loding Frames

Preact App Performance

All the metrics are in Green!!!. Seems the same app in Preact scored 100% with an A grade in GTMetrix. The largest content paint (LCP) is less than 500ms, No Layout Shifting (CLS) happened.

preact-p

This looks very impressive. Preact optimized our dashboard app quite well. The performance is drastically increased compared to React. Let us check the Loading time

preact-lt

PREACT Loding Frames

As we see in the above image. The entire App loads in 1.3 secs and the Time to First Byte (TTFB)is 179ms !!. Preact seems very faster compared to React and it handles everything by default.

react-pc

PREACT

preact-pc

ReactJS

As looking at the page loading side by side, Preact app loads well ahead compared to React and The Time to interact is also faster than react app. Preact is Progressive Web App(PWA) by default so instant loading on repeat visits.

pwa

Preact also gives some useful warning reg bundle size increase during the build as below

warnings

Suspense and Lazy

Some limitation I faced when converting to Preact is that Suspense and lazy loading are experimental and don't support on production as of now. but route based code splitting is enabled by default for the routes directory.

Reference

  1. Preact
  2. Difference to React

Conclusion

As based on the above comparison Preact leads in all parts. Due to reduced library size and fast, Preact allow us to focus on developing features instead of manual optimization.

Thank you for reading.

Get more updates on Twitter.

You can support me by buying me a coffee ☕

eBook

Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples

ReactJS Optimization Techniques and Development Resources

More Blogs

  1. Laravel Sanctum Authentication for React App Using Breeze
  2. Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
  3. How to Structure Your React Redux App
  4. How to Reduce React App Loading Time By 70%
  5. Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support
  6. No More ../../../ Import in React
  7. 10 React Packages with 1K UI Components
  8. 5 Packages to Optimize and Speed Up Your React App During Development
  9. How To Use Axios in an Optimized and Scalable Way With React
  10. 15 Custom Hooks to Make your React Component Lightweight
  11. 10 Ways to Host Your React App For Free
  12. How to Secure JWT in a Single-Page Application
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .