BanTool Documentation

Appearance

Chapter 9: Predicting the Future: Prefetching and Preloading ​

Of course. Now that we've optimized the initial page load, let's make navigating within the application feel instantaneous. It's time to explore the predictive loading techniques: Prefetching and Preloading.

The Scenario 📝 ​

  • System: A multi-page web application (e.g., with Home, About, and Contact pages).
  • Problem: When a user is on the homepage and clicks the "About" link, there's a noticeable delay. They have to wait for the browser to download the JavaScript and other assets for the "About" page before it can be displayed. The navigation doesn't feel instant.

Analyzing the Bottleneck 🧐 ​

The bottleneck is network latency. The application only starts fetching the resources for the next page after the user has already clicked the link. We can do better by anticipating the user's actions.

Two "Fortune-Telling" Techniques ​

1. Preloading (<link rel="preload">) ​

  • The Logic: preload tells the browser, "This file is critically important for rendering the current page. Please download it immediately with a high priority."
  • When to Use It: For critical assets on the current page that the browser might discover late. The most common examples are font files (as we saw in Chapter 8) or a critical background image defined in a CSS file.
  • Purpose: To speed up the rendering of the current page.

2. Prefetching (<link rel="prefetch">) ​

  • The Logic: prefetch tells the browser, "This file will probably be needed for the user's next navigation. When you have a spare moment (i.e., you're idle), please download it with a low priority and store it in the cache."
  • When to Use It: For assets belonging to other pages that the user is likely to visit next.
  • Purpose: To make navigating to future pages feel instantaneous.

How Nuxt Handles This ✨ ​

This is another one of Nuxt's "magic tricks" that significantly improves the user experience.

Nuxt automatically prefetches code for you.

  • How It Works: When a user scrolls the page and an internal link (a <NuxtLink> component) enters the viewport, Nuxt automatically injects a <link rel="prefetch"> tag into the page's <head>.
  • The Result:
    1. A user is on the homepage and scrolls down, and the "About Us" link becomes visible.
    2. In the background, the browser quietly starts downloading the JavaScript file for the "About Us" page with a low priority.
    3. When the user finally clicks the "About Us" link, the necessary code is already waiting in the browser's cache.
    4. The page transition happens almost instantly.

Conclusion:

  • Preload and Prefetch are powerful directives for controlling the timing and priority of resource loading.
  • Preload is for the current page; Prefetch is for future pages.
  • Modern frameworks like Nuxt have intelligent prefetching strategies built-in, eliminating navigation latency and creating an incredibly smooth user experience.