ForesightJS: Predict What Users Will Do Next and Prefetch Content Before They Click

Intro

Every millisecond of load time matters. But what if you could predict what your users are about to do, and load that content before they even click? That's exactly what ForesightJS does - zero config, no training, just drop it in and let it watch.

I stumbled across this project recently and it felt like one of those "why didn't I think of that" ideas. Instead of waiting for the user to click, you can prefetch based on actual intent signals. No machine learning bloat, no complex setup. Just smart, lightweight prediction.

What It Does

ForesightJS is a tiny JavaScript library that observes user behavior - like cursor movement patterns, scrolling speed, hover duration, and interaction frequency - to predict which link or element the user is most likely to click next. Once it identifies the most probable target, it pre-loads that content in the background using the browser's native prefetch capabilities.

Think of it as a predictive cache for your web app. The library learns on the fly, adapting to each user's unique browsing style without any configuration from you.

Why It's Cool

Zero config actually means zero config. No custom event handlers, no complex data pipelines. You include the script, point it at a container element, and it just works. The prediction engine uses heuristics based on common human behavior patterns, so it doesn't need a training phase or server-side processing.

Tiny footprint. We're talking a few kilobytes minified. It won't bloat your bundle.

Privacy-first. All prediction happens client-side. No user data leaves the browser, no cookies, no tracking IDs. This is a refreshingly ethical approach to performance optimization.

Works with any framework. Drop it into React, Vue, vanilla HTML, or even a static site. It doesn't care about your stack.

Smart fallbacks. If the prediction confidence is low, it won't prefetch. No wasted bandwidth, no unnecessary requests.

How to Try It

Getting started is embarrassingly simple:

<script src="https://cdn.jsdelivr.net/npm/foresightjs"></script>
<script>
  ForesightJS.init('#main-content');
</script>

That's it. Replace #main-content with the ID or class of the container holding your navigable elements. The library takes it from there.

Or if you're using a build tool:

npm install foresightjs

import ForesightJS from 'foresightjs';

ForesightJS.init('#app');

The demo is right in the repo. Clone it, open index.html in your browser, and watch the console logs show predictions in real time as you move your mouse.

Final Thoughts

ForesightJS isn't trying to be a magical AI solution. It's a practical, well-executed idea that solves a real problem - the latency between user intent and content delivery. For apps where every milliseconds matters, this could easily shave off 200-400ms on perceived navigation time.

It's particularly useful for documentation sites, paginated content, image galleries, or any UI where users navigate between similar pages. Give it a try on a side project and see if it feels faster. I think you'll be surprised at how well simple heuristics can work.

Found this on @githubprojects