Optimistic navigation—performance illusion

It's annoying when navigation is slow and users have a lack of response when clicking on links. That demo app below demonstrates a website with artificially slow navigation. Click on the article card or "Home" to see navigation in action.

Optimistic UI updates involve showing immediate feedback to the user action. The interface is updated with an attempt to render the server's response in advance. Interface can be updated in two ways:

• Render with predicted data. We assume that the server will respond with the same or similar data.
• Render without predicted data and display a skeleton version of the server response.

If the server responds with an error, optimistic UI updates should be rolled back and the error handled.

In optimistic navigation, we update UI optmistically during navigation. UI can be updated without any predicted data; in that case, skeletons or spinners can be rendered instead of page content. However, when page data can be predicted, we can create the illusion of instant navigation.

The illusion of fast navigation is created when predicted data covers the entire user screen. In that case, users have to scroll to notice that page data is still loading. Here's a good chance that the end user will never scroll fast enough to see it. Even if the user does notice that, consuming this predicted data is preferable to staring at a blank screen.

Optimistic navigation increases the perceived speed of the application, making the wait feel shorter or instantaneous. Imagine this as giving the user a "sample portion" before presenting the actual product. See optimistic navigation in action on the demo app below.

In most cases, already loaded data can be used for optimistic navigation. Usually there's no difference between data displayed in the entity card and data displayed in the entity detail page. For example, when the user opens a page with a list of article cards (thumbnail, title, and description), on click they navigate to the article page with the same thumbnail, title, and description. Layout is changed, but data remains the same.

If you feel like data from the entity card is not enough, consider increasing it by changing the amount of data returned for that entity listing request. The more placeholder data you get, the more content of the page can be rendered ahead of time. Good-crafted, optimistic navigation can hide 5–10 seconds of delays from the user. I achieved such results in that Tanstack-Start starter (use with 3G network throttling).

Optimistic navigation is consistent; it guarantees that every navigation takes ≈16 ms to render. This makes navigation feel seamless and intuitive, much like flipping through a high-quality, glossy magazine. It leads to a more engaging and satisfying user experience.

• May require additional API calls or database queries and increase time of initial load. It almost never increases load latency dramatically; if it does, refactor the backend.
• RAM Usage: Storing predicted data can increase memory use, though modern browsers manage this efficiently.
• Potential Confusion: When predicted data is different from data returned by the server, the content of the page will be rerendered. If the server returns an error, optimistic changes are rolled back, and the error is displayed.

Prefetching is often used instead of optimistic navigation. Prefetching happens once the link is visible in the viewport or when it is hovered. It significantly reduces perceived load time once the user decides to click on a link.

Pros:

• Easy to use, supports in most routers/meta-frameworks
• Can significantly speed up navigation

Cons:

• Inconsistency: Not always effective for users with slower connections or devices.
• Environmental Impact: Increases CO2 emissions due to more network requests.
• Resource Consumption: Drains battery life, increases internet usage, and hosting costs.
• SEO Penalties: Might negatively affect SEO due to excessive resource use.
• Data Staleness: Preloaded content can become outdated once used for rendering.

The trend in modern web development leans towards pre-downloading content to achieve fast navigation. Optimistic navigation aims to create the illusion that page content is already loaded, enhancing the user's perception of performance and responsiveness.