Remix.run and web performance

Recently, I rebuilt my main website, in Remix.run. The site was originally made in Gatsby, then remade in Next.js (see legacy site), then remade again in Remix. It has given me a great perspective about creating websites, and the changes over the years in building them.

You may be surprised to know that my opinion of web technologies in 2022 is a very positive one.

to the moon!

At first glance the number of web frameworks is daunting. There's Sapper, Hugo, this thing called Gridsome that I've never heard of, Nuxt, Next.js (great framework), Eleventy, and CRA (don't use this).

But the performance of some of these frameworks are astounding. Combine that with caching services like Cloudflare and Fastly, and build services like Vercel, Netlify, and CloudCannon, and you have some impressive power at your disposal for making insanely quick websites.

The bad times

In the earlier days, when the only React framework was Gatsby, people would often say "that's too heavy, there's too much javascript to load", and to be honest, they were right. FCP, and especially LCP were often severely impacted ("but it's okay cause TTFB quick"), and the performance advice always seemed to be to optimise images with tools like ImageSharp, and not to actually target the JS load at all. There are ways to optimise Gatsby sites for peak performance (see the stats of Gatsby.org), but these were often beyond me, and very complex.

too damn high!

The good times cometh

With Remix, most of the common speed improvements are done for you. You don't need to use a special component for images, you don't need any config to keep perf running smoothly, and integrations with Netlify and Vercel are excellent. Your actual web performance is great, without much change to your CSS libraries or design system, or the way you write `img` tags (don't forget `preload="lazy"`, people). Also, packages like GSAP or THREE.js on the top won't impact your site terribly. (On that note -- a good convention to have on supa-quick sites is no initial animation on above-the-fold content. Slows users' perceived LCP, and often actual LCP). (Edit: whoops! Looks like I'm guilty of this on this page right here).

Next.js also is a fabulous framework. I believe Next.js excels for making applications, which is not what it is really known for. Remix is far too fresh at the moment to do much more than a slick marketing page, but I believe that these frameworks will dominate the future as we enter into a world with so many people knowing React. But who knows, right?

In any case, React sites are no longer held back by their javascript load, and can in the best case, perform as well as HTML documents. This takes "that's too heavy, there's too much javascript to load" away, and the result is super quick websites that are easy to develop. That's why I'm so positive about frontend development -- new sites are quick, new sites are good, and new sites are easy to develop. There's no managing the rendering yourself (Backbone), or dealing with Gatsby bloat.

Frontend is dead, long live frontend!

oh yeah!