Snippet

Optimizing LCP with Priority Images

The priority property on the Next.js Image component ensures that critical above-the-fold images are preloaded by the browser, significantly improving the Largest Contentful Paint (LCP) metric.

snippet.js

javascript

import Image from 'next/image';
 
export default function Hero() {
  return (
    <div className="hero-container">
      <Image
        src="/hero-banner.jpg"
        alt="Hero Banner"
        width={1200}
        height={600}
        priority
        className="object-cover"
      />
    </div>
  );
}

nextjs

Breakdown

priority

Tells Next.js to preload this image instead of lazy loading it, which is the default behavior.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Optimizing LCP with Priority Images

Related