Preload Key Requests: How to Fix It
<link rel="preload"> hint in the document head. Preload the LCP image with fetchpriority="high", preload critical fonts with crossorigin, and stop there. Preloading too many things cancels the benefit, so keep the list to a handful of genuinely critical files.What this means
Some resources are essential to rendering the top of your page, but the browser cannot see them until it has already downloaded and parsed something else first. A hero image referenced deep in your CSS, or a web font requested by a stylesheet that is itself requested by the HTML, both arrive late because the browser only learns they exist partway through the load. Lighthouse calls these "late-discovered" resources, and it looks at the third level of the critical request chain to find them.
A rel="preload" hint solves this by declaring the resource right in the <head>. The browser starts fetching it immediately, instead of waiting to discover it later.
Why it matters
The resources Lighthouse points at usually decide your Largest Contentful Paint. Both images and text rendered with web fonts can be the LCP element, so a hero image or font that arrives a second late pushes your LCP a second later. Fetching those files earlier moves the visible paint earlier, which Google measures as a Core Web Vital.
Preload does not make a file download faster. It changes the order, moving a critical request to the front of the queue so it stops waiting behind less important work. For a deeper walkthrough of the metric this protects, see our LCP complete guide.
How it gets flagged
Lighthouse builds the critical request chain for your page and identifies resources on the third level of that chain, meaning they depend on two other requests before the browser can ask for them. If preloading one would save meaningful time, the resource appears in the "Preload key requests" audit with the estimated savings. PageSpeed Insights and Sitebulb surface the same audit.
How to fix it
Add a preload hint in the <head> for each critical resource the audit names. The as attribute is required: it tells the browser the resource type so it can assign the right priority. Omitting it, or using an invalid value, makes the browser treat the request like a generic fetch and can cause the file to download twice.
<!-- LCP / hero image: preload and mark it high priority -->
<link rel="preload" as="image"
href="/images/hero.webp" type="image/webp"
fetchpriority="high">
<!-- Critical web font: crossorigin is mandatory -->
<link rel="preload" as="font"
href="/fonts/inter.woff2" type="font/woff2"
crossorigin>Two details matter. First, fonts load in anonymous CORS mode, so a font preload without crossorigin is fetched twice, which is slower than not preloading at all. Second, for the LCP image, add fetchpriority="high" to both the preload and the actual <img> tag so the browser keeps the priority it was promised. If your LCP element is an image, this pairs well with the responsive-image work in our image SEO complete guide.
Preload pairs naturally with cutting blocking CSS and JavaScript. If render-blocking files are delaying discovery in the first place, work through our guide on eliminating render-blocking resources alongside this fix.
False positives and over-preloading
The most common mistake is treating the audit as a checklist and preloading everything it touches. Preload works because it elevates a few requests above the rest. Preload a dozen files and none is prioritized any more, while on slower connections the extra traffic fights for bandwidth and slows the page down. Use preload sparingly, only for resources needed for the initial render.
The audit can also mislead for a resource the browser already discovers early. If the named file is below the fold, swapped per device, or loaded for only some visitors, preloading it wastes bandwidth on files some users never see. Confirm the flagged resource is on the critical render path before adding a hint.
FAQ
How many resources should I preload?
Aim for the handful that block your first paint, typically the LCP image and one or two critical fonts. If your list grows past a few, you are likely diluting the benefit.
What is the difference between preload and preconnect?
Preconnect opens a connection to another origin ahead of time. Preload actually fetches a specific file. Use preconnect for third-party hosts and preload for files you know you need.
Do I still need crossorigin if the font is on my own domain?
Yes. Fonts are always fetched in CORS mode regardless of origin, so the crossorigin attribute is required to avoid a duplicate download.
Will fixing this guarantee a better LCP?
It helps when a late-discovered resource is your LCP element. If your LCP is delayed by render-blocking scripts or a slow server instead, preload alone will not move it, so diagnose the real bottleneck first.
Want an expert to find your real performance wins?
Our advanced SEO audit pinpoints the resources actually holding back your Core Web Vitals and tells you exactly what to fix first.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
