Hacker News Reader

Comment by ricksharp | Hacker News Reader

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).

View on HN

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.

Reply on news.ycombinator.com