Supercharging User Experience with Predictive Prefetching

In this talk we will explore the concept of predictive prefetching and how it increases the web performance and INP(Interaction to Next Paint) score.
As we at 1mg always focus on enhancing user experience and setting new benchmarks for performance, we believe that by anticipating user actions and proactively fetching the necessary resources in advance, we can drastically improve the user experience and achieve performance similar to that of native applications.

As we built the prefetching module, we built it as a standalone library so that you can plug it into any project. Also we fine tuned the package to handle most of the things on its own like not fetching too many resources as it's a waste of user’s data bandwidth and clearing existing data fetching processes on user navigation. Optimize the prefetching process to work seamlessly across different devices and network conditions.

What have we built:
- Route prefetching package which you can integrate to any JS framework. This package accepts either the routes for which we want to prefetch bundles or direct link to the resource.
- React hooks over the package to easily integrate with a React Project.
- A webpack plugin which reads your projects routes file and generates routes(navigation links) to JS bundles mapping. It supports both Loadable and React Lazy chunking.
- A client to fetch next routes based on the user's current journey and also push the events data to your AI model.
- Also we have built another layer if you don’t want to use the AI model to get routes you can use this layer to fetch resources for the links available in the current view of the page which we are updating as user scroll using JS Intersection Observer API.