> ## Documentation Index
> Fetch the complete documentation index at: https://autorender.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Hero and LCP
> Preload your largest image so Autorender Native never delays Largest Contentful Paint — the one pattern to hand-build instead of marking with data-ar-src.
Your largest image — the hero — should load the instant the page parses, before any script runs. Autorender Native measures and requests images from JavaScript, so it always starts a fraction later than the browser's own preload scanner. For the single Largest Contentful Paint element, hand-build the delivery URL instead of marking it, so the browser fetches it during HTML parsing.
## Why can't Native preload the hero?
The browser's preload scanner reads the raw HTML and starts fetching images before scripts execute. It looks at `src` and `srcset`, not `data-ar-src`. An element marked with `data-ar-src` has no source at parse time, so the scanner skips it and the fetch waits for the runtime.
`data-ar-eager` skips lazy loading, but it does not fix this — the source still appears only after the script runs. With [`debug=1`](/docs/native/configuration) an eager image with no parse-time source logs:
```
Eager image has no parse-time src and may delay LCP.
```
So for the LCP image, and only that image, skip Native and set a real source the scanner can see.
## Build and preload the hero
The runtime ignores any `` without `data-ar-src`, so a hand-built hero coexists with marked images on the same page — no double fetch.
Multiply the hero's rendered CSS width by the device pixel ratio you want to serve, then cap the result at the image's real source width. You are building this URL by hand, so the runtime's [`max-dpr`](/docs/native/configuration) does not apply. A hero rendered at **1600 px** and served at **2×** asks for **3200 px**; if the source is only **2400 px** wide, cap it there and request `w_2400`.
Use the standard [URL anatomy](/docs/introduction) — delivery domain, workspace ID, transforms, source path:
```
https://assets.autorender.io/LOKVTtKVGb/w_2400/heroes/banner.jpg
```
```html wrap theme={null}
```
```html wrap theme={null}
```
Because there is no `data-ar-src`, the runtime leaves this element alone. The browser reuses the preloaded fetch only when the `` and the `` match exactly — identical `href`, and `crossorigin` set on neither or on both. Any mismatch downloads your largest image twice, the exact failure this page exists to prevent.
Do not put both `data-ar-src` and a real `src` on the hero. The browser fetches the real `src` in full during parsing, then the runtime overwrites it with its own variant — two downloads of your largest image. Either hand-build the hero (this page) or mark it and accept the later, script-driven fetch.
## Mark the rest of the page normally
Every image below the fold stays on the `data-ar-src` path. Only the LCP element needs the hand-built treatment.
```html {2} theme={null}
```
## What if JavaScript is disabled?
A marked `` has no source until the runtime runs, so it shows nothing when JavaScript is off. Give any image you cannot afford to lose a `
```
Because there is no `data-ar-src`, the runtime leaves this element alone. The browser reuses the preloaded fetch only when the `` and the `
```
## What if JavaScript is disabled?
A marked `` has no source until the runtime runs, so it shows nothing when JavaScript is off. Give any image you cannot afford to lose a `