Prefetch Page Accelerator

Modern web performance is often a game of milliseconds. While we spend hours compressing images and stripping out redundant code to shave down load times, there is an overlooked psychological trick that can make your site feel near-instantaneous: predictive prefetching.

• Instead of waiting for a reader to actually click a link before asking the server to load the next page, you can use JavaScript to anticipate their intent.

By placing a lightweight script into your site's template, the browser gets a vital head start on downloading the next destination file before the user's finger or mouse button even goes down. Rather than blindly prefetching every single link on a page - which wastes bandwidth and throttles mobile data plans - the smart approach is to trigger the download only upon a user’s hover or touch event.

On a desktop, there is an average human delay of 200 to 500 milliseconds between a mouse cursor parking over a link and the finger completing a click.

On a mobile device, a similar, albeit shorter, latency exists between the initial touch on the glass and the browser executing the command. This script silently captures that exact window of intent. It waits a tiny fraction of a second to ensure the movement isn't just a casual swipe, and then quietly injects a low-priority background request for the upcoming page.

The result is a browsing experience that feels incredibly fluid and snappy, mimicking the behavior of an expensive single-page web application on a standard blog platform. Because the script is entirely asynchronous and uses passive event listeners, it runs smoothly in the background without causing a single stutter to page scrolling or layout rendering.

It automatically filters out external websites or simple anchor tags, focusing solely on preloading your internal articles. For the person reading your blog, the transition between pages becomes practically seamless, pulling the next article instantly from the local browser cache the exact moment they decide to click.

Buy Me A Coffee

Prefetch Page Accelerator

<script>
(function() {
    // Check if the browser supports link prefetching
    const supportsPrefetch = document.createElement('link').relList && 
                             document.createElement('link').relList.supports && 
                             document.createElement('link').relList.supports('prefetch');
                             
    if (!supportsPrefetch) return;

    const prefetchedUrls = new Set();
    let hoverTimer;

    // Injects the prefetch link into the document head
    const prefetchUrl = (url) => {
        if (prefetchedUrls.has(url)) return;
        prefetchedUrls.add(url);

        const link = document.createElement('link');
        link.rel = 'prefetch';
        link.href = url;
        link.as = 'document';
        document.head.appendChild(link);
    };

    // Handles the hover or touch event
    const triggerPrefetch = (event) => {
        const target = event.target.closest('a');
        if (!target || !target.href) return;

        const url = target.href;
        const currentOrigin = window.location.origin;

        // Ensure it is an internal link, not a hash link, and hasn't been fetched yet
        if (url.startsWith(currentOrigin) && !url.includes('#') && !prefetchedUrls.has(url)) {
            // Wait 65ms to ensure it is an intentional hover, not a passing swipe
            hoverTimer = setTimeout(() => {
                prefetchUrl(url);
            }, 65); 
        }
    };

    // Cancels the prefetch if the mouse moves away too quickly
    const cancelPrefetch = () => {
        clearTimeout(hoverTimer);
    };

    // Attach passive event listeners for maximum performance
    document.addEventListener('mouseover', triggerPrefetch, { passive: true });
    document.addEventListener('mouseout', cancelPrefetch, { passive: true });
    document.addEventListener('touchstart', triggerPrefetch, { passive: true });
})();
</script>