View contents
Image Preloading: How rel=preload and fetchpriority Speed Up Your LCP
Introduction
Preloading an image means telling the browser to download it at maximum priority, before the normal preload scanner discovers it in the HTML. The UXR SEO Analyzer checks whether a page's LCP (Largest Contentful Paint) image uses <link rel="preload"> or the fetchpriority="high" attribute, because this is one of the most effective, lowest-effort tweaks for improving LCP.
The Problem: Late Discovery of the LCP Image
The browser normally discovers images as it parses the HTML. If your LCP image is defined via CSS (background-image) or is injected dynamically via JavaScript, the browser can take longer to discover it, delaying when it starts downloading it and therefore delaying the LCP moment.
What rel=preload Does
<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">This tag in the <head> tells the browser: "you're going to need this resource soon, start downloading it right now," without waiting for the HTML parser to reach the corresponding <img> tag.
What fetchpriority="high" Does
Boosting the priority of the LCP image by specifying fetchpriority="high" on the image element can cause LCP to happen sooner. This attribute is particularly effective when used on a page's LCP image, and raising its priority with this attribute can improve LCP with relatively little effort.
<img src="/hero.jpg" fetchpriority="high" width="1200" height="600" alt="...">Preload or fetchpriority? When to Use Each
| Scenario | Solution |
|---|---|
| LCP image declared directly in the initial HTML | fetchpriority="high" on the <img> tag |
LCP image as a CSS background (background-image) | <link rel="preload"> for early discovery |
Responsive LCP image with srcset | rel="preload" with imagesrcset/imagesizes |
Preload is still required for early discovery of LCP images included as CSS backgrounds, and to boost those background images' priority it's worth including fetchpriority="high" on the preload as well.
The Most Common Mistake: Combining It With Lazy Loading
Never combine loading="lazy" with the image you're preloading or marking as fetchpriority="high"—they're opposite strategies. Lazy loading delays the load; preload/fetchpriority accelerates it. Applying both to the same image confuses the browser and lazy loading usually wins, nullifying the benefit.
Expected Impact
If the preload is already declared as one of the first elements in the <head>, an additional fetchpriority="high" may not improve LCP much further; but if the preload happens after other resources have already loaded, a high fetchpriority can noticeably improve LCP.
How the UXR SEO Analyzer Detects This
The analyzer identifies the candidate LCP image element in the initial viewport and checks whether a corresponding <link rel="preload" as="image"> exists in the <head>, or whether the <img> tag includes fetchpriority="high". If neither signal is present, it's reported as a low-effort LCP improvement opportunity—usually one of the fastest fixes to apply in the entire audit.
Fetch Priority as a Standalone API
Beyond images, the fetchpriority attribute also applies to scripts, stylesheets, and iframes, letting you adjust the relative priority of any resource without relying exclusively on preload. For images, though, combining both techniques (preload for early discovery + fetchpriority for network priority) usually gives the best result when the LCP element isn't trivial to discover from the initial HTML.
Relationship to the Preload Scanner
The browser has a preload scanner that speculatively parses the HTML while the main parser keeps processing the document, discovering resources like images and scripts before the DOM tree is complete. This scanner already does a lot of work on its own—but it can't discover resources that only exist inside JavaScript or CSS rules, which is exactly the case where manual preloading becomes essential.
Related Articles
- Image Preloading Guide - Step-by-step implementation
- LCP Image Lazy Loading Explained - The opposite mistake to avoid
- Image SEO Explained - Full image optimization guide
References
- web.dev - Preload critical assets to improve loading speed
- web.dev - Optimize resource loading with the Fetch Priority API
- web.dev - Optimize Largest Contentful Paint
- Chrome Developers - LCP request discovery