Prefetching
Contents
Definition
Prefetching is the loading of a resource before the user requests it. It allows web developers to indicate which resources are likely needed in the near future, loading resources upfront and helping to optimize page speed and the user experience.
Prefetching focuses on resources needed in the future, for example, on the next page. Although prefetching can speed up the user’s experience on a site if used correctly, it uses computing power and should therefore be used sparingly.
What is prefetching used for?
Prefetching is used to improve the load times of web pages and other online resources. It is used to tell the browser which resources it is likely to need in the future, allowing it to load them before they are required.
Although this can improve the page speed of the next page, it can slow the loading process for the current page if not used correctly because it consumes resources.
Some examples of when the prefetch resource hint can be used are:
- Prefetching the next page/resources in a funnel – Sales funnels are specific parts of a website covering a sales process on a sequence of different pages. Prefetch can help make this process faster as it allows the next page(s) to be loaded before the user clicks through.
- Prefetching the page(s)/resource(s) after the login page – When a user navigates to the login page, it’s very likely they are going to log in to their account. Prefetching the resources needed on the next page will ensure the page loads faster.
- Prefetching important documents – If there are important documents linked to on the current page, the prefetch resource hint can improve the load time when clicked.
Link prefetching
When link prefetching is used, an attempt is made to predict which links a user will click on. The browser will then automatically prefetch these pages, improving the load time of the next page.
Link prefetching can be very effective if there is high click-through rates. However, if a page doesn’t have a high click-through rate or if there are a lot of links on a page, link prefetching is generally less effective.
Syntax
<link rel="prefetch" href="/images/big.jpeg">
DNS prefetching
DNS prefetching works by performing a DNS lookup prior to the user clicking a link. This reduces latency by resolving the domain name prior to the resource being requested.
Just as with other forms of prefetching, DNS prefetching uses spare resources while the user is on the current page. This means that it can be ineffective or even detrimental if a web developer isn’t selective in what is prefetched.
Syntax
<html>
<head>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
<!-- and all other head elements -->
</head>
<body>
<!-- your page content -->
</body>
</html>
Cache prefetching
Cache prefetching works to prefetch resources or instructions and moves them to more local and easily accessible cache memory, for example, on a server. Cache memory is faster and easier to access than main memory, helping to reduce the load time of the information/resource.
What resources does prefetching take up?
Prefetching can help web developers optimize page performance, however, it does take up resources to do so. This means that prefetch requests that are wasted increase the load time for the current page.
The resources prefetching take up include:
- Processing power
- Network bandwidth
- Server bandwidth
- Cache space
Browser compatibility
Prefetch is compatible with most major browsers, including:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Internet Explorer
- Android Browser
- Opera
The difference between prefetching and preloading
Although both popular resource hints, there’s an important difference between prefetch and preload. Prefetch focuses on loading resources that are likely required for the next navigation.
Preload is used for resources on the current page, prioritizing these resources over others. Preload is often used for important late-discovered resources on the current page. This means the preloaded resources are prioritized by the browser over prefetched resources.
Importance in SEO and marketing
The prefetch attribute is an important part of page speed optimization. It allows web developers and/or SEOs to add more detailed loading logic, ensuring the browser loads resources as efficiently as possible. Page speed, in turn, has a significant impact on the user experience and is also an important search engine ranking factor.
Related links
- https://web.dev/predictive-prefetching/
- https://www.practicalecommerce.com/speed-up-your-slowest-pages-with-prefetching
Similar articles
| About the author |
 |