Bennett Hardwick
Wiki

Fast link loading

Using a simple JavaScript snippet you can make navigation of static sites feel almost instant by using the prerender tag.

I talk about this a little bit in a blog post about building this site (at least it’s Zola incarnation).

Here’s the snippet:

// A map to store all the links that have already been
// fetched
const FETCHED = {};

// Select all the links on the page. This could probably be
// constrained to just inbound links, but let's try it with
// all links instead.
Array.from(document.querySelectorAll("a")).forEach((element) => {
  element.addEventListener("mouseenter", function addLink() {
    // If this link has already been fetched before, don't worry
    // about fetching it again.
    if (FETCHED[element.href]) {
      return;
    }

    FETCHED[element.href] = true;


    // Create a <link rel="prerender"> element to prerender
    // the target page
    const link = document.createElement("link");
    link.href = element.href;
    link.rel = "prerender";
    document.head.appendChild(link);

    element.removeEventListener("mouseenter", addLink);
  });
});

Linked references: