<zhead>

Link

prefetch

Learn how to use the prefetch rel link tag to improve your site.

The prefetch link relation type is used to inform the browser about resources that are likely to be needed for the next navigation page, allowing the browser to fetch them in the background at a low priority. This can significantly improve loading times for subsequent pages.

Code Examples

<link rel="prefetch" href="/next-page.css">
Prefetches CSS for the next navigated page.
<link rel="prefetch" href="/current-page.css">
Incorrectly prefetches a resource that is already needed for the current page, leading to redundant network use.

Recommendations

  • 01
    Selective Usage
    Use prefetch sparingly and only for resources you are highly confident will be used next. Overuse can lead to unnecessary network traffic and reduce the performance benefits.
  • 02
    Consider Resource Types
    Prefetch is best used for resources like CSS, JavaScript, and font files that are significant to load times but not immediately needed for the current page.

Related Documentation