Does CDN Provide a Prefetch Feature?

Yes, CDNs can provide a prefetch feature, but not all do it in the same way, and it's important to know what you’re specifically looking for when you're thinking about "prefetch."

‍

What is Prefetch?

‍

Prefetch is a mechanism that helps improve the load times for your users by proactively loading resources that might be needed in the near future. Typically, you'd want to use this for things like stylesheets, images, or even chunks of JavaScript that aren’t needed right away but will be required soon after.

‍

If you’ve ever built a website or managed infrastructure, you know that speed is crucial. Prefetch is an optimization technique that gets ahead of that, fetching resources before they're actually needed. The way CDNs handle prefetch can vary, but at its core, the idea is the same: to serve content more efficiently by caching or pre-loading specific resources.

‍

How Does CDN Prefetch Work?

‍

When we talk about a CDN providing a prefetch feature, it usually means that the CDN is able to fetch resources before a user actually requests them, storing them in the cache. This can be particularly useful if you have a dynamic site or expect certain content to be accessed in sequence.

‍

In practice, this is how it works: When a user visits your website, the CDN can prefetch resources like images, videos, or scripts that they haven't yet requested but will likely need soon. By the time they get around to needing those resources, the CDN has already fetched them, leading to faster load times.

‍

From my own experience, this approach is often most effective when paired with other techniques like dns prefetch and link prefetch. I’ll get into those shortly.

‍

The success ratio of prefetching varies by platform. For instance, around 22% of eligible pageviews on desktop and 15% on mobile saw their content served directly from the browser's prefetch cache, leading to noticeable improvements in load times​.

‍

‍

{{cool-component}}

‍

‍

Prefetch Cache in CDNs

‍

CDNs are all about caching, right? So, it makes sense that the prefetch feature ties into caching strategies. Prefetch essentially extends caching by anticipating what the user might need next. This can work in two ways:

‍

1. Active Prefetching: Some CDNs will actively crawl your content and pre-load assets based on user behavior patterns. If most users access certain resources right after landing on a particular page, the CDN can begin prefetching those resources for the next user.
2. Manual Prefetching: You, as the developer or site manager, can define specific resources for the CDN to prefetch. This can be done using HTTP headers or by placing prefetch instructions in your HTML code. It’s more manual, but it gives you greater control over what’s prefetched.

‍

In either case, these prefetched resources are stored in the CDN’s cache, meaning that when a user actually requests them, they are served from the cache rather than needing to be fetched from the origin server.

‍

CDN Features You Might Use for Prefetching

‍

Not all CDNs offer a prefetch feature by default, but there are a few options that you can consider if you’re looking to set this up:

‍

• Cloudflare offers a feature called "Argo Smart Routing," which includes a kind of prefetch behavior that can proactively cache assets.
• Fastly has an "edge dictionary" that allows you to prefetch content based on rules that you define.
• Akamai provides prefetch options as part of its advanced caching features, especially for high-traffic websites.

‍

If you're using one of these CDNs, you may already have access to these features, or you might need to configure them manually, depending on how advanced your use case is.

‍

Here’s a holistic look on these features if you want to save some time:

‍

‍

DNS Prefetch

‍

I also want to touch on DNS prefetch, because this is related to the broader concept of prefetching, and you’ll see this term pop up when researching CDN prefetch features. DNS prefetching is different from traditional prefetching. Instead of prefetching specific resources like images or scripts, DNS prefetch speeds up the process of resolving domain names.

‍

Let’s say your website links to several external resources, like fonts from Google Fonts or scripts from a third-party service. Normally, when a browser encounters a new domain, it needs to pause and resolve that domain before it can load the resources from it. DNS prefetch can help here by resolving those domains in the background while your page is still loading, which reduces the overall time it takes to fetch those external resources when they’re actually needed.

‍

CDNs can help with DNS prefetching by improving the way DNS queries are handled, especially for globally distributed users. By caching DNS responses closer to the user, the time it takes to resolve a domain is cut down, which is a noticeable improvement in page load times.

‍

{{cool-component}}

‍

When to Use Prefetch

‍

From my experience, you don't need prefetching in every scenario. It's most useful when you have a predictable flow of content, where users are likely to navigate in a certain direction. For example, if you have an online store and customers are likely to visit a product page and then go to the checkout page, you can use prefetching to speed up the loading of the checkout resources.

‍

If you’re managing a dynamic site with changing content, prefetch can still be useful, but it might require more frequent updating of your prefetch instructions to keep everything in sync. I find that if you have a content-heavy website (think video or image galleries), the benefits of prefetching really shine through. By reducing the time it takes to load each asset, you create a more seamless experience for users.

‍

Prefetch vs. Preload vs. Prerender

‍

One thing that can be confusing, especially when you’re first getting into CDNs and performance optimization, is the difference between prefetch, preload, and prerender.

‍

• Prefetch is all about fetching resources that might be needed soon.
• Preload is more aggressive; it tells the browser that certain resources are critical and must be fetched right away.
• Prerender takes it a step further by actually loading an entire page in the background, so it’s ready to go when the user navigates to it.

‍

CDNs generally focus on prefetching and caching, but depending on your CDN, you might be able to take advantage of preload features as well, further optimizing how quickly your content is delivered.

‍