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.
Setup
Set up predictive prefetching using one of the following options:
Setup | Description |
---|---|
Manual | Manually enable predictive prefetching on each desired page by adding a script tag. Additionally, you must create a rule that defines a caching policy for the set of requests that will be prefetched by your clients. |
CDN-as-Code | Build, serve, and register a service worker that will prefetch requests. Additionally, you must create a rule that defines a caching policy for the set of requests that will be prefetched by your clients. This is the recommended approach for a JavaScript front-end framework that uses CDN-as-code. |
How Does It Work?
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:
edgio_dt_pf=1&edgio_prefetch=1
Sample URL:
https://cdn.example.com/inventory.html?edgio_dt_pf=1&edgio_prefetch=1
This workflow is illustrated below.
Sample Scenario
The following sample scenario assumes that the
Related resources
list is visible to the user as soon as the page loads:Request flow:
-
The client submits a request for:
https://www.example.com
. -
The closest POP responds with the payload for that request. This payload:
- Installs the
@edgio/prefetch
package. - Contains links to related resources.
- Installs the
-
The predictive prefetching service worker detects that the viewport contains 4 links. As a result, it will submit the following 4 prefetch requests while the user interacts with the page:1https://cdn.example.com/schedule.html2https://cdn.example.com/events.html3https://cdn.example.com/statistics.html4https://cdn.example.com/brochure.pdf
-
The closest POP will provide a response for each prefetching request according to whether it has been cached within that POP.
- Cache Hit: Returns the requested content within a
200 OK
response. - Cache Miss: Returns a
412 Precondition Failed
response.
- Cache Hit: Returns the requested content within a
Retrieving content before it is requested can potentially make it immediately available when it is requested by the client.