Fast By Default? Perception is Reality.

[vlucas]

Some initial implementations of Hydrogen have seemed much slower than anticipated by their developer teams. This is almost always due to implementation issues like:

• No caching
• No preloading
• Unnecessary query waterfalls
• Over fetching of data from GQL
• 3rd party scripts

This has happened a few times now, even with some experienced developers on the implementing teams.

We want Hydrogen to feel fast right out of the box. How can we better achieve this? Should we ship more aggressive defaults or a "fast mode" that is ON by default? Let's have a discussion about this.

[blittle]

There are some initiatives being tracked here: Shopify/hydrogen#1476

[cartogram]

I've been an advocate for in-browser developer tools as a project for some time that I think would help surface some of the configs that are OFF by default. If there were a UI that could show what Cache settings, preload settings, long waterfalls and over-fetched fields, directly in their browser as they are previewing the storefront, I think that could go a long way in both educating developers about those settings and directing them to how to change them. Or better: provide toggles so they could test before/after.

[vlucas]

Yeah @cartogram this does seem like an area where a really good on-page devtools project could really shine. I know we have talked about this before, so it might be a good opportunity to move it up in priority for the project.

[cartogram]

I did a quick doc a while ago, but it didn't receive traction https://docs.google.com/document/d/1IZRheZPUEo-Lc7fT2ldN0F6tsFGVTR7IBd4IK2mefoU/edit

[mynameisadamf]

This is great! @frandiox and I were just talking about this the other day. Being able to see performance, get insights and be able to artificially test different scenarios (change network speed, delay in server, etc). To be able to see where your queriers are and visually see loaders. Almost like network view.

[juanpprieto]

I 💯 think this is a great way forward too. After building a lot headless sites, I quickly learned how easy it is for a vast set of developers to turn a performant stack into one thats sluggish.

Usually the implementer is unaware of too many details of the platform when they start using it, and this just creates most of the performance pitfalls.

I think frameworks enhancements can only take us so far in ensuring performance. Real-time insights on the other hand feel basically limitless. Or at the very least, it shifts the performance responsibility the towards the implementer.

[cartogram]

I revisited some dormant work around this, let's discuss there: Shopify/hydrogen#1548

[jplhomer]

One thing that would be helpful for this discussion is specifics:

• What specifically do the merchant developers we're talking about expect? A lightning fast cold boot developer environment? Better tooling?
• What metrics should we be chasing? Our demo store template scores extremely well on perf tests, responds in sub-100ms, etc. Let's define specifics here.

[vlucas]

I don't think merchants would be able to tell us what they want, other than "this should be faster", which is kind of ironic since it is always the implementation that is slow. We already know the metrics we want and the lighthouse scores we want, and we hit those when we control everything (see the demo store).

We know how to make Hydrogen fast, but if a lot of other people are not ending up with a fast result after building with Hydrogen, there may be more we can do to help them along towards that end. That's what this discussion is about.

[blittle]

I think page transitions are often too slow.