Dynamic & Predictive Preloading with JavaScript

class PredictivePrefetcher {
  constructor() {
    this.prefetched = new Set();
    this.init();
  }

  init() {
    // Respect user's 2G connection or Save-Data preference
    if (navigator.connection && (navigator.connection.saveData || /2g/.test(navigator.connection.effectiveType))) {
      console.log('Prefetching disabled due to slow connection or data-saver mode.');
      return;
    }

    // Prefetch links on mouse hover or touchstart
    document.addEventListener('mouseover', (e) => this.handleEvent(e));
    document.addEventListener('touchstart', (e) => this.handleEvent(e), { passive: true });
  }

  handleEvent(e) {
    const link = e.target.closest('a');
    if (!link || !link.href) return;

    const url = new URL(link.href, window.location.href);
    if (url.origin !== window.location.origin || this.prefetched.has(url.pathname)) return;

    this.prefetch(url.href);
    this.prefetched.add(url.pathname);
  }

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

new PredictivePrefetcher();