Snippet

LCP-Optimierung mit Priority-Bildern

Das priority-Attribut der Next.js Image-Komponente stellt sicher, dass kritische Bilder im sichtbaren Bereich vom Browser vorab geladen werden, was die Largest Contentful Paint (LCP) Metrik erheblich verbessert.

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

Erklärung

priority

Teilt Next.js mit, dieses Bild vorab zu laden, anstatt es verzögert zu laden (Lazy Loading), was das Standardverhalten ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

LCP-Optimierung mit Priority-Bildern

Verwandt