Lazy Loading: Laden Sie nur, was der Besucher sieht
Test #06 prüft, ob Bilder und eingebettete Inhalte erst geladen werden, wenn der Besucher zu ihnen scrollt. Ein massiver Performance-Gewinn, nativ in modernen Browsern.
- Ohne Lazy Loading lädt der Browser ALLE Bilder der Seite beim Öffnen — auch die unsichtbaren weit unten.
- Orilyt misst die Abdeckung: ≥ 50 % der Bilder/Iframes mit loading="lazy" = Score 100, 0 % = Score 30.
- Das Attribut loading="lazy" ist natives HTML — kein Plugin nötig, eine Zeile reicht.
Eine durchschnittliche WordPress-Seite enthält zwischen 10 und 40 Bilder. Ohne Lazy Loading lädt der Browser alle beim Seitenaufruf herunter — einschließlich derer ganz unten, die der Besucher vielleicht nie sehen wird.
Das Ergebnis: Megabytes an nutzlos übertragenen Daten, ein langsameres erstes Rendering und eine verschlechterte Mobile-Erfahrung. Das ist reine Verschwendung.
Der Orilyt-Test #06 erkennt dieses Problem und misst die Lazy-Loading-Abdeckung. Sehen wir uns an, wie er funktioniert und wie Sie seine Ergebnisse in ein Verkaufsargument verwandeln.
Warum das Laden unsichtbarer Bilder ein Problem ist
Bei einem Blogbeitrag mit 15 Bildern sieht der Besucher nur 2 oder 3 auf dem ersten Bildschirm. Ohne Lazy Loading lädt der Browser alle 15 parallel herunter, verbraucht Bandbreite und verzögert die Darstellung des sichtbaren Inhalts.
Die Auswirkung ist auf Mobilgeräten gravierend: Bei einer 4G-Verbindung fügt jedes nicht verzögerte Bild Hunderte von Millisekunden zur Ladezeit hinzu. Multipliziert mit 15 Bildern ergibt das eine Website, die 5–10 Sekunden zum vollständigen Laden braucht.
Google weiß das: Der Largest Contentful Paint (LCP) und das Seitengewicht sind Ranking-Faktoren. Eine Website ohne Lazy Loading bestraft sich doppelt — Langsamkeit UND übermäßiger Datenverbrauch.
Wie funktioniert Test #06?
Orilyt analysiert das HTML der Seite und zählt zwei Dinge:
- Die Gesamtzahl der Bilder (<img>) und Iframes (<iframe>) auf der Seite.
- Die Anzahl dieser Elemente, die das Attribut loading="lazy" verwenden.
Das Verhältnis ergibt die Abdeckungsrate. Der Score wird wie folgt berechnet:
Wenn keine Bilder oder Iframes erkannt werden, ist der Score 50/100 (nicht messbar — die Seite hat keine Kandidaten).
Der detaillierte Bericht zeigt die genaue Anzahl der Bilder, Iframes und den Abdeckungsprozentsatz. Sie wissen sofort, ob das Problem kritisch oder geringfügig ist.
loading="lazy": Das native Lazy Loading des Browsers
Seit 2020 unterstützen alle modernen Browser das HTML-Attribut loading="lazy". Kein JavaScript nötig, kein Plugin — eine einfache Änderung am <img>-Tag reicht:
<img src="foto.jpg" alt="Foto">
<img src="foto.jpg" alt="Foto" loading="lazy">
Der Browser lädt das Bild erst herunter, wenn sich der Besucher seiner Position auf der Seite nähert. Es ist transparent, hat keine SEO-Auswirkung (Google versteht loading="lazy") und funktioniert auch mit Iframes (YouTube-Videos, Google Maps).
Achtung: Bilder, die auf dem ersten Bildschirm sichtbar sind (Above the Fold), sollten KEIN Lazy Loading verwenden. Sie müssen sofort geladen werden für einen guten LCP. WordPress 5.9+ fügt automatisch loading="lazy" zu Bildern hinzu, außer zum ersten.
Wie nutzen Sie diesen Test in Ihren Angeboten?
Lazy Loading ist ein starkes Argument: Der Kunde kann das Problem in einem Satz verstehen („Ihre Website lädt 40 Bilder beim Öffnen, obwohl der Besucher nur 3 sieht").
So strukturieren Sie Ihre Empfehlung mit der FIA-Methode:
- Fakt: „Ihre Seite enthält X Bilder, aber nur Y verwenden verzögertes Laden. Die anderen Z werden sofort heruntergeladen, auch wenn sie unsichtbar sind."
- Auswirkung: „Der Browser lädt N MB unnötiger Daten herunter. Die mobile Ladezeit verdoppelt sich. Google bestraft langsame Seiten."
- Aktion: „loading=\"lazy\" zu allen Bildern unterhalb des sichtbaren Bereichs hinzufügen. Mit WordPress das native Lazy Loading aktivieren oder ein Plugin verwenden (WP Rocket, Perfmatters). Geschätzte Zeit: 20 Minuten."
Der Orilyt-Bericht zeigt die genaue Bildanzahl, Abdeckungsrate und einen klaren Score — perfekt, um das Problem in einem Angebot zu illustrieren.
Diesen Test in Ihren Workflow integrieren
Test #06 fügt sich natürlich in eine umfassende Performance-Diagnose ein:
- Starten Sie das Orilyt-Audit → der Score „Intelligentes Bildladen" erscheint im Abschnitt Performance.
- Wenn der Score rot ist (30/100), öffnen Sie die Details: Sie sehen, wie viele Bilder und Iframes kein Lazy Loading haben.
- Nach der Korrektur starten Sie das Audit erneut und nutzen den Vorher/Nachher-Vergleich, um die Seitengewichtsreduzierung dem Kunden zu zeigen.
In Kombination mit den Tests Seitengewicht (#28), moderne Bilder (#05) und Bilddimensionen (#20) ist Lazy Loading Teil der vollständigen Medienoptimierungsstrategie.
Fazit
Lazy Loading ist einer der einfachsten und am wenigsten bekannten Performance-Hebel. Ein natives HTML-Attribut, von allen Browsern unterstützt, das das anfängliche Seitengewicht um 60–80 % reduzieren kann.
Der Orilyt-Test #06 gibt Ihnen eine sofortige Diagnose: Bildanzahl, Lazy-Loading-Abdeckung, klarer Score. Ein konkretes Argument für jedes Kundenangebot.
Testen Sie jetzt eine Kunden-Website — das Verhältnis von Gesamtbildern zu Lazy-Loaded-Bildern birgt oft Überraschungen.