4 ms·

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

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

la_fayette 6y ago
Check the time to interactive. Rehydration creates a massive cpu increase. https://developers.google.com/web/updates/2019/02/rendering-on-the-web https://developers.google.com/web/updates/2019/02/rendering-...
- ricksharp 6y ago
  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.
  - withinboredom 6y ago
    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.
    - ricksharp 6y ago
      Ok, here it is https://ricklove.me https://ricklove.me Here is a post that explains some of the content that is interesting: https://ricklove.me/cool-stuff https://ricklove.me/cool-stuff Let me know how it does on a slow connection.
      - soperj 6y ago
        I'm quite sad that hunter2 isn't in your passwords.txt
        ricksharp 6y ago
        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!
      - withinboredom 6y ago
        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.
        ricksharp 6y ago
        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!
  - la_fayette 6y ago
    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 https://perf-track.web.app/react
    - ricksharp 6y ago
      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.

la_fayette 6y ago

Check the time to interactive. Rehydration creates a massive cpu increase. https://developers.google.com/web/updates/2019/02/rendering-on-the-web https://developers.google.com/web/updates/2019/02/rendering-...

ricksharp 6y ago
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.
- withinboredom 6y ago
  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.
  - ricksharp 6y ago
    Ok, here it is https://ricklove.me https://ricklove.me Here is a post that explains some of the content that is interesting: https://ricklove.me/cool-stuff https://ricklove.me/cool-stuff Let me know how it does on a slow connection.
    - soperj 6y ago
      I'm quite sad that hunter2 isn't in your passwords.txt
      - ricksharp 6y ago
        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!
    - withinboredom 6y ago
      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.
      - ricksharp 6y ago
        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!
- la_fayette 6y ago
  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 https://perf-track.web.app/react
  - ricksharp 6y ago
    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.