 Hello, everyone. My name is Minko Gachev. I'm a senior developer programs engineer in the Angular team at Google. In this video, I'm going to tell you how to improve the user experience of your app by using predictive prefetching. Imagine that we were in the subway, waiting for the next train. In the meantime, we open our favorite Wikipedia app and decide to learn more about cheese. Just around the time it gets tasty, our train arrives. We get into the car and depart. While sitting there, we decide to continue reading more, but we have a poor signal. We start angrily, rage-clicking on the links, but it doesn't help. It just makes the situation even more frustrating. Let us see how we can use prefetching for fewer rage-clicking experiences. First, let us explain what is prefetching. Imagine a user is reading the cheese article from before. In the background, we can download and cache the content associated with other pages that are likely to be needed next. So when they perform a navigation, they can have an instant experience. There are different prefetching strategies. For example, we can prefetch all the assets in the app, prefetch only the assets associated with visible links, initiate prefetching when the user's cursor is a buff link, or apply predictive prefetching. Predictive prefetching is a technique that uses methods from data analytics and machine learning to provide a data-driven approach. In order to use predictive prefetching, we need an app usage report that we can feed into a machine learning model, which enhances the app by providing a predictive experience. Microsoft's Office 365 uses predictive prefetching with Angular to improve the responsiveness of their lazily loaded components. YouTube is predictively prefetching content for instant user experiences. But you don't have to be Microsoft or Google to take advantage of this technique. guess.js is a library that adds predictive prefetching support for apps using popular frameworks. And you can take advantage of it today. It ranks the possible navigations from a page and prefetches only the JavaScript that is likely to be needed next. Now, let me tell you the story of Navid, who introduced predictive prefetching with guess.js to his web app. Navid is building a popular web app with tens of thousands of users for finding jobs in Pakistan. He developed his web app with Angular, using the Angular Router and CLI. Let us compare how three different prefetching strategies would perform on Navid's website. If he was prefetching all the modules in the app, this would have consumed 2.56 megabytes of data for a single user visiting the home page. With a more efficient strategy, if he was only prefetching the visible links on the page, this would have consumed 1.22 megabytes of data. With guess.js, Navid's website consumes only 0.18 megabytes of data for prefetching when the user visits the home page. This is 7% of the traffic consumed by the most aggressive strategy. With a tens of thousands of users visiting Navid's website daily, he saves gigabytes of traffic. The prefetching of guess.js comes with over 90% accuracy. Combined with prefetching on mouse over, it can provide instant experiences for all the users of his website while saving their data. Additionally, guess.js adapts its prefetching algorithm to the user's connection speeds. It performs more aggressive prefetching for users on fast network and less aggressive for users on a slower network. Guess.js prefetches the individual JavaScript chunks depending on their likelihoods to be used. It calculates the probabilities for all the chunks to be needed at boost time so its payload could be reduced to the minimum. And finally, it does not block the main thread since it performs prefetching only when the browser is idle. Today you can use guess.js with Angular, Nuxt.js, Gatsby, and Next.js. The important takeaways from today are that predictive prefetching can speed up page navigation and improve the user experience. By doing so, it will increase user satisfaction and reduce their data usage. If you're using Angular or a popular React or ViewMeta framework, you can take advantage of guess.js today. You can learn more about guess.js and predictive prefetching on web.dev. Thanks for watching.