Speed up your Web App with predictive prefetching
An accurate next-page navigation prediction using alz-predictor.
It’s 2021, isn’t time to power front-end with AI?
Well, in this article we’re gonna predict next-page user most probably want to visit, and prefetch the data by calling its API. This way next user visit will load instantly, which is a great improvement to the overall UX.
While this might sound complicated, actually ALZ Predictor makes it simple to train and predict events in pure JavaScript, without any machine learning or AI previous knowledge!
What is ALZ predictor?
alz-predictor takes a sequence of events — modeled as character symbols, one at a time, and gives prediction probability for each event.
Unlike Guess.js, alz-predictor is an online sequence prediction algorithm, which is easy to integrate, has a simple interface and doesn’t require any external data sources like Google Analytics.
Base Web App
To illustrate next-page prefetching, we’re gonna use a 5 pages Web App built with React, React Router and Bootstrap. Then we’ll train the model, predict and finally prefetch.
Wanna try final result? check online demo app
Some code highlights:
- For simplicity, state, fetching and routing are handled in App component:
- Navbar:
- Page component will fetch data only once:
Looking for full project code? check github example repo
Training…
User navigation behavior can be modeled as a sequence of actions, e.g: user clicks on Users, some time later clicks on Home, at some point later clicks on Posts, and finally Home again → [ Users, Home, Posts, Home … ]
In order to predict next-page the user want to visit, we need to train the predictor with user’s navigation sequence, to do so let’s first map each page link as a symbol:
"/users" --> 'u'"/posts" --> 'p'"/" --> 'h'
And then add the mapped symbol to the predictor each time the user clicks on any navigation link:
That’s all the training, simple isn’t?
Predictive prefetching
As the user starts navigating through our Web App, our predictive model starts learning user’s behavior, and in a soon we’ll be able to predict next-page.
Current predictions probabilities can be obtained (at any time) as follow:
const predictions = predictor.predict()// i.e: {h: 0.1, u: 0.02, p: 0.8}
In this example, we have 80% of chance that Posts is the next-page the user wants to visit.
To get the prediction symbol with highest probability, we can use the following code:
Finally let’s add a button to prefetch predicted page data by calling its API whenever its probability is greater than 0.7:
By using alz-predictor we were able to add predictive prefetching to a React based Web App with just a few lines of code, similarly it can be used with Angular, Vue or even vanilla JavaScript.
The following repository contains a complete example of next-page navigation prefetching using ALZ Predictor, which includes auto prediction on page reload and prediction learning data persistence on browser localStorag:
