javascript / intermediate
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Image from 'next/image';export default function Hero() {return (<div className="hero-container"><Imagesrc="/hero-banner.jpg"alt="Hero Banner"width={1200}height={600}priorityclassName="object-cover"/></div>);}
nextjs
Erklärung
1
priority
Teilt Next.js mit, dieses Bild vorab zu laden, anstatt es verzögert zu laden (Lazy Loading), was das Standardverhalten ist.