As projects scale this matters more. For example, hard page transitions will accrue the cost of re-initializing the entire application’s scripts for every click.
another low-hanging fruit for optimisation that nray.dev is not using, is the new inline-stylesheets option: https://docs.astro.build/en/reference/configuration-referenc...
using the 'auto' option usually reduces it to a single global sheet and page-specific inlined css. especially if you are writing a lot of short style blocks in your components, this is very very handy to reduce the amount of served css files.
When you are a small team, it is easy to create a performant site because you work in a tight circle with shared conventions, rules, etc. and it is always the same people that work on the project.
When you are a large organization (think Facebook blog), there will be hundreds of engineers/designers/copywriters/... that are exposed to the codebase over the course of many years. Each will need to make a 'quick change' that over time compounds into the monstrosities that you are referring to.
The best you can do is add automated processes into CI/CD that prevent shipping anything that does not meet certain criteria. This might hold for a while... but as soon something borks the shipping velocity and some higher-up starts asking for names, those checks will be removed "temporarily" to unblock what that's burning.
As an engineer who takes pride in developing accessible and performant software, this killed the drive/joy for me of working for large orgs.
After dealing with this in a previous job I've found great joy in working on legacy code - when a project has hit rock-bottom it can only get better.
If the JS files are set to load asynchronously, the initial load should be almost equally as fast, and React should load in the background. Afterwards, additional navigation should be near instant.
Look for a tag like this: <script id="__NEXT_DATA__" type="application/json">
I debated whether to go with Astro or Next.js for my new blog, but because I've not had experience with the new React server components, I decided to try Next.js. I've had a goal of making it have the least bloat possible, so it is kinda interesting to compare these side by side now.
I picked random two posts that have similar amount/type of content:
* https://www.nray.dev/blog/using-media-queries-in-javascript/ [total requests 13; JavaScript 2.3 kB; Lighthouse mobile performance 100]
* https://ray.run/blog/api-testing-using-playwright [total requests 19; JavaScript 172 kB; Lighthouse mobile performance 100]
It looks like despite predominantly using only RSCs, Next.js is loading the entire React bundle, which is a bummer. I suspect it is because I have one 'client side' component.
One other thing I noticed, you don't have /robots.txt or /rss.xml. Some of us still use RSS. Would greatly appreciate being able to follow your blog!