What preload is
Preload is a resource hint, <link rel="preload" as="...">, that tells the browser to fetch a specific file early and at high priority, before the parser would normally discover it. It is the sharpest tool in the resource hints family, and the easiest one to shoot yourself in the foot with.
Why it matters: the browser discovers most resources by parsing HTML top to bottom. Anything referenced deep in a stylesheet or injected by JavaScript gets found late. Preload jumps that queue for the files that decide your LCP, your hero image and your critical fonts, so they start downloading the moment the HTML arrives.
Real preload tags you can copy
The two files worth preloading on almost any page are the LCP image and the font used in your above-the-fold headline. Everything else is usually a mistake.
<head>
<!-- LCP hero image: fetch it before the parser reaches the <img> -->
<link rel="preload" as="image"
href="/img/hero.webp"
fetchpriority="high">
<!-- Above-the-fold web font: crossorigin is REQUIRED for fonts -->
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-var.woff2"
crossorigin>
<!-- Responsive hero: preload only the variant this viewport will use -->
<link rel="preload" as="image"
href="/img/hero-800.webp"
imagesrcset="/img/hero-800.webp 800w, /img/hero-1600.webp 1600w"
imagesizes="100vw">
</head>Three things people get wrong here. Fonts need crossorigin even when self-hosted, or the browser double-fetches them. The as attribute is mandatory, without it the browser cannot set the right priority or Accept headers. And a preloaded resource that is not used within a few seconds throws a console warning, that warning is your signal you preloaded the wrong thing.
What is safe to preload, and what is not
| Resource | Preload it? | Why |
|---|---|---|
| LCP hero image | Yes | It defines your Largest Contentful Paint, earlier fetch = faster LCP |
| Above-the-fold web font | Yes | Stops the headline from waiting on late font discovery |
| Critical CSS referenced late | Sometimes | Only if it is genuinely on the critical path and discovered slowly |
| Below-the-fold images | No | They compete with the hero for bandwidth, lazy-load them instead |
| Every font weight | No | Preload only the one or two the fold actually renders |
| Third-party analytics | No | Non-critical, preloading steals priority from real content |
| Whole JS bundles | Rarely | Usually better handled by module preload or code-splitting |
How to check it on your own site
- Run the "Preload Largest Contentful Paint image" audit in Lighthouse. If it flags your hero, you are discovering it too late, add a preload. See how to preload key requests.
- Open DevTools Console and reload. Any "resource was preloaded but not used within a few seconds" warning means that preload is wasted, remove it or fix the
as/crossoriginattribute. - In the Network tab, add the Priority column. Your hero image and critical font should show "High". If they are "Low" or start late, preload them.
- Check the waterfall. A correct preload starts the file almost at the very left of the chart, alongside the HTML, not after scripts.
- For fonts, confirm each preloaded font is requested exactly once. Two requests for the same font means the
crossoriginattribute is missing.
Common mistakes and how to fix them
- Preloading too much. Every preload is a "jump the queue" instruction. Preload ten things and none of them jumps, you have just reshuffled the same congestion. Limit it to the one or two files that gate LCP.
- Missing
crossoriginon fonts. This causes a double download, the preload fetch and the real fetch never match. Always addcrossoriginto font preloads. - Preloading a responsive image without
imagesrcset. You end up forcing one fixed size on every device. Useimagesrcsetandimagesizesso the preload matches what the<img>will actually pick. - Preloading a file the page no longer uses. Stale preloads linger after redesigns. Watch the console warning and delete anything unused.
- Using preload where preconnect would do. If you just need an early connection to a third-party origin,
preconnectis lighter. Preload is for a specific file you know you need.
FAQ
Does preload speed up my LCP?
It can, a lot, when your LCP element is discovered late, for example a hero image referenced inside CSS or injected by script. Preloading pulls its download to the front. If the hero is already a plain <img> high in the HTML, fetchpriority="high" on that tag may be enough.
What is the difference between preload and prefetch?
Preload is for the current page and runs at high priority, fetch this now, I need it. Prefetch is for a likely next page and runs at the lowest priority, grab this if you have spare bandwidth. Do not mix them up, prefetching your LCP image will make it slower.
How many things should I preload?
As few as possible. One LCP image and one font is a healthy default. Preloading is zero-sum for bandwidth, the more you preload, the less each hint helps.
Why do I need crossorigin on a self-hosted font?
Fonts are always fetched in CORS mode, even same-origin. If the preload does not declare crossorigin, it uses a different mode than the real request, the two do not match, and the browser downloads the font twice.
Can I preload a resource for a page I am about to navigate to?
That is what prefetch is for, not preload. Preload targets resources for the current navigation. For fonts, images, and CSS on the very page the user is loading right now, use preload.
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!
