Lazy Loading

Lazy Loading ist eine Technik, bei der Inhalte erst geladen werden, wenn sie tatsächlich gebraucht werden — typischerweise, wenn sie beim Scrollen in den Sichtbereich rücken. Sie reduziert die anfängliche Datenmenge und beschleunigt den Seitenaufbau. Browser beherrschen das für Bilder und eingebettete Inhalte inzwischen von Haus aus; ein Attribut genügt. Falsch angewendet verlangsamt sie die Seite.

Kurz zusammengefasst:

• Inhalte werden erst beim Heranscrollen geladen.
• Vom Browser unterstützt — kein JavaScript nötig.
• Nie für das erste sichtbare Bild — das verschlechtert die Core Web Vitals.
• Ohne Größenangaben entsteht Layoutsprung.
• Größter Gewinn bei bildlastigen und langen Seiten.

Was es bringt

Eine Seite mit dreißig Bildern lädt beim Aufruf zunächst nur die wenigen, die tatsächlich sichtbar sind. Das spart Datenmenge, Verbindungen und Rechenzeit — spürbar vor allem auf Mobilgeräten und bei langsamen Verbindungen.

Besonders wirksam ist die Technik bei eingebetteten Inhalten Dritter: Ein Video oder eine Karte lädt oft mehrere hundert Kilobyte an Skripten. Wird das erst beim Heranscrollen ausgelöst, entlastet das den Seitenaufbau erheblich — und schiebt zugleich die Verbindung zu einem fremden Server nach hinten, was auch datenschutzrechtlich günstiger ist.

Der Fehler, der am meisten kostet

Das erste sichtbare Bild verzögert zu laden. Genau dieses Bild ist bei den meisten Seiten das Element, an dem die Ladezeitmessung hängt. Wird es erst nach der Auswertung durch den Browser angefordert, verschiebt sich der gemessene Wert nach hinten — die Seite fühlt sich langsamer an und misst schlechter.

Das passiert regelmäßig, weil Plugins pauschal alle Bilder verzögern. Die Regel lautet deshalb:

• Alles im ersten Sichtbereich: sofort laden, beim Titelbild sogar bevorzugt.
• Alles darunter: verzögert laden.

Zu prüfen ist das in einem Satz: Titelbild im Quelltext ansehen — trägt es das Verzögerungs-Attribut, gehört es entfernt.

Layoutsprung vermeiden

Wird ein Bild nachgeladen, ohne dass sein Platz reserviert ist, springt der Inhalt darunter beim Erscheinen nach unten. Das verschlechtert die Layoutstabilität und ist für Lesende ausgesprochen ärgerlich.

Die Lösung ist einfach und wird trotzdem oft vergessen: Breite und Höhe angeben. Der Browser reserviert daraus den Platz, bevor das Bild da ist. Bei eingebetteten Inhalten übernimmt ein Platzhalter mit festem Seitenverhältnis diese Aufgabe.

Womit es funktioniert

Browser oder Plugin?

Die Browserlösung genügt für Bilder und eingebettete Rahmen — sie kostet nichts, braucht kein JavaScript und funktioniert auch, wenn Skripte scheitern. WordPress setzt sie inzwischen selbst.

Plugins bieten mehr Steuerung, etwa für Hintergrundbilder oder eingebettete Videos mit Vorschaubild statt Einbettung. Sie bringen dafür zusätzliches JavaScript mit und arbeiten oft zu pauschal — insbesondere beim Titelbild. Wer eines einsetzt, sollte in den Einstellungen nachsehen, ob sich die ersten Bilder ausnehmen lassen.

Häufige Fragen

Brauche ich ein Plugin für Lazy Loading?

Für Bilder und eingebettete Rahmen nicht — Browser und WordPress beherrschen das selbst. Ein Plugin lohnt nur für Sonderfälle wie Hintergrundbilder oder Videovorschauen.

Warum wird meine Seite dadurch langsamer?

Fast immer, weil auch das erste sichtbare Bild verzögert geladen wird. Dann verschiebt sich genau der Wert nach hinten, den man verbessern wollte.

Schadet Lazy Loading dem SEO?

Bei korrekter Umsetzung nein — Suchmaschinen kommen damit zurecht. Problematisch wird es, wenn Inhalte ausschließlich per JavaScript nachgeladen werden und ohne Ausführung gar nicht vorhanden sind.

Wie verhindere ich, dass das Layout springt?

Breite und Höhe der Bilder angeben, damit der Browser den Platz vorab reserviert. Bei eingebetteten Inhalten einen Platzhalter mit festem Seitenverhältnis verwenden.

Gilt das auch für Videos und Karten?

Ja, und dort ist der Gewinn am größten — sie bringen oft mehrere hundert Kilobyte an fremden Skripten mit. Noch besser ist ein Vorschaubild, das die Einbettung erst auf Klick lädt.

Wie erkenne ich, ob es richtig eingestellt ist?

Im Quelltext prüfen, ob das erste große Bild das Verzögerungs-Attribut trägt. Ist das der Fall, gehört es entfernt.

Optimierungs-Plugin aktiv, Werte trotzdem rot?

Ein häufiger Grund ist ein verzögert geladenes Titelbild. Wir sehen nach, was tatsächlich wann geladen wird.