Member-only story
Evaluating Guess.js in Angular Applications
The predictive prefetching gets a thumbs up in Angular applications
Why Guess.js?
Page prediction is a browser feature or script that, when enabled, tells the browser to download resources that a user is likely to visit before they request the content. These resources are downloaded and cached for future use without the user making an explicit request. This process is called prefetching.
Page prediction improves performance by enabling almost instant loading of predicted content. However, page prediction may also download content a user does not seek. It is important to perform page prediction “correctly,” and its success will enhance user experience.
Guess.js is a JavaScript library and tool to automate the process of predictive prefetching.
What is Guess.js?
Guess.js was created around April 2018. The current version is 0.4.22, and it is still in alpha. It performs page prediction based on data drawn from data-analytics-driven approaches, such as Google Analytics and machine learning models.
Predictive data analytics can be applied in a number of contexts:
- Predict the next page (or pages) that a user is likely to visit and prefetch these pages.
— Page-level: Prerender or prefetch the page that is most likely to be visited next.
— Bundle-level: Prefetch the bundles associated with the topN
pages. - Predict the next piece of content (article, product, or video) that a user will likely view.
- Predict the types of widgets a user will likely interact with more, such as games.
Guess.js supports static sites, Angular, Gatsby, Next.js, Nuxt.js, and more. We use the Angular application to see how it works.
Guess.js Is Thumbs Up in Angular Applications
We are going to explore Guess.js in Angular working environment. It takes seven steps, where the first three steps set up an Angular project with lazy-loading for each route, and the last four steps set up and run the predictive prefetching with Guess.js.