Make the main hero image or text render fast by prioritizing and preloading the LCP resource.
LCP is a Core Web Vital; slow LCP is the most common reason pages fail the perceived-load threshold (target < 2.5s).
BeforeMerge scans your pull requests against this rule and dozens more. Get actionable feedback before code ships.
LCP measures when the largest above-the-fold element (hero image, heading, or video poster) finishes rendering. Google's threshold is < 2.5s at the 75th percentile. The LCP element is usually discovered late, so it must be prioritized.
<!-- bad: LCP image discovered late, no priority hint -->
<img src="/hero.jpg" loading="lazy" />
<!-- good: preload + high fetch priority, never lazy-load the LCP element -->
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high" />
<img src="/hero.avif" fetchpriority="high" />Never loading="lazy" the LCP element. In Next.js, add priority to the LCP <Image>.