Brandon Travis

Picture of Javascript framework, Reactjs

ReactJs, NextJs, and PreactJS

Last updated on: Wednesday, December 22, 2021

When I initially built this site I was using NextJS which came bundled with ReactJS, while already performant out of the box in certain aspects, I wanted to be able to squeeze out off possible optimization factors that I would be able to get before I start delving deeper into everything and manually optimizing it myself. This is where PreactJS comes into the story.

My scores before I implemented Preact looked something along the lines of this.

GTmetrix scores before I implemented PreactJS

While not entirely awful, it could have been a lot better and I definitely want it to be better just because I know it can be better and that I can make it better. I was researching around for some easy ways that I was able to optimize my application without too much manual work because of extreme laziness.

While researching around I stumbled across several Reddit threads talking about PreactJS, and I started to look around if several people have decided to implement it with NextJS and while doing this I read several blog posts talking about their experiences with it. So far during everything, it looked like there was no visible downside to implementing PreactJS over the default React package. As I was researching it, even more, I realized that PreactJS also provides a compatibility layer that should ease the burden of compatibility issues with React npm modules while only adding somewhere along the lines of an extra 2kb to your overall package size.

This is a definite upgrade compared to just base React from a package size comparison looking at Bundlephobia. When you're looking to squeeze out even more packages, optimizing what npm modules you're using is a quick and easy way to squeeze out that little extra performance for you. This can lead you down a very, very deep rabbit hole which you definitely might sink more time into it than you actually thought which is what happened to me. This is the bane of my existence because it eats up my entire day doing micro-optimizations on projects when I know I should be doing something else.

Now when I implemented PreactJS I definitely did notice a speed increase and so did GTmetrix at the same time. My scores went up and so did my happiness. This is what the scores looked like now.

My scores after I implemented Preact

A 20% performance improvement is absolutely astonishing for something as simple as replacing an npm package with another package and aliasing it. Largest Contentful Paint went down dramatically and so did Total Blocking Time. If you have not tried switching to Preact, I do recommend giving it a try in a development environment so that you are able to test if anything does go wrong which is an unlikely thing.

My current package.json with Preact looks a little like this, several things will be omitted though.

"dependencies": { "next-seo": "^4.28.1", "preact": "^10.6.4", "preact-render-to-string": "^5.1.19", "prop-types": "^15.7.2", "react": "npm:@preact/compat@^17.0.3", "react-dom": "npm:@preact/compat@^17.0.3", "react-markdown": "^7.1.1", "react-ssr-prepass": "npm:preact-ssr-prepass@^1.2.0", "react-syntax-highlighter": "^15.4.5", "rehype-raw": "^6.1.0", "remark-gfm": "^3.0.1", "scheduler": "^0.20.2" },

If you do run into an error implementing PreactJS such as I did as explained in this Github issue. Running:

npm install scheduler --save

is an easy workaround that should hopefully work for you as it did in my case. If it didn't work, I'm sure Google has the answer located somewhere out there.

There is definitely more optimization that I am able to do and even more rabbit holes that I will eventually pour an innumerable amount of hours into. Now if you excuse me, I am going to go on Reddit and Youtube and slave away reading and watching extremely mind-numbing content.


Related Posts

Picture of a stylized brain holding up weights
My experience with a coding bootcamp
Stock photo of computer
How I built this blog
picture of javascript framework, VueJs
VueJS
a clock that shows the time passing
Why I started coding
Picture of a man writing on a piece of paper and also using a laptop
My experience with working

Copyright © Brandon-travis.com 2022.