Was ist Lazy Loading?

Was ist Lazy Loading?

Lazy Loading (verzögertes Laden) ist eine Technik, die das Laden einer Ressource hinauszögert, bis sie gebraucht wird, meist bis der Nutzer in ihre Nähe scrollt. Bilder, iframes und JavaScript-Teile, die zunächst außerhalb des sichtbaren Bereichs liegen, werden später geladen, sodass der Browser vor der ersten Anzeige weniger herunterladen muss.

So funktioniert Lazy Loading

Bilder und iframes: das Attribut loading

Mit loading="lazy" an einem <img> oder <iframe> lädt der Browser das Element erst, wenn es sich dem Viewport nähert. Den Abstand legt der Browser fest, Sie können ihn nicht ändern. Lazy Loading für Bilder funktioniert in Chrome 77, Edge 79, Firefox 75 und Safari 15.4 oder neuer; ein Browser, der das Attribut nicht kennt, ignoriert es und lädt das Bild normal (Quelle: web.dev).

<img src="team.jpg" loading="lazy" alt="Our team" width="800" height="600">

Setzen Sie immer width und height. Ohne diese Angaben kann der Browser keinen Platz reservieren, die Seite springt beim Eintreffen des Bildes und Ihr Cumulative Layout Shift steigt. Wie Sie die Maße wählen, steht unter Bildgröße.

JavaScript: Intersection Observer und dynamisches import()

Für alles, was das Attribut nicht abdeckt, etwa einen Videoplayer oder ein schweres Widget, meldet ein Intersection Observer, wann ein Element in den Viewport kommt, und Ihr Code startet die Arbeit in diesem Moment (siehe MDN zu Lazy Loading). Ein rootMargin startet das Laden etwas früher, sodass Nutzer selten eine leere Fläche sehen.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
}, { rootMargin: '200px' });
document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img));

In einer Single-Page-App erledigt das dynamische import() dasselbe für Code: Das Bundle einer Route wird erst geladen, wenn der Nutzer dorthin navigiert. So bleibt der erste Download klein.

const Settings = () => import('./Settings.js');

Beispiel: eine lange Artikelseite

Ein Artikel hat ein Titelbild und fünfzehn weitere Bilder weiter unten sowie ein eingebettetes Video. Für die erste Ansicht braucht es nur das Titelbild. Lassen Sie es normal laden (Standard) und versehen Sie die anderen fünfzehn Bilder und den Video-iframe mit loading="lazy". Wer nach der Einleitung aufhört, lädt sie nie herunter; wer scrollt, bekommt jedes kurz vor dem Erscheinen.

Häufige Fehler beim Lazy Loading

• Das Titelbild oder LCP-Bild verzögern. Bilder, die beim Laden wahrscheinlich sichtbar sind, sollten nicht lazy laden, denn der Browser holt dann genau das Element später, auf das Ihr Largest Contentful Paint wartet (web.dev empfiehlt dasselbe).
• Keine Angaben zu width und height. Das Layout verschiebt sich, sobald jedes Bild erscheint.
• Alles lazy laden. Der erste Bildschirm sollte normal laden; verzögern Sie nur, was darunter liegt.
• Wichtige Inhalte hinter Scroll-Skripten verstecken. Haupttext gehört ins ursprüngliche HTML; verzögern Sie Medien, nicht den Text.
• Zu spät starten. Ohne Rand scrollen Nutzer in eine leere Fläche und warten. Beginnen Sie etwas früher.
• Zu glauben, es spare Arbeit. Lazy Loading verschiebt den Download. Ein langsames Skript, das später läuft, bleibt langsam.

Lazy Loading, Tests und Monitoring

Lazy geladene Dateien werden beim Scrollen angefordert; ein Test, der nie scrollt, lädt sie nie. Ein Seitengeschwindigkeits-Audit kann deshalb leichter wirken als das, was ein Leser beim Durchscrollen tatsächlich lädt. Mehr zum Gesamtbild bieten 10 Schritte zu einer schnelleren Website und warum Bildoptimierung wichtig ist.

Die Wirkung auf echte Messwerte sehen Sie mit dem kostenlosen Core-Web-Vitals-Checker, der Felddaten aus dem Chrome UX Report liest. Nach einem Release behalten Sie die Werte mit LoadFocus Page Speed Monitoring im Blick: geplante Lighthouse-Audits mit Alarm, wenn sich ein Wert verschlechtert.

Häufige Fragen: Lazy Loading

Soll ich loading="lazy" bei jedem Bild setzen?

Nein. Bilder oben auf der Seite, vor allem das Element, das Ihr Largest Contentful Paint ist, sollten normal laden. Nutzen Sie Lazy Loading für Bilder unterhalb des ersten Bildschirms.

Hilft oder schadet Lazy Loading der SEO?

Es hilft, wenn nur Bilder und iframes unterhalb des sichtbaren Bereichs verzögert werden, weil die Seite schneller wird. Es schadet, wenn Text oder Links, die indexiert werden sollen, hinter einem Skript liegen, das auf Scrollen wartet. Halten Sie wichtige Inhalte im ursprünglichen HTML.

Was ist der Unterschied zwischen Lazy Loading und Code Splitting?

Code Splitting ist ein Build-Schritt, der Ihr JavaScript in einzelne Dateien teilt. Lazy Loading ist die Laufzeit-Entscheidung, eine dieser Dateien erst bei Bedarf zu laden. Bundler erledigen das Erste, dynamisches import() das Zweite.

Kann ich CSS-Hintergrundbilder lazy laden?

Nicht mit dem Attribut loading, das nur für Bilder und iframes gilt. Nutzen Sie nach Möglichkeit ein echtes img-Element oder setzen Sie das Hintergrundbild per Intersection Observer, wenn das Element in die Nähe des Viewports kommt.

Welche Browser unterstützen loading="lazy"?

Chrome 77, Edge 79, Firefox 75 und Safari 15.4 sowie neuer unterstützen es für Bilder. Andere ignorieren das Attribut und laden das Bild sofort, es geht also nichts kaputt.