Link Preloading

Problem

Navigation feels sluggish because pages only start loading after users click. Every route transition shows a loading spinner while JavaScript chunks download. Users experience noticeable delays between clicking links and seeing content. The app feels slower than it needs to be despite having code splitting implemented.

Solution

Hint to browsers which resources will be needed soon so they can fetch them during idle time. This warms the cache and reduces latency when resources are actually requested.

Example

This example shows a link component that starts loading the destination page’s JavaScript when the user hovers over it, making navigation feel instant when clicked.

function Link({ to, children }) {
  const handleMouseEnter = () => {
    // Start loading the route module when user hovers over the link
    // This happens before they click, during the hover delay
    import(`./pages/${to}.js`);
  };

  // onMouseEnter triggers preload during hover, before click
  return <a href={to} onMouseEnter={handleMouseEnter}>{children}</a>;
}

Benefits

• Makes navigation feel instant by loading resources before users click.
• Improves perceived performance without increasing initial bundle size.
• Reduces or eliminates loading spinners during route transitions.
• Uses idle time efficiently to prepare for likely user actions.

Tradeoffs

• Wastes bandwidth if users hover over links without clicking.
• Can preload wrong resources if predictions are inaccurate.
• Requires careful tuning to avoid over-preloading and degrading performance.
• May compete with other critical resources for network bandwidth.