DEV Community

Cover image for Faster Pages with React ✨

Faster Pages with React ✨

Florian Rappl on August 30, 2024

Photo by Mathew Schwartz on Unsplash This is the story of our homepage make over to reach a solid lighthouse score. If you want to read how we mad...
Collapse
 
kurtextrem profile image
Jacob "kurtextrem" Groß • • Edited

Very minor nit: You probably want to wrap hydrateRoot in startTransition so the hydration becomes concurrent (improves INP, see slide 27)

Collapse
 
florianrappl profile image
Florian Rappl smapiot •

Yeah this is great - I almost forgot about it. I guess the main reason is that we potentially (see conclusion) replace React anyway at runtime with Preact (which has startTransition, but it's only a stub invoking the callback immediately).

I just tried it and the INP goes from ~50ms to ~5ms (in most cases it's just flat 0). So yeah, definitely worth doing!

Collapse
 
heyjmac profile image
J Mac •

Great slides!

Collapse
 
kurtextrem profile image
Jacob "kurtextrem" Groß •

Thank you! Really appreciate it.

Collapse
 
serhiyandryeyev profile image
Serhiy •

Great article! Thanks!!!

Collapse
 
drew_e29d5b0152adc2 profile image
Drew Riley •

Literally anything to make react faster I'm sure will be welcomed by the world.

But if this article interests you, read some about using nearly any other framework. 😜

Collapse
 
florianrappl profile image
Florian Rappl smapiot •

Hehe one thing I missed in the article is that we looked into a migration to Astro, which we use for a couple of other websites. It would fit very well here. However, as the underlying component lib uses React the migration would need to be done here first - which is out of scope.

So I guess you miss the point of the article. If the article interests you, you might not look into React for doing web dev, but you rather have a page using React and want to speed it up (and a migration might be out of scope, too).

Collapse
 
landsman_78 profile image
Michal Landsman •

Web development is doomed!
Why does it have to be overcomplicated to deliver simple sites?

After almost 6 years in React, I plan to start over with much simpler tools than this. Stockholm syndrome forces us to do crazy gymnastics...

Collapse
 
greenersoft profile image
GreenerSoft •

The best solution for a high-performance site is not to use React! 🤣

Abandoning React is one option to consider. This is the choice made by the Microsoft Edge development team, for example, with an HTML-First approach.

Collapse
 
oriontg profile image
Trịnh Trần Trường Giang •

The font used in this article makes it very difficult to read on my phone. 😥

Image description

Collapse
 
florianrappl profile image
Florian Rappl smapiot •

Are you sure that's not a problem with your configuration? The article (like any other on dev.to) cannot change the font of dev.to.

Collapse
 
oriontg profile image
Trịnh Trần Trường Giang •

I'm using Safari and now I know why...