Navigation among tabs in the Portfolio template is visibly slow

[dandv]

Astro Info

Astro                    v4.4.9
Node                     v18.19.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none
which: no xclip in (...)

Describe the Bug

I'm evaluating Astro vs. Gatsby for generating static sites from Markdown files linking to static images. The persona is a CTO/VP Eng with a technical background, but concerned with higher-level UX metrics rather than the SPA/Islands/etc. implementation details.

Navigation among the tabs of the portfolio template is visibly slow. In a slower browser like Firefox, the flash of unstyled content, as well as image placeholders, are visible when switching among the tabs. Chromium displays page elements faster, hiding the issue.

What's the expected result?

By comparison, once it has loaded a page, Gatsby will navigate back to it INSTANTLY. You can test this at https://shopify-demo.gatsbyjs.com, which also loads far more images per page than the portfolio template.

Screencast

https://youtu.be/DDbTeaFG1Hk

Link to Minimal Reproducible Example

https://codesandbox.io/p/devbox/peaceful-glitter-5tmym or npm create astro@latest -- --template portfolio and npm run dev out of the local box.

[bluwy]

Are you testing with npm run dev? It's expected that some process, e.g. image optimization, can be slower in dev, but in build some things can be processed ahead of time, e.g. images are already pre-optimized. I think that will bring a fairer comparison to other deployed apps/sites.

[dandv]

Good point. I've run npm run astro build, then npm run astro preview and now the page loads about 20% faster, but still, visibly slow. I can no longer see the alt text of images, but can still see the image placeholders, and the flash of the layout being recomputed when navigating among the tabs. Navigating among Home / Work / About takes ~1 second from the blank page to the fully rendered page above the fold, with the pink/purple background. By comparison, the Gatsby demo switches instantly between the tab pages. Both are tested in Firefox 121, and a new screencast would be almost identical.

In Chrome, the pink/purple background doesn't flash when switching tabs. Only the four images from "My Work" take ~0.3s to load (vs. being instantly displayed as Gatsby manages to do), but not really worth complaining about. Firefox though is visibly jarring as it repaints the background image. Maybe related to #997?

[bluwy]

I think we don't have a way to control how browsers render MPAs, so the flash between navigations would be inevitable, but I think browsers try their best to prevent that.

But Astro (or MPAs in general) do have a few ways to reach the same level of UX as SPAs though, for example View Transitions and Prefetch. View Transitions doesn't work in Firefox, but prefetch does (and I also see the Gatsby demo has prefetching), so perhaps you can try this configuration and compare the results:

// astro.config.mjs
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  prefetch: {
    prefetchAll: true // prefetch everything for now to test things
  }
});

Other than that, I think it'll finally boils down to the tradeoffs between SPAs and MPAs. And you should choose one that's best for your needs.

[dandv]

Other than that, I think it'll finally boils down to the tradeoffs between SPAs and MPAs. And you should choose one that's best for your needs.

Agree.

However, Astro is likely losing users who check out high-profile Astro showcases like Microsoft's Fluent2 site, and notice slowly repainted elements of the page (the left nav in this case - see another quick screencast).

If Astro's goal is to make it "nearly impossible to build a slow site", then it should try to bake in Prefetch or whatever mechanism is required to make the sites fast for subsequent navigation as well as for the initial load. The Fast by default section on that page provides the business rationale.

If showcase sites were built with older versions of Astro that don't support these newer mechanisms, it might be worth reaching out to them regarding an update.

[bluwy]

We do support prefetch and view transitions by default, but we also have another goal of "Zero JS, by default", so we can't enable those by default. I agree that we should work on showcasing sites that make full use of these features. I'm not familiar with the showcasing setup, but checking the few top sites on the page, I think they feel snappy too.

I don't think there's much actionable in this issue. We'll always try our best to provide the best way to develop fast sites given the features browsers give today, but certain SPA/MPA sites can always feel faster/slower depending on the tricks used. I'll close this issue for now, but thanks for discussing your observations with us.

[vimalsonara]

I'm facing the same issue. I'm using Shadcn's tab component and placed all images in a public directory, it loads images every time tabs change.