Hacker News Reader

Comment by la_fayette | Hacker News Reader

React is a nightmare when it comes to performance or energy efficiency...

Downloading 500kb of js and processing this is just a nogo. The best advice to anyone interested in page speed, dont use this crap.

https://youtu.be/plt-iH_47GE

View on HN

My website which is entirely built in react (and uses Gatsby).

Takes 4kb to full page render (1 file - static only - JavaScript disabled).

That’s smaller than most any html+css especially if using some css library.

Of course once that is loaded and if JavaScript is enabled, then it will start to load interactive stuff and prefetch (which is around 100kb - but I have a lot of interactive stuff - including a zork style adventure Easter egg in the site header).

Check the time to interactive. Rehydration creates a massive cpu increase.

https://developers.google.com/web/updates/2019/02/rendering-...

In lighthouse, I see a score of 100 performance and time to interactive at 1.8secs.

This is comparable to hacker news home page (which is purely static), but my first contentful paint was slightly faster (probably because my site is slightly smaller).

Both sites were about 4 times faster (TTI) than google home page and typescript home page.

I’d be interested in checking out your site. I normally only have a 2G connection on my phone, I’d love to be able to read something that’s NOT HN. This site is the only site I know that takes less than 5-10 mins to load, if it loads at all.

Ok, here it is https://ricklove.me

Here is a post that explains some of the content that is interesting: https://ricklove.me/cool-stuff

Let me know how it does on a slow connection.

I'm quite sad that hunter2 isn't in your passwords.txt

Good idea :) I’ll add that.

I guess I’ll know if someone finds the Bitcoin.

Update: I added a few more nerd lore passwords - thanks for the idea!

It took 30s to 60s to fully load, but the content was available very quickly. The most entertaining thing was the stripe example. I didn’t realize it was supposed to load the card form, so I hit subscribe and it caused an error (because the card form wasn’t loaded yet) but the app handled it appropriately. It would be better if the subscribe button were disabled before the component loaded (which took at least a minute), but it’s still pretty good.

Overall, it was a very refreshing experience.

Ah, makes sense on the stripe component.

I did notice that for some components I need to show a loading indicator while they are loading async (for a slow connection).

Thanks for letting me know!

That is really a great website. Why didn't you built that site with HTML?

Just check the stats here: https://perf-track.web.app/react

It’s not a static site.

Type “dir” in the header (or other activities in the “cool-stuff” post).

Moreover, I can build anything I want very quickly - with great engineering - and still get performance comparable to a static site.

> Downloading 500kb of js and processing this is just a nogo.

React + react-dom is under 40kb minified gzipped. The other 460kb are your responsibility.

The reality shows totally different numbers https://perf-track.web.app/react

Use Gatsby and generate a static site w/ React? At least React is faster than Angular, which I strongly prefer.

Better, generate a static site without frameworks.

Reply on news.ycombinator.com