In this comprehensive guide, we will delve into the world of prefetching and how it played a pivotal role in increasing ad clicks for Terra, a fictional company. We will break down the concept of prefetching into simple, plain English, and provide step-by-step guides on optimizing it. Our aim is to make this technical topic accessible to everyone, enhance readability, and ensure that search engines can easily discover and rank this article. Let’s dive right in.
1. Understanding Prefetching
What is Prefetching?
Prefetching is like having a crystal ball for your web browser. It’s a smart technique that predicts what web pages or resources you might visit next and preloads them in the background. This makes your browsing experience faster because the pages are ready to go when you click on them.
Why is Prefetching Important?
Imagine waiting for a slow webpage to load every time you click on a link. Prefetching saves you from that frustration by fetching and storing web content you’re likely to visit. It’s like having your favorite snacks ready before you get hungry.
How Does Prefetching Work?
Behind the scenes, your browser uses algorithms and your browsing history to guess which pages you’ll visit. It then quietly loads them in the background, so when you do click, it’s almost instantaneous. Think of it as your browser being one step ahead of you.
Prefetching strategy
Prefetching has been around for a while, but it is important to use it carefully as it consumes extra bandwidth for resources that are not immediately necessary. This technique should be applied thoughtfully to avoid unnecessary data usage. In the case of Terra, articles are prefetched if the following conditions are met:
- Visibility of links to prefetched articles: Terra used the Intersection Observer API to detect viewability of the section containing the articles that they wanted to prefetch.
- Favorable conditions for increased data usage: As mentioned previously, prefetching is a speculative performance improvement that consumes extra data, and that may not be a desirable outcome in every situation. To reduce the likelihood of wasting bandwidth, Terra uses the Network Information API along with the Device Memory API to determine whether to fetch the next article. Terra only fetches the next article when:
- The connection speed is at least 3G and the device has at least 4GB of memory,
- or if the device is running iOS.
- CPU idle: Finally, Terra checks if the CPU is idle and able to perform extra work by using
requestIdleCallback, which takes a callback to be processed when the main thread is idle, or by a specific (optional) deadline—whichever comes first.
Adhering to these conditions ensures that Terra only fetches data when necessary, which saves bandwidth and battery life, and minimizes the impact of prefetches that end up going unused.
When these conditions are met, Terra prefetches the articles present in the sections: “Related Content” and “Recommended for you” highlighted in blue below.
Business Impact
In order to measure the impact of this technique, Terra first launched this feature in the “Related content” section of the article page. A UTM code helped them to differentiate between prefetched and non-prefetched articles for comparison purposes. After two weeks of successful A/B testing, Terra decided to add the prefetching functionality to the “Recommended for you” section.
As a result of prefetching articles, an overall increase of ads metrics and a reduction of LCP and Time to First Byte (TTFB) times were observed:
Prefetching—when used with care—greatly improves page load time, increases ads metrics, and reduces LCP time.
Technical details
Prefetching can be achieved through the use of resource hints such as rel=prefetch or rel=preload, via libraries such as quicklink or Guess.js, or using the newer Speculation Rules API. Terra has chosen to implement this by using the fetch API with a low priority in combination with an Intersection Observer instance. Terra made this choice as it allows them to support Safari, which doesn’t yet support other prefetching methods like rel=prefetch or the Speculation Rules API, and a full-featured JavaScript library wasn’t necessary for Terra’s needs.
The below JavaScript is approximately equivalent to the code used by Terra:
function prefetch(nodeLists) {
// Exclude slow ECTs < 3g
if (navigator.connection &&
(navigator.connection.effectiveType === 'slow-2g'
|| navigator.connection.effectiveType === '2g')
) {
return;
}
// Exclude low end device which is device with memory <= 2GB
if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
return;
}
const fetchLinkList = {};
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
if (!fetchLinkList[entry.target.href]) {
fetchLinkList[entry.target.href] = true;
fetch(entry.target, {
priority: 'low'
});
}
observer.unobserve(entry = entry.target);
}
});
});
}
const idleCallback = window.requestIdleCallback || function (cb) {
let start = Date.now();
return setTimeout(function () {
cb({
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50 - (Date.now() - start));
}
});
}, 1);
}
idleCallback(function () {
prefetch(nodeLists)
})
- The
prefetchfunction first checks for a minimum connection quality and device memory before initiating prefetching. - Then it uses an
IntersectionObserverto monitor when elements become visible in the viewport, and subsequently adds URLs to a list for prefetching. - The prefetching process is scheduled, aiming to execute the
prefetchfunction when the main thread is idle.
Terra’s Challenge: Boosting Ad Clicks
Terra’s Story
Terra, our imaginary company, had a common problem. They were running online ads, but people weren’t clicking on them as much as they’d hoped. It’s like having a flashy billboard but no one stopping to look.
The Role of Prefetching
Here’s where prefetching comes into play. Terra decided to implement prefetching on their website. This meant that when someone visited their site, the browser started predicting which pages the user might click on next, especially those related to ads. It was like having a sneak peek into users’ thoughts.
Step-by-Step Guide to Optimizing Prefetching
Step 1: Identifying Key Content
Start by figuring out what content on your website is crucial. For Terra, it was their ads. Identify what you want to prefetch – whether it’s product pages, blog posts, or something else.
Step 2: Implementing Prefetching
This is where the magic happens. You need to add a bit of code to your website. Don’t worry; you don’t need to be a coding expert. You can find easy-to-follow guides or hire a developer to do this for you.
Step 3: Testing and Monitoring
Once the prefetching is in place, it’s essential to keep an eye on how it’s performing. Terra used tools to track how many ads were being loaded in the background and how often they were being clicked.
Step 4: Continuous Optimization
Prefetching isn’t a one-time fix. You need to keep fine-tuning it. If you notice certain pages aren’t being clicked as expected, adjust your prefetching strategy accordingly.
The Importance of Prefetching
Faster Page Loading
Prefetching ensures that pages load almost instantly when clicked. Users love fast websites, and they are more likely to engage with your content if they don’t have to wait.
Improved User Experience
Imagine visiting a website where everything feels lightning-fast. That’s the kind of experience prefetching delivers. Users stay longer, explore more, and are more likely to click on ads or make purchases.
Enhanced SEO and Search Engine Visibility
Search engines also appreciate fast-loading websites. When your site loads quickly, search engines are more likely to rank it higher in search results. This means more people discover your content.
Conclusion
In this guide, we demystified prefetching and showed how it transformed Terra’s ad click rates. Prefetching isn’t just for tech wizards; it’s a tool that anyone can use to improve their website’s speed, user experience, and SEO. By implementing prefetching and following our step-by-step guide, you can make your website faster and more appealing to both users and search engines. So, what are you waiting for? Start prefetching and watch your online presence soar.
