Proactively load resources with HTML link rel="prefetch"
This article explains how resource prefetching works on the web and how you can use it to provide a better experience to your website visitors.
What are HTML link prefetch tags?
You can use prefetch resource hints to tell the browser to load files that may be be required later on, for example after a page interaction or when the visitor navigates to another page.
If the resources that are necessary to display the new page content, then this content will load more quickly, providing a better user experience. For example, when a visitor arrives on your homepage you could prefetch the resources required for your signup and pricing pages.
Here's an example of how to specify a prefetch hint in the HTML code:
<link rel="prefetch" href="/app.js" as="script" />
The href attribute specifies the URL of the resource that should be prefetched and the as attribute needs to specify the resource type, for example script, style, or font.
When are prefetched resources loaded?
Browsers should load prefetched resources when the main page content has loaded and the network is idle. That way prefetch requests don't compete with the main page content.
You can check when prefetched resources load on your website by running a website speed test.
Here's an example of a network request waterfall showing prefetching in practice:
Are there any downsides to resource prefetching?
Prefetched resources will use up data on the visitors device, so you should avoid prefetching an excessive amount of resources.
Also, check if prefetched resources are being loaded too early and competing with the actual content on your website.
Preload vs. prefetch link tags
Preloading is for resources that are required for the initial load of the website, while prefetching is used when a resource may be needed later on.
Preloaded resources would still be discovered by the browser later on in the page load process. Prefetched resources won't definitely be needed by the page, and without preloading would only load after specific page interactions or navigations to other pages.
Prefetching pages with speculation rules
Other than using link tags you can also use speculation rules to prefetch HTML content for future navigations.
While you can specify specific URLs to prefetch with speculation rules, you can also automatically prefetch content for all links on your website, or when a visitor hovers over a link.
Use website monitoring to measure the impact of prefetching
Use a website performance monitoring tool tool like DebugBear to see how prefetching impacts your website speed, including the real user impact on subsequent navigations.
Keep track of your Core Web Vitals metrics across synthetic tests, Google CrUX data, and real user monitoring metrics.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data