How I Made Navigation Feel Instant

When I started building albertoduran.com, I had a simple requirement.

The site had to feel fast.

Astro already helps a lot because everything is prebuilt and shipped as static files. That removes server rendering latency and reduces complexity. But navigation between pages can still feel slower than it should.

Even static sites normally trigger a full browser navigation cycle.

That means the browser still has to:

• Resolve DNS
• Open network connections
• Download a new HTML document
• Parse it
• Discover resources
• Fetch fonts, CSS, images

All over again.

So instead of relying on a single optimization, I combined several techniques:

• Astro ClientRouter
• Astro link prefetching
• Browser resource hints
• Static compression

Each one removes a different delay in the loading pipeline.

The result is subtle but important. The site feels responsive instead of reload-heavy.

Most of the performance behavior is wired directly in the base layout.

This layout does three things early in the page lifecycle:

1. Opens network connections to external APIs
2. Starts downloading critical fonts
3. Enables client side navigation

None of these change the architecture of the site. They simply help the browser start work earlier.

To understand why that matters, it helps to look at how a browser normally loads a page.

A typical navigation follows a fairly rigid sequence.

Several of these steps are unavoidable. What we can do is shift them earlier so the user never feels them.

That is exactly what the techniques in this project try to do.

Astro provides a small but powerful tool throughastro:transitions.

Once enabled, the router intercepts internal navigation and swaps page content instead of triggering a full reload.

This changes the lifecycle of navigation in an important way.

The outer document never disappears.

That allows persistent UI elements like the header and footer to stay mounted.

This avoids unnecessary layout reconstruction and gives the interface a much smoother feel.

But navigation can still wait on network requests. That is where prefetching helps.

Astro supports prefetching through thedata-astro-prefetchattribute.

You can attach it to any link.

In albertoduran.com it appears in navigation and cards.

These attributes tell Astro when to start downloading the next page.

Two strategies are used in this project.

Prefetch begins when the user hovers a link.

Lifecycle

By the time the click happens, the page is already downloaded.

Some links are extremely likely to be visited. Navigation items are a good example.

For those, prefetching starts after the page finishes loading.

This behavior is configured globally in the Astro config.

KeepingprefetchAlldisabled prevents unnecessary downloads and keeps bandwidth usage predictable.

Now navigation feels faster. But the first page render can still improve. That is where resource hints come in.

Fonts are notorious for slowing down rendering.

Normally the browser only discovers fonts after parsing CSS. That means they start downloading relatively late.

preloadfixes that by declaring them directly in the HTML head.

Without preload the lifecycle looks like this.

With preload the browser begins the download immediately.

This reduces flash of invisible text and speeds up the first render.

The layout also usesfont-display swap, which ensures text appears immediately using fallback fonts until the real font finishes loading.

External APIs often add latency because the browser must establish a secure connection first.

That involves several steps:

• DNS lookup
• TCP connection
• TLS negotiation

preconnectperforms these steps before the request is made.

When the API request eventually happens, the connection already exists.

This matters when the site depends on remote data sources.

dns-prefetchis a lighter hint.

Instead of opening a connection, it simply resolves the domain name ahead of time.

The browser converts the domain into an IP address while the page loads.

Later requests skip the DNS lookup entirely.

It is cheap to perform and safe even when the request might not happen.

Each optimization removes a different piece of waiting time.

When combined, the navigation pipeline changes significantly.

Most of the expensive work already happened before the click.

Performance improvements rarely come from one big trick.

They come from removing small delays everywhere.

On albertoduran.com this approach produces a few practical improvements.

• Fonts render faster
• External API calls start faster
• Navigation avoids full reloads
• Future pages load before the click
• Layout elements stay mounted

The site is still a static Astro build. That simplicity remains intact.

The difference is that the browser now receives better instructions about what to do early. When those instructions match real user behavior, the interface stops feeling like page loads and starts feeling like an application.