What Is Prefetch?
Prefetch (rel="prefetch") is a value of the HTML rel attribute that instructs the browser to fetch a resource that may be needed by the user. For example, a developer can use it to load a script, image, or document that is likely to be needed on the next page the user visits.
This ensures the resource is already available on the browser when the user arrives at the next page. That way, the page loads quickly, which improves the user experience en page speed for users.
Prefetch is a resource hint. That is, it is one of the many HTML rel attribute values used to instruct the browser to fetch resources that will or may be needed by the user.
Prefetch typically begins loading its content after the current page has finished loading. This ensures it does not affect the page speed of the current page. It is only used with an HTML <link> tag and is typically placed in the <head> tag of the current page.
In this article, we’ll cover:
Example of Prefetch
Imagine a user wants to purchase a dress. So, they visit an e-commerce site and navigate to the product page for a blue dress. At the bottom of the page is a link to a related product, which is a red dress.
Now, the webpage for the blue dress, which they are currently visiting, will include the following code, instructing the browser to fetch the image for the red dress on the next page.
That way, the image is already loaded in the browser and will instantly display when the user clicks the link to view the red dress.
<link rel="prefetch" href="/red-dress.png" as="image">
In the code above:
koppelingspecifies that the code is an HTML link tagrel="prefetch"tells the browser to fetch the resource in the backgroundhref="/red-dress.png"specifies the location of the imageas="image"specifies that the prefetched resource is an image
Difference Between Prefetch and Preload
Prefetch is closely related to preload (rel="preload"), which is another resource hint used on webpages. The primary difference between them lies in their usage.
- Prefetch is used to fetch non-critical resources that may be needed on the next page
- Preload is used to fetch critical resources that zullen be needed on the current page
Preload is used to fetch resources such as fonts, scripts, and stylesheets. The developer knows that the user will soon need these resources on the current webpage, so they preload them to ensure they instantly load when needed.
In contrast, prefetch is used to fetch resources like images, scripts, documents, stylesheets, and videos. The user will need such resources if they navigate to a different page. However, they will not need them if they do not visit the next page.
Still, the developer instructs the browser to fetch them so that they are already available when needed. If the user does not visit the anticipated page, the content will remain in the browser cache and will not be displayed.
Disadvantages of Prefetch
Prefetching helps to improve user experience and page load times when used correctly. However, it can have the opposite effect when misused, and will slow down performance and hurt the user experience.
1 It Can Waste Bandwidth
Prefetched resources may or may not be used. While the prefetched resource becomes helpful if the user visits the page, it becomes wasteful when it is not used. This leads to bandwidth wastage.
2 It Consumes Memory
Prefetched resources are stored in memory or cache. This takes up valuable memory space, which can lead to performance issues on devices with limited memory. It may also cause other useful resources to be removed from memory or cache to make room for the prefetched resource.
3 It Can Cause Caching Issues
A prefetched resource can become outdated before the user accesses it. This is quite common with dynamic, personalized, and time-sensitive content. Developers can mitigate this by using appropriate cache headers and expiration controls.
4 It Consumes Server Resources
Prefetching causes the browser to send extra requests to the server. This adds to the server’s workload, which can reduce its responsiveness and increase hosting costs. Such requests may also affect analytic reports, including the paginaweergave statistieken.
5 It Can Prevent Critical Resources from Loading
Prefetching can compete with other critical resources loading on the webpage. This can occur when the browser prefetches excessive or large resources. This can affect the page load and user experience of the current page.
6 It Is Not Supported Across All Browsers
Not all browsers support prefetch. Some browsers may ignore it, while others can treat it differently. This can make prefetch unreliable in certain environments.
Prefetch Best Practices
Many sites use prefetching to improve performance. You should consider it, too, but be sure to keep these best practices in mind to ensure they yield the desired results.
1 Prefetch Pages That Visitors Are Likely to Visit
Prefetching should be targeted at pages users are highly likely to visit next, such as a popular product page or the “Page 2” of a paginated page series. This improves the chances that the prefetched content will be used and reduces the chances of wasting resources.
2 Avoid Prefetching Large or Unnecessary Files
Large resources consume huge amounts of bandwidth and memory, which can become problematic on slower connections and devices. It is recommended to avoid prefetching large resources and instead focus on lightweight ones.
3 Use the as Attribute Correctly
De as attribute specifies the type of resource being prefetched. For example, as="style" indicates the resource is a stylesheet while as="script" indicates it is a script.
Ensure to always include the as attribute along with its correct value. The browser uses it to prioritize the content and apply relevant security and caching rules
4 Limit the Number of Prefetches
Keep prefetches to two to four per page. Too many prefetches can overwhelm the browser and slow down the loading of other essential resources.
Browsers also typically have limits on the number of simultaneous connections they will support and the amount of bandwidth they will allocate to such connections. So, excessive amounts of prefetches can also prevent other prefetches from loading.
5 Combine Prefetch with User Behavior Signals
Prefetched resources may or may not be used. To increase the likelihood of their use, it is good practice to tie prefetching to real-time user behaviors such as hovering or scrolling.
For example, users who scroll down a page are likely to visit the next page. In this case, you can write code to trigger prefetching for the next page’s resources when the user scrolls.
6 Only Use Prefetch for Low-Priority Resources
Prefetched resources should not compete with the critical resources needed to render the current page. Therefore, ensure that you only use prefetch for low-priority resources required for the next page. If the resource is critical, do not prefetch it.
7 Avoid Using Prefetch on Slow Networks
Prefetching can degrade web performance on slow networks and waste data on metered connections. To avoid such, it is good practice to use network conditions (using JavaScript or the network information API) to disable or defer prefetching when appropriate.
8 Monitor the Usefulness of the Prefetched Resource
Use Chrome DevTools or similar tools to track what is being prefetched, how they affect load time, and whether they are being used or discarded. This allows you to optimize your code so that the prefetched resources are useful to users without wasting their data or hurting their user experience.