Prefetch (rel=prefetch)

Prefetch, written as <link rel="prefetch" href="...">, asks the browser to download a resource at the lowest priority while the network is idle and keep it in cache for a probable future page, not the current one.

Why it matters

If you can predict the next step, such as a checkout page after the cart, prefetching makes that navigation feel instant because the files are already local. Because it runs at idle priority, it should not slow the current page, though it does use the visitor's data, which matters on metered mobile plans.

Example

<link rel="prefetch" href="/checkout.js" as="script">
<link rel="prefetch" href="/next-article.html">

Prefetched responses go into the HTTP cache, so cache headers still apply. A response with Cache-Control: no-store gives no benefit. Frameworks such as Next.js prefetch linked routes automatically when links enter the viewport.

Common mistakes

• Using it for files the current page needs. That is what preload is for.
• Prefetching large files on every page regardless of the odds of use.
• Ignoring data-saver settings; browsers may skip prefetch then.
• Assuming it is guaranteed. It is a hint the browser can drop.

Related

• Preload
• Preconnect
• HTTP caching
• Cache-Control

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.