Browser Preload Resource Not Used Warning — What It Means & How to Fix It
About Browser Preload Resource Not Used Warning
Fix browser console warning about preloaded resources that were declared but not used within the expected time window. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: The warning 'The resource was preloaded using link preload but not used within a few seconds' indicates wasted bandwidth. Link rel=preload tells the browser to fetch a resource early, but if the resource is not used, it was a wasted download. Chrome shows this warning after 3 seconds if the preloaded resource has not been referenced by the page. Incorrect preload hints can actually hurt performance by consuming bandwidth for unused resources. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: Preload hint for a resource that is only needed on certain pages but declared globally. Resource URL in the preload does not exactly match the URL used in the actual resource tag. Conditional loading (lazy load, code splitting) fetching the resource later than the preload expected. Preloading fonts without specifying crossorigin attribute, causing a duplicate download. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Match the preload URL exactly with the resource URL including query strings and crossorigin attribute. Only preload resources that are critical for the current page, not all pages. For fonts, add crossorigin to both preload and usage: <link rel="preload" href="font.woff2" as="font" crossorigin>. Use the 'as' attribute correctly: as="style" for CSS, as="script" for JS, as="font" for fonts. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
When should I use preload?
Use preload for resources that are critical for above-the-fold content but discovered late by the browser: fonts referenced in CSS, hero images, and critical scripts loaded via async/defer. Do not preload everything.
Overview
Fix browser console warning about preloaded resources that were declared but not used within the expected time window.
Key Details
- The warning 'The resource was preloaded using link preload but not used within a few seconds' indicates wasted bandwidth
- Link rel=preload tells the browser to fetch a resource early, but if the resource is not used, it was a wasted download
- Chrome shows this warning after 3 seconds if the preloaded resource has not been referenced by the page
- Incorrect preload hints can actually hurt performance by consuming bandwidth for unused resources
Common Causes
- Preload hint for a resource that is only needed on certain pages but declared globally
- Resource URL in the preload does not exactly match the URL used in the actual resource tag
- Conditional loading (lazy load, code splitting) fetching the resource later than the preload expected
- Preloading fonts without specifying crossorigin attribute, causing a duplicate download
Steps
- 1Match the preload URL exactly with the resource URL including query strings and crossorigin attribute
- 2Only preload resources that are critical for the current page, not all pages
- 3For fonts, add crossorigin to both preload and usage: <link rel="preload" href="font.woff2" as="font" crossorigin>
- 4Use the 'as' attribute correctly: as="style" for CSS, as="script" for JS, as="font" for fonts