Predictive prefetching improves performance by allowing web browsers to request popular content before it is needed. This allows pages to be rendered immediately instead of having to wait for a response from the origin.
A sample interaction with a predictive prefetching-enabled website is described below.
- A user visits a page on which predictive prefetching has been enabled.
- The user’s web browser requests popular pages, resources, and API calls. It then stores this content locally.
- The user navigates to a different page. It is rendered immediately since that content was prefetched by the browser.
The quickest way to get started is to perform the following steps:
Add the following tag to each of your pages:1<script src="/__edgio__/prefetch/install.js" defer></script>
Add a rule that applies the following features to the pages that will be prefetched:Sample Configuration:
@edgio/prefetchpackage directly. Installing this package allows you to take advantage of additional package features, and achieve deeper prefetch integration with your site. Learn how to install and use this package.
Upon loading a page on which automatic predictive prefetching has been enabled, the browser will request all links that meet the following conditions:
- The link is currently visible to the user.
- The Set Max Age and the Set Service Worker Max Age features have been enabled on the above link.
These requests will be submitted with the following query string parameters:
This workflow is illustrated below.