Lazy Loading für Bilder: loading=lazy

<img loading="lazy" src="..."> teilt dem Browser mit, den Download des Bildes zurückzustellen, bis es kurz davorsteht, in den Viewport zu gelangen. Die native Unterstützung in allen modernen Browsern macht dies zum einfachsten Performancegewinn für bildlastige Seiten.

Browser verwenden einen kleinen heuristischen Abstand (meist einige tausend Pixel unterhalb des Folds). Das Bild beginnt früh genug zu laden, sodass es vollständig gerendert ist, wenn die Nutzer dorthin scrollen – Lazy Loading bleibt für aufmerksame Nutzer unsichtbar.

Setzen Sie loading="lazy" niemals für Bilder oberhalb des Folds oder für Ihr LCP-Element (Largest Contentful Paint). Der verzögerte Ladevorgang hält das wichtigste visuelle Element zurück, was sowohl die wahrgenommene Geschwindigkeit als auch die Core Web Vitals verschlechtert.

Damit Lazy Loading effektiv funktioniert, weisen Sie dem <img>-Element explizite width- und height-Werte (oder eine aspect-ratio-CSS-Eigenschaft) zu. Ohne diese Abmessungen kann der Browser keinen Platz reservieren, beim Scrollen kommt es zu erneuten Layoutberechnungen, und die Heuristik für Lazy Loading greift nicht korrekt.

Dasselbe Attribut funktioniert auch bei <iframe>. <iframe loading="lazy"> verzögert das Laden von Karten, Videos und Social-Media-Einbettungen unterhalb des Folds – andernfalls würde jedes davon bei jedem Seitenaufruf Megabytes an JavaScript von Drittanbietern laden.

Der Standardwert ist loading="eager" (sofort laden) und wird nur selten ausdrücklich angegeben. Das Setzen von eager bei Bildern oberhalb des Folds kann als Dokumentation nützlich sein und Code-Reviewenden signalisieren, dass diese Entscheidung bewusst getroffen wurde.

Lazy Loading lässt sich perfekt mit responsiven Bildern kombinieren. Der Browser wählt weiterhin den passenden Kandidaten aus srcset; er verschiebt lediglich den Download. Zwischen loading="lazy" und srcset ist keine zusätzliche Abstimmung erforderlich.

Kombinieren Sie Lazy Loading mit decoding="async", damit der Browser das Bild außerhalb des Hauptthreads decodieren kann. Dadurch wird die Verarbeitung von Eingaben beim Scrollen nicht blockiert, wenn nach einem langen Scrollvorgang viele Bilder gleichzeitig eintreffen.

CSS background-image kann nicht nativ per Lazy Loading geladen werden. Für Hero-Hintergründe oberhalb des Folds ist das unproblematisch; für Hintergründe unterhalb des Folds verwenden Sie IntersectionObserver, um die URL einzusetzen, sobald sich das Element dem Viewport nähert.

Beim Drucken der Seite lädt der Browser jedes Bild unabhängig von loading="lazy" sofort, damit die Druckversion vollständig ist. Sie müssen Lazy-Loading-Bilder in Druck-Stylesheets nicht gesondert behandeln.

Das Lighthouse-Audit „Defer offscreen images“ listet jedes Bild auf, für das loading="lazy" verwendet werden sollte. Eine Filterung im Network-Bereich nach „Img“ und die Ansicht „Waterfall“ zeigen die gestaffelten Ladevorgänge, die Lazy Loading erzeugt – bei Bildergalerien sinkt die Zahl der anfänglichen Anfragen drastisch.

Warum ist es schädlich, loading="lazy" für ein Hero-Bild am oberen Seitenrand zu setzen?

loading="lazy" bei <img>- und <iframe>-Elementen außerhalb des sichtbaren Bereichs ist ein Performancegewinn mit nur einem Attribut. Kombinieren Sie es mit expliziten width-/height-Werten (um Platz zu reservieren), srcset (für Responsivität) und decoding="async" (für flüssiges Scrollen). Wenden Sie es niemals auf das LCP-Bild oder auf Inhalte an, die im initialen Viewport sichtbar sind.