What is prefetch?

Prefetch is a technique that tells a web browser or a computer to load certain resources (like images, scripts, or data) ahead of time, before the user actually needs them. It’s like grabbing a book from the shelf before you’re ready to read it, so it’s instantly available when you turn the page.

Let's break it down

  • Resource: Anything the browser might need - a file, a piece of code, an image, etc.
  • Prefetch request: A special hint (usually added in HTML or via JavaScript) that says “load this now, even if it’s not needed yet.”
  • Cache: The place where the prefetched resource is stored temporarily, so the browser can retrieve it quickly later.
  • Trigger: The browser starts the prefetch when it sees the hint, often during idle time or when the network is free.

Why does it matter?

Prefetch speeds up the user experience. When a user clicks a link or navigates to a new page, the needed files are already in the cache, so the page appears faster. Faster pages mean happier visitors, lower bounce rates, and better performance scores in tools like Google PageSpeed.

Where is it used?

  • Websites: Adding <link rel="prefetch" href="next-page.html"> in the HTML head.
  • Single‑page applications (SPAs): JavaScript can prefetch data for the next view while the user is still on the current view.
  • Browsers: Modern browsers automatically prefetch DNS records, fonts, or resources they predict you’ll need.
  • Mobile apps: Some frameworks let you prefetch API responses or images before the user navigates to a new screen.

Good things about it

  • Reduces perceived load time, making sites feel snappier.
  • Utilizes idle network time efficiently.
  • Can improve SEO metrics that consider page speed.
  • Simple to implement with a single HTML tag or a few lines of JavaScript.

Not-so-good things

  • If overused, it can waste bandwidth, especially on slow or metered connections.
  • Prefetched resources may never be used, leading to unnecessary data transfer.
  • Can increase memory usage because cached items occupy space.
  • Incorrect predictions may delay loading of more important resources.