Edgio
Edgio Console

Manual Predictive Prefetching Setup

Set up predictive prefetching by adding a script tag to all of your pages.
Key information:
  • By default, only content that has already been cached on the POP closest to the user may be prefetched. Edgio returns a 412 Precondition Failed response for prefetch requests that result in cache misses. This ensures that your infrastructure does not experience additional load due to prefetching.
  • Due to security requirements, prefetching requires the HTTPS protocol. An exception to this requirement occurs when using localhost.
  • If you are using Edgio Sites or a JavaScript front-end framework, you can achieve deeper prefetch integration and custom behavior by installing the @edgio/prefetch package. Learn how to install and use this package.

Setup

Perform the following steps:
  1. Register the service worker by adding a prefetching script tag to each web page that should support prefetching.
  2. Define a caching policy for the set of requests that can be prefetched. This caching policy requires the following features:
    Alternatively, you may manually enable prefetching for specific requests.

Registering the Service Worker

Prefetching requires a pre-built service worker. Add this service worker by including the following script tag to your existing site’s HTML:
HTML
1<script src="/__edgio__/prefetch/install.js" defer></script>
This script tag installs the latest version of the @edgio/prefetch package.
Alternatively, you may install a specific version of this package by adding the version to the script tag as shown below. The lowest supported version is v7.3.1.
HTML
1<script src="/__edgio__/prefetch/v7.3.1/install.js" defer></script>
Example:
HTML
1<html>
2<head>
3    <title>My awesome site</title>
4</head>
5<body>
6    <h1>My awesome page</h1>
7    <p>This site uses the @edgio/prefetch package.</p>
8

9   <script src="/__edgio__/prefetch/install.js" defer></script>
10</body>
11</html>
This package supports the following attributes:
AttributeDescriptionDefault
data-include-cache-missesSet to true to enable prefetching from the origin when a cached response is not found.false
data-force-prefetch-ratioDetermines the probability that a request will be prefetched from the origin when a cached response is not found. This attribute is ignored when the data-include-cache-misses attribute has been enabled. Valid values are: 0 - 1.

For example, set it to 0.5 to enable this behavior for 50% of the requests.		0
Example:
HTML
1<script src="/__edgio__/prefetch/install.js" data-include-cache-misses="true" defer></script>

Automatic Prefetching

Edgio will attempt to prefetch links when all of the following conditions have been met:
Prefetch requests are given the lowest priority. This ensures that they do not block more critical requests like API calls, images, scripts, and navigation.
By default, the response varies according to whether the requested content has been cached within the POP closest to the user.
  • If a cached response is found, then Edgio will serve this cached content to the browser. The browser will then cache it locally for the duration defined by the Set Service Worker Max Age (service_worker_max_age) feature.
  • If a cached response is not found, then Edgio will return a 412 Precondition Failed response.
    Override this behavior by enabling the data-include-cache-misses attribute.
Example:
HTML
1<html>
2<head>
3    <title>My awesome site</title>
4</head>
5<body>
6    <h1>My awesome page</h1>
7    <p>This site uses the @edgio/prefetch package.</p>
8    <nav>
9        <a href="/pages/1">Page 1</a>
10        <a href="/pages/2">Page 2</a>
11        <a href="/pages/3">Page 3</a>
12    </nav>
13

14    <script src="/__edgio__/prefetch/install.js" defer></script>
15</body>
16</html>
Add the following rule to cache and prefetch all navigation links in the above example:
  • Rules:
    Prefetch rule
  • CDN-as-Code:
    JavaScriptroutes.js
    1import { Router } from '@edgio/core/router'
    2

    3export default new Router()
    4    //  This rule's path matches the navigation links href attribute
    5    .match("/pages/:id", {
    6        caching: {
    7            max_age: "1h", // Caches the response on the edge for 1 hour
    8            service_worker_max_age: "1h" // Enables automatic prefetching and caches the response in the browser SW cache for 1 hour
    9        }
    10    })
Verify that links are automatically prefetched and cached locally by opening the Network tab of your browser’s developer tools (F12).
Prefetch requests on the Network tab of a browser's developer tools

Manual Prefetching

Call the Edgio.prefetch() function from your code to manually prefetch resources.
Example:
HTML
1<html>
2<head>
3    <title>My awesome site</title>
4</head>
5<body>
6    <h1>My awesome page</h1>
7    <p>This site uses the @edgio/prefetch package.</p>
8    <nav>
9        <a href="/pages/1">Page 1</a>
10        <a href="/pages/2">Page 2</a>
11        <a href="/pages/3">Page 3</a>
12    </nav>
13

14    <script src="/__edgio__/prefetch/install.js" defer></script>
15    <script>
16        document.addEventListener('DOMContentLoaded', () => {
17            const { prefetch } = Edgio;
18            prefetch('/static/img/my-image.png');
19            prefetch('/static/img/another-image.png', 'image', {
20                // Override service_worker_max_age config for this call
21                maxAgeSeconds: 60 * 60 // 1 hour
22            });
23        });
24    </script>
25</body>
26</html>