 Hello, everyone. My name is Miko Gachev. I'm an engineer in the Angular team at Google. Today, I want to share with you how to build faster web applications by using predictive prefetching with guest.js. Web applications are slow. 77% of mobile sites take more than 10 seconds to load on a 3G network. And the average load time of a mobile web app is over 19 seconds. 19 seconds. This is not only going to frustrate our users and decrease convergence, but also stress them out. According to Ericsson, waiting for a slow web application to load is almost as stressful as watching a horror movie. And some resources are more expensive than others. If we ignore the latest advancements in the JavaScript stream parsing, 170 kilobytes of JavaScript could be over 20 times more expensive than 170 kilobytes of a JAPG image. Both assets need to be downloaded over the network. However, the JavaScript files need to go through decompression, after that lexical analysis, syntax analysis, need to be compiled and executed. Finally, once this is all done, the user will see rendered interface on their screen. Lazy loading is a technique which allows us to efficiently reduce the number of bytes of JavaScript that we're transferring over the wire without sacrificing functionality. In the context of JavaScript, we can apply lazy loading in terms of route-level code splitting and component-level code splitting. In this particular video, we're going to focus on route-level code splitting. Let us look at an example. On this image here, we have a page for adding new article and a link to a settings page. When the user is in the new articles page, the browser downloads only the JavaScript associated with this particular route. When the user navigates to the settings page, however, the browser sends a request over the network to fetch JavaScript associated with that page. Once it downloads the file and executes it, the browser can finally render the corresponding user interface on the screen. On a slow network connection, in the subway, for instance, this technique can create a lot of trouble. In this example, I have throttled the network with 1,500 milliseconds. Notice that when the user clicks on the settings link, they have to wait for 1.5 seconds before the navigation completes. We deal with so much complexity in single-page applications, such as state management and progressive loading, only to improve the user experience. However, simply by introducing route-level code splitting to make our application faster, we significantly decrease responsiveness. To improve the user experience, we can use a technique called prefetching. With prefetching, we can download in the background assets that are likely to be needed in the future and store them locally, so that when the user requests them, we can directly provide them from the local cache. Let's go back to the previous example. If the user is in the new article page, in the background, we can download the JavaScript associated with the settings page and save it to the cache. When the user navigates to the settings page, they're going to have instant experience since the associated JavaScript will be already available locally. Risks with prefetching are consumption of a lot of data or even never getting the resources that the user would need. To improve the prefetching accuracy and network utilization, we can take advantage of predictive prefetching. Let us look at a simple example only in order to illustrate the concept. On the screen, we have a Wikipedia-like application. We rank each link on the page depending on the probability for the user to follow it. For example, the links highlighted in red are likely to be visited. We are moderately confident the user will follow the links highlighted in purple and less confident they will follow the blue ones. In 2018, in collaboration with the Chrome team, we developed a library for predictive user experience called GuestJS. Since I'm really excited about how it works internally, I want to share a few bits with you. GuestJS consumes a report from Google Analytics or another analytics platform in order to build a page navigation graph. The nodes in this graph are pages in our application and the edges between them are the corresponding transitions. The thicker given edges, the more likely is for the user to perform the transition. But this information is about pages. To make useful predictions, we need to map its two JavaScript chunks. How can we transfer the knowledge from the Google Analytics report? Well, for this purpose, GuestJS is going to use static code analysis. At build time, it scans all the files in our application looking for routes definitions and tries to map them to pages from the Analytics report. As a next step, from the aggregated information, GuestJS is going to build a machine learning model. The model could be a recurrent neural network or something as simple as a Markov chain. At build time, GuestJS will introduce prefetching function as part of the main application chunk and for each chunk, it will invoke the model and predict which JavaScript files are likely to be needed next. For each one of them, it will add a prefetching instruction in the current chunk. Now, let us make a quick recap of how everything works together. First, GuestJS will consume a report from Google Analytics or another Analytics provider. After that, it will map the pages from the reports to routes and chunk entry points by statically analyzing the code of the application. Next, based on the report and the aggregated information, GuestJS will build a model, for example, a recurrent neural network or a Markov chain. Finally, it will invoke the model for each JavaScript chunk and the insert prefetching instruction for the files that are likely to be needed next. At runtime, while the user navigates across the application, the prefetching instructions will download and cache chunks depending on the user's connection speed and their probability to be needed. GuestJS, a popular static site generator on top of React, uses GuestJS on their official documentation page. Since they moved from their own prefetching solution to GuestJS, GuestJS will notice significant decrease in overfetching. GuestJS also supports Angular, NextJS, and NextJS. Now, let us have a very quick look on how we can add GuestJS to our own application. For this purpose, all we need to do is to introduce a single line of webpack configuration, creating an instance of the guest plugin and specifying a Google Analytics view ID. From there, GuestJS is going to figure out everything else automatically for us. We can read more about the integration with different frameworks at guestjs.github.io. Thank you.