priority / lazy loading conflicts

perf/image-prioritywarningperformancenextjs-16

Why it matters

Next.js 16 deprecated priority in favor of preload; and priority or preload together with loading="lazy" contradict each other.

Fix

Use preload (or loading="eager" with fetchPriority="high") on the LCP image only, without loading="lazy".

Credit

  • From the Next.js team

    Next.js 16 replaces priority with preload, and a priority image must not also be lazy.

  • From Google Chrome

    web.dev warns that lazy-loading the largest above-the-fold image delays Largest Contentful Paint.

References

See it