LCP Element Discovery

Fast Largest Contentful Paint (LCP) depends in part on how quickly the browser can discover the resource that will become the LCP element. Frontend engineers can improve discovery by keeping critical content directly discoverable in HTML, avoiding unnecessary request chains, and assigning appropriate priority to the LCP resource.

LCP measures when the largest relevant above-the-fold content element becomes rendered. When that element is backed by a network resource, such as an image, performance depends not only on download speed but also on when the browser learns that the resource is needed.

An image written directly as `<img src="hero.jpg">` in the initial HTML can generally be discovered by the HTML parser early. By contrast, an image applied through CSS, injected by JavaScript, or revealed only after other code runs may create a discovery delay. The browser may need to fetch additional resources before it can even identify the eventual LCP resource.

Resource priority also matters. `fetchpriority="high"` can signal that an important image deserves higher fetch priority, while `loading="lazy"` is generally inappropriate for an image expected to be the LCP candidate. A preload can move discovery earlier when the resource would otherwise be discovered late, but unnecessary preloads compete with other critical resources.

Responsive images require care because the browser must select an appropriate candidate from `srcset` and `sizes`. For a late-discovered responsive image, an image preload can use `imagesrcset` and `imagesizes` so the browser can make a matching selection before the HTML `<img>` is encountered. The goal is not simply to download more aggressively; it is to make the correct critical resource discoverable as early as practical.

Key points

• Put critical LCP images in initial HTML when possible.
• Avoid JavaScript or CSS dependency chains that delay LCP resource discovery.
• Do not lazy-load an image that is expected to become the LCP element.
• Use `fetchpriority="high"` when appropriate for a critical LCP image.
• Use preload selectively when normal discovery happens too late.
• For responsive preloads, match `imagesrcset` and `imagesizes` to the corresponding image.

Interview questions

Why can an LCP image be slow even when its file size is small?

The browser may discover the image late, so the network request starts later than expected. This can happen when JavaScript creates the image, CSS determines it only after stylesheet processing, or another dependency must load first. A small transfer therefore does not guarantee a small LCP if the request has a large discovery delay.

What is the advantage of putting the LCP image directly in HTML instead of creating it with JavaScript?

The HTML parser can encounter the image without waiting for application JavaScript to execute. That lets the browser discover and schedule the resource earlier. JavaScript-generated content can introduce a parser-to-script-to-DOM dependency before the network request begins.

When would you use `fetchpriority="high"` for an image?

It can be useful when an image is important to the initial viewport and is a likely LCP candidate, especially when the browser's normal prioritization does not give it enough urgency. It is a priority hint rather than a guarantee that the resource will be fetched immediately. Applying high priority to many images can reduce its usefulness and create competition for network capacity.

When can preloading an LCP image help, and when can it hurt?

Preload can help when the browser otherwise discovers the LCP resource substantially later, such as when it is hidden behind CSS or another discovery dependency. It can hurt when normal HTML discovery is already early or when the preload competes with genuinely critical CSS, fonts, or other resources. The preload should also identify the same resource that the eventual image request will use, including appropriate responsive-image parameters.

How would you diagnose poor LCP caused by resource discovery rather than download time?

I would inspect a browser performance trace or network waterfall and compare navigation, resource discovery, request start, response completion, and rendering timestamps. A long gap between page navigation or HTML parsing and the LCP resource request suggests discovery delay. I would then inspect whether the resource is hidden behind JavaScript, CSS, lazy loading, or another dependency and determine whether HTML placement, priority, or selective preload can remove that delay.