lcp.missing lcp image preload
Rule ID:
lcp.missing-lcp-image-preloadSeverity:INFOCategory:lcpTarget Standards: Google Chrome Core Web Vitals (Largest Contentful Paint Resource Load Delay), W3C Preload Specification (), Document Layout Graph & Early Resource Discovery Optimization
Delayed-discovery LCP image lacks in document head to initiate early asset transfer
"LCP candidate media elements that suffer delayed discovery (dynamic data attributes, client script hydration, or CSS backgrounds) should be preloaded in '' with 'fetchpriority="high"'."
When an LCP image cannot be immediately parsed from a direct '' element in the server-rendered HTML stream (for example, when its URL is stored in a dynamic data attribute 'data-bg-src', rendered by a client island, or defined via CSS background), its network fetch is delayed.
Injecting '' inside '
' compensates for this discovery delay by instructing the browser lookahead scanner to initiate connection and download immediately during initial document streaming.| Risk Vector | Severity | Impact |
|---|---|---|
| Delayed Resource Discovery | MEDIUM | Image download is postponed until JavaScript hydration or style resolution finishes, inflating LCP. |
| Initial Viewport Flash | LOW | Late arrival of visual hero media causes prolonged empty or placeholder hero appearance. |
<head>
<title>Product Gallery</title>
</head>
<body>
<div id="hero-root" data-perf-role="hero" data-bg-src="https://cdn.example.com/promo.webp"></div>
</body><head>
<title>Product Gallery</title>
<link rel="preload" as="image" href="https://cdn.example.com/promo.webp" fetchpriority="high" />
</head>
<body>
<div id="hero-root" data-perf-role="hero" data-bg-src="https://cdn.example.com/promo.webp"></div>
</body>If this pattern is required for an intentional exception, suppress the diagnostic using the canonical Charites Rule ID:
<!-- charites:ignore lcp.missing-lcp-image-preload intentional exception -->// charites:ignore lcp.missing-lcp-image-preload intentional exceptionrules:
lcp.missing-lcp-image-preload:
severity: info # error | warn | info | off- Domain Architecture & Analysis Pipeline: See the lcp Category Guide.
- 1-SSOT Golden Tri-Corpus Test Matrix: See the Verification Harness on the Master Home page.
- Rule Catalog Index: See Master Wiki Home.
