Lazy Loading: Laden Sie nur, was der Besucher tatsächlich sieht

$body$

Stellen Sie sich eine Seite mit 30 Bildern vor. Ein Besucher öffnet sie, sieht die ersten zwei, drei Bilder, liest die Überschrift und geht wieder. Sein Browser hat inzwischen alle 30 Bilder heruntergeladen – 25 Megabyte Traffic für Inhalte, die niemand angesehen hat. Lazy Loading (verzögertes Laden) löst genau dieses Problem: Ein Bild wird erst geladen, wenn der Besucher in seine Nähe scrollt.

Wie Lazy Loading funktioniert

Statt dass der Browser sofort alle Ressourcen abruft, werden Elemente unterhalb des ersten sichtbaren Bereichs (der Inhalt „below the fold") zum Warten markiert. Erst wenn der Besucher scrollt und ein Element sich dem sichtbaren Bereich nähert, fordert der Browser es an. Das Ergebnis: Der erste Seitenaufbau ist drastisch leichter, und der Besucher merkt keinen Unterschied – die Bilder erscheinen, bevor er zu ihnen hinscrollt.

Der einfachste Weg: natives Lazy Loading

Die gute Nachricht: Für einfaches Lazy Loading brauchen Sie weder Plugin noch JavaScript. Alle modernen Browser unterstützen das Attribut loading="lazy":

• <img src="foto.webp" loading="lazy" alt="..."> – für Bilder
• <iframe src="..." loading="lazy"></iframe> – für Karten, YouTube-Einbettungen und Ähnliches

WordPress fügt dieses Attribut seit Version 5.5 automatisch zu Bildern im Inhalt hinzu – die meisten WordPress-Websites haben also bereits einfaches Lazy Loading, oft ohne es zu wissen.

Der entscheidende Fehler: Lazy Loading beim ersten Bild

Der häufigste Fehler in der Praxis: Lazy Loading ist überall aktiviert, auch beim Hero-Bild ganz oben auf der Seite. Das ist kontraproduktiv – dieses Bild ist meist auch Ihr LCP-Element (Largest Contentful Paint, eine zentrale Core-Web-Vitals-Metrik), und seine Verzögerung verschlechtert Ihren Geschwindigkeitswert direkt.

Die Regel ist einfach:

• Bilder, die sofort beim Öffnen sichtbar sind: loading="eager" (oder kein Attribut), und geben Sie dem wichtigsten Bild zusätzlich fetchpriority="high".
• Alles unterhalb des ersten Bildschirms: loading="lazy".

Lazy Loading für Videos und Einbettungen

Der größte Gewinn liegt oft nicht bei Bildern, sondern bei Einbettungen. Eine einzige YouTube-Einbettung lädt 500–800 KB Skripte, sobald die Seite öffnet. Die Lösung ist der „Facade"-Ansatz: Es wird nur das Vorschaubild angezeigt, der echte Player lädt erst beim Klick. Bei WordPress erledigen das Plugins wie WP Rocket oder Lazy Load for Videos.

Was Lazy Loading nicht löst

Lazy Loading reduziert die Datenmenge, macht aber Ihren Server nicht schneller. Wenn Ihre TTFB (Zeit bis zum ersten Byte) schlecht ist, startet die Seite trotzdem langsam. Deshalb wirkt Lazy Loading am besten in Kombination mit schnellem NVMe-Hosting und einem CDN, das Bilder von einem Standort nahe dem Besucher ausliefert – beides in unseren Hosting-Paketen enthalten. Für WordPress-Websites bieten wir zudem optimiertes WordPress-Hosting mit vorkonfiguriertem Caching.

Checkliste zum Schluss

• Aktivieren Sie loading="lazy" für alle Bilder unterhalb des ersten Bildschirms.
• Nehmen Sie das Hero-Bild aus und geben Sie ihm fetchpriority="high".
• Ersetzen Sie YouTube und Karten durch den Facade-Ansatz.
• Setzen Sie immer width- und height-Attribute, damit die Seite beim Laden nicht „springt".
• Prüfen Sie das Ergebnis vorher und nachher in PageSpeed Insights.

Eine halbe Stunde Arbeit, und der Unterschied wird in Sekunden gemessen – kaum eine Optimierung bringt so viel für so wenig Aufwand.

$body$