Next.js Image priority preloading when the image lives inside a next/dynamic component
0 reputation · 21 Jun 2022, 19:39 UTC
Goal
I want a critical above-the-fold image rendered by the Next.js Image component to be preloaded immediately on page load, using the documented priority prop, even though the component that contains it is code-split via next/dynamic (or React.lazy).
Constraint and uncertainty
The priority prop is documented to make the browser preload the image right away, which matters for LCP and CLS. However, when the Image element only exists inside a lazily loaded component, that component is not mounted until its chunk loads or it becomes visible. It is unclear whether the preload hint is emitted before the lazy component is instantiated, or whether preloading silently becomes a no-op until mount. The documentation does not define this ordering, and the behavior may differ between browsers and across Next.js 13/14 and later releases.
Assume the App Router on a current Next.js release, with the image served through the built-in optimization pipeline.
Questions
- Does
priorityon anImageinside anext/dynamiccomponent trigger a preload before that component mounts, or only after? - If it only applies after mount, is there a supported way to keep the preload (e.g., emitting the hint at the page level) without abandoning code-splitting?
- What is a reliable way to verify the ordering in DevTools so the result is not an artifact of caching or network conditions?