Das loading="lazy"-Attribut teilt dem Browser mit, das Laden eines Bildes oder Iframe zu verschieben, bis es in den Viewport eintreten wird — spart Bandbreite und beschleunigt den initialen Ladevorgang, ohne JavaScript.
html
Das loading="lazy"-Attribut teilt dem Browser mit, das Laden eines Bildes oder Iframe zu verschieben, bis es in den Viewport eintreten wird — spart Bandbreite und beschleunigt den initialen Ladevorgang, ohne JavaScript.
lazy — laden nur, wenn das Scrollen es in die Nähe des Viewports bringt.eager (Standard) — sofort laden, unabhängig von der Position.Der Browser nutzt einen Margin (lädt leicht bevor das Element in den Viewport kommt), sodass das Bild normalerweise bereit ist, wenn der Benutzer es sieht.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Ohne Dimensionen (oder aspect-ratio) hat das Lazy-Loaded-Bild keinen reservierten Platz, sodass die Seite beim Laden springt — was sich negativ auf Cumulative Layout Shift (CLS) auswirkt. Reserviere immer Platz.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lazy-Loading des Largest Contentful Paint-Bildes schadet der Performance eigentlich — es verzögert die wichtigsten Pixel. Nutze Lazy-Loading nur für Off-Screen-Medien.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
Natives loading="lazy" machte dies in den meisten Fällen überflüssig (obwohl IntersectionObserver für benutzerdefinierte Logik immer noch nützlich ist).
Natives Lazy-Loading reduziert initiale Bytes und Requests für lange Seiten mit vielen Bildern — ein großer Gewinn für Mobilgeräte — kostenlos.
Die Nuancen sind wichtig: Reserviere Dimensionen, um CLS zu schützen, und halte Above-the-Fold/LCP-Bilder eager (sogar fetchpriority="high"), damit wichtige Inhalte weiterhin schnell geladen werden.