GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
Instant Transitions: How to extend the Edge cache into the browser with Predictive Prefetching
It’s common knowledge that navigation delays decrease conversion and increase bounce rates. For those of you that manage and track conversion on sites with a lot of traffic, you’ve likely seen this scenario play out. Hopefully, you’ve also seen the inverse. You’ve seen conversion increase when navigation and page load times improve.
Performance and conversion go hand in hand.
CDN companies often use this illustration as an example to prove ROI for their services. The solution is simple. Get static content as close to your users as possible to speed up delivery and the investment is ROI positive. Visitors will hang around longer, make more purchases and return more often. It makes sense, doesn’t it? If you are reading this then you probably already know it’s true. But what’s next? Can we take it one step further and completely eliminate network response times from the web experience and make it similar to a native app? If we can reduce delay to zero, wouldn’t we maximize conversion? If we can cache edge content in the browser before the user clicks, transitions could be instantaneous, similar to a native app.
“Can we really have web application performance similar to native apps for our site visitors?”
With Edgio, you can.
Let’s start by taking a look at what makes native mobile applications great. Most mobile app users don’t know what is happening behind the scenes but they certainly appreciate the performance improvements gained by downloading and installing applications to their devices. It’s simple, load the app, navigate through screens and transitions are instant. Tab from one thing to the next, add an item to your cart and enjoy a frictionless experience. Rarely does the user see a “loading” indicator, and, when they do, it makes sense; like submitting payment information during checkout. All is possible with clever development and a capable platform.
Enter Predictive Prefetching by Edgio. Now your web users can enjoy the same type of experience.
Many CDN companies offer cache warming options they call “prefetching” to help bring content from your origin to the edge. A great first step, but it doesn’t get you all the way there. The user still has to wait while the content moves to their device. So how do we take it one step further? From the origin to the edge and all the way into the browser before they click, Edgio’s prefetching is a browser integration that brings the edge directly into the device. Something traditional CDN’s aren’t capable of.
“Well that sounds like magic, how does it work?”
Great question and we totally understand your skepticism. To understand how it works, we need to start with the basics. Watch this quick explainer below, then let’s take a look at what prefetching is at its core.
What is prefetching … really?
Let’s look at MDN for a definition of prefetching as your browser understands it. Link prefetching is a hint to the user agent that it should download an asset that might be needed later when resources free up. First, your page loads and starts processing asynchronous requests. When the network and CPU free up, the browser will grab the additional resources you’ve added to the document. For basic prefetching, as the browser understands it, it can look a little something like this:
<head>
…
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/next-image.jpg" />
…
</head>
The net result is the next-page.html and next-image.jpg will be downloaded and cached by the browser while the user is interacting with the original page. If they click, they’ll have the skeleton of the next page and an additional image already cached locally which will appear instantly. Sure, additional CSS, JS, and other assets might need to be downloaded but we’ve brought the most critical pieces of the journey into the browser before it’s needed. That’s a great start and as you can tell from the example it works really well for a small use case. Sequential journey sites, maybe a landing page or two but what you’re probably thinking is this…
“My site has thousands of images and pages, no way I can do this.
We can’t possibly link every image and page in the head of all of our pages right?”
Nope, and you don’t have to. Using Edgio’s Predictive Prefetching and Deep Fetching plugins, you can bypass the engineering and guesswork while your user’s browser works with our edge network to pull in critical resources.
Okay, so how do we do that?
Edgio’s Predictive Prefetching utilizes something called a service-worker. An SW is something that all modern browsers understand, it has actually been supported since Chrome 40. The SW is a background process tied to your site that works while primary requests are idle. You may have been exposed to service-workers if you’ve ever worked in front-end development or more modern progressive web applications. If you’re not using a service-worker on your site now, you can easily add one without any impact on your current user experience. Edgio can help you easily set one up with one of our pre-built service-workers.
Registering and installing a service-worker can vary depending on whether or not you are using a front-end framework. Be sure to check out our documentation to find more detailed instructions for multiple methods.
Now that you’ve added a service-worker and it’s registering with your site, it needs something to do. After you’ve added the Edgio Prefetch package, it’s time to add our routes to put the user’s browser to work. By default, the service-worker cache is stored for two minutes. To maximize performance we can adjust that in our routes file:
import {Router} from '@edgio/core';
export default new Router()
.get('/api/products/:id.json', ({cache, proxy}) => {
cache({
edge: {
maxAgeSeconds: 60 * 60,
staleWhileRevalidateSeconds: 60 * 60 * 24,
},
browser: {
serviceWorkerSeconds: 60 * 60,
},
});
});
With one simple rule, we’ve configured the Edge to maintain the freshness of our API’s response by validating it for twenty-four hours and instructed the browser to not only prefetch it but hang on to it for an hour.
If you’re familiar with Edgio you know you can test this locally. Open up your browser’s developer tools and watch the network tab while you peruse the site. You’ll see the service-worker grabbing the raw HTML for the links in your routes file as you browse. Notice the distinctive gear icon and “service-worker” noted as the initiator.
You can also view the service-worker cache separately by checking the application tab and looking through the cache.
The Edgio prefetch script works to pull links into your user’s viewport for them to click on. If they click, they’ll be instantly brought to the subsequent page.
A great start, but what if you have a content-heavy site with product or article images that need to be fetched as well? Then it’s time for Edgio’s one-of-a-kind Deep Fetch plugin.
Enabling the Deep Fetch plugin is easy. Simply import the plugin to your existing project and choose a few HTML selectors the plugin should look for. If you are running an e-commerce site, your product pages are likely templated. Your LCP might look something like this – where every page has a different image but you use the “main-image” CSS selector to maintain styling across your site.
<img src=”/images/product-image.jpg” class=”main-image” />
Try adding the “main-image” selector to the Deep Fetch array and let the service-worker go to work.
import {Prefetcher} from '@edgio/prefetch/sw';
import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';
new Prefetcher({
plugins: [
new DeepFetchPlugin([
{
selector: 'img.main-image',
maxMatches: 1,
attribute: 'src',
as: 'image',
},
]),
],
});
In short, this tells the Deep Fetch plugin to look for the main-mage selector and prefetch the src as an image. In the example, we’ve set maxMatches to 1. Meaning we’ll only prefetch the first match. No need to stop there though. Adjust maxMatches as you see fit depending on the type of asset you are prefetching.
Now your service-worker will prefetch links in the viewport, scan through the HTML for that selector and add a prefetch link for the image in question. When your user clicks the image the page will be presented instantly.
“What about our origin? We can’t support an increase in traffic for every user.”
Edgio has you covered. Our next-gen WebCDN won’t pass prefetch requests on to your origin if the asset isn’t cached. Edgio will simply respond with a 412. If the user clicks the uncached link, we’ll pass that along to the origin as we would for any other request and honor the proxy rules you have in place. Rest assured that your origin is safe with Edgio. Natural traffic across the site will warm the cache and 412 responses will decrease. To keep your site snappy, be sure and use stale-while-revalidate so we can deliver a stale item while we look for a new one.
Want to see this all in action without having to dig through Chrome’s developer tools? Edgio can help there too. We’ve seen how valuable Predictive Prefetching is to our customers so we have a purpose-built dashboard right inside the Edgio console. Easily monitor your prefetching performance for both your prefetch request and hit ratio.
Hopefully, you now see how Edgio’s Predictive Prefetching can give your users a truly incredible digital experience, increase conversions and decrease bounce rates by bringing the edge cache all the way to your user.
