# LCP Hero Optimization **MUST** · **ID:** `performance-lcp-hero-optimization` · **Category:** performance **Source:** [Web Platform](https://web.dev/) **Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/performance-lcp-hero-optimization > MUST: LCP images (hero, banner): Use `loading="eager"` + `fetchpriority="high"` + `decoding="async"`. Add `` in head. NEVER lazy-load above-the-fold content. Preload above-the-fold images and prioritize LCP elements for fast perceived loading Largest Contentful Paint (LCP) is a Core Web Vital measuring when the largest content becomes visible. Hero images are often the LCP element. Preloading and eager loading ensures they render as fast as possible. ## Bad — do not do this `performance-lcp-hero-optimization-bad` ```tsx export function LcpHeroOptimizationBad() { return (

{/* Lazy-loading hero image - delays LCP */} E-commerce store promotional hero showing colorful products

Welcome to Our Store

Discover amazing products at great prices.

Problems:

loading="lazy" delays the hero image
No fetchpriority="high" attribute
No preload link in document head
Browser discovers image late in rendering

); } ``` ## Good — do this `performance-lcp-hero-optimization-good` ```tsx export function LcpHeroOptimizationGood() { return (

{/* In real app, this would be in : */}

{/* Eager loading with high priority for LCP element */} E-commerce store promotional hero showing colorful products

Welcome to Our Store

Discover amazing products at great prices.

Best Practices:

loading="eager" loads immediately
fetchpriority="high" prioritizes the request
decoding="async" prevents render blocking
Explicit dimensions prevent layout shift

); } ``` ## References - [Optimize LCP](https://web.dev/articles/optimize-lcp) - [Preload critical assets](https://web.dev/articles/preload-critical-assets)