Das WordPress-Theme aktiviert globales Lazy Loading – auch auf dem Hero-Banner und dem Bild, das den größten Contentful Paint definiert. Lighthouse Mobile zeigt einen LCP von 4,2 Sekunden an. Durch Deaktivieren von Lazy für dieses einzelne Bild sinkt die LCP auf 1,8 Sekunden. Das Team hatte „optimiert“, indem es die wichtigste Ressource für den Nutzer und für Google präzise verzögerte.
Lazy Loading verzögert den Download einer Ressource, bis sie sich dem Ansichtsfenster nähert. Bei Inhalten unterhalb der Falte ist dies ein kostenloser Gewinn an Bandbreite und anfänglicher Ladezeit. Auf dem ersten Bildschirm ist es eine messbare – manchmal dramatische – Verschlechterung des Leistungssignals, das Suchmaschinen beobachten.
Die richtige Frage lautet daher nicht: „Sollten wir lazy laden?“ » aber welche Ressource muss zuerst ankommen und welche kann darauf warten, dass der Benutzer scrollt.
Oberhalb und unterhalb der Wasserlinie
Die Grundregel ist einfach zu formulieren und in der Produktion leicht zu verletzen: Alles, was der Benutzer sieht, ohne zu scrollen, muss sofort geladen werden; der Rest kann warten.
| Element | Empfohlene Strategie |
|---|---|
| Bildheld / LCP-Kandidat | loading="eager" + fetchpriority="high" |
| Header-Logo | eifrig, leichte Datei, vorladen, wenn kritisch |
| Miniaturansichten der ersten Produktlinie oder Seite | eifrig oder faul |
| Bilder unten auf der Seite | loading="lazy" |
| Kommentar-Avatare, sekundäre Symbole | faul |
In nativem HTML ist die Syntax direkt:
<img src="product.webp" loading="lazy" decoding="async" width="800" height="600" alt="...">
Das Verzögern des Ladens des LCP-Images optimiert die falsche Reihenfolge der Prioritäten.
Viele Themes und Plugins wenden Lazy standardmäßig auf alle „<img>“-Tags an. Bevor Sie eine globale Option aktivieren, identifizieren Sie das tatsächliche LCP-Element über die Search Console oder Lighthouse – es ist nicht immer das Bild, das Sie sich vorstellen.
Fetchpriorität, Vorspannung und Abmessungen
Über das Attribut „Laden“ hinaus vervollständigen zwei Hebel die Priorisierung. „fetchpriority="high"` weist den Browser an, eine LCP-Kandidatenressource pro Seite zu priorisieren – normalerweise das Heldenbild oder das Hauptproduktfoto.
Durch das Vorladen („<link rel="preload" as="image" href="hero.webp">`) wird die späte Erkennung kompensiert: zum Beispiel, wenn das LCP-Bild als CSS-Hintergrund und nicht als „<img>“-Tag definiert ist. Vermeiden Sie Letzteres nach Möglichkeit – LCP-Bilder in CSS sind schwieriger zu optimieren und zu messen.
Die Attribute „width“ und „height“ bleiben obligatorisch, ob faul oder nicht: Sie reservieren Platz vor dem Laden und vermeiden Layout-Offsets (CLS). Durch gut konfiguriertes Lazy Loading werden fehlende Dimensionen nie ausgeglichen.
Iframes, Karten und Skripte von Drittanbietern
Bilder sind nicht die einzigen Ressourcen, um intelligent zurückzudrängen. Ein eingebetteter YouTube-Iframe lädt mehrere Megabyte JavaScript, sobald die Seite angezeigt wird – weit mehr als das Gewicht eines statischen Miniaturbilds.
Zwei wirksame Ansätze:
- Lite-youtube-Fassade (oder gleichwertig): ein Vorschaubild und ein Player, der beim Klicken geladen wird.
loading="lazy"auf dem Iframe, wenn die Fassade nicht verfügbar ist.
Bei Google Maps reicht oft ein statisches Bild mit einem Link zur interaktiven Karte aus, bis der Nutzer darauf klickt. Kombinieren Sie Lazy Loading und Cookie-Zustimmungsverwaltung, bevor Sie Tracker von Drittanbietern laden: Das ist sowohl konformer als auch effizienter.
CMS, Themen und häufige Fallstricke
WordPress 5.5+ ermöglicht natives Lazy Loading für Bilder. Verwenden Sie die Filter „wp_lazy_loading_enabled“ oder die Klasse „skip-lazy“, um Helden und Logos auszuschließen. Shopify und WooCommerce verdienen die gleiche Überprüfung: Die Hauptproduktgalerie sollte nicht standardmäßig faul sein, wenn sie den ersten Bildschirm einnimmt.
Auf einer gemeinsam genutzten Site oder einem VPS kompensiert Lazy Loading auf der Vorderseite manchmal das langsame Hosting – es ersetzt jedoch kein CDN oder eine geeignete Bildkomprimierung. Vergleichen Sie die Angebote über unser Verzeichnis, wenn die TTFB trotz gut konfiguriertem Lazy hoch bleibt.
Der Gipfel: Faulheit als Ersatz für Besinnung
Hier erfahren Sie, was sich hinter der beruhigenden Formulierung der Option „Lazy Load All Images“ verbirgt.
Um den ersten Bildschirm zu beschleunigen, ist es manchmal erforderlich, ein Bild früher zu laden und nicht nach hinten zu verschieben. Es ist zwar nicht intuitiv, aber genau das zeigen LCP-Messungen am Boden.
Entscheide dich und gehe ohne blinden Fleck voran
Innerhalb eines halben Tages können Sie Lazy Loading wieder in den Dienst echter Leistung stellen. Identifizieren Sie zunächst das LCP-Element über die Search Console oder ein mobiles Lighthouse-Audit und notieren Sie sich den genauen Selektor. Erzwinge Eager und fetchpriority="high" für dieses Element und schließe es dann aus dem globalen Lazy des Themes oder Plugins aus. Aktivieren Sie Lazy Loading nur für „Below-the-Fold“-Bilder und lange Galerien. Ersetzen Sie umfangreiche Iframes durch Click-to-Load-Fassaden für YouTube und Karten. Überprüfen Sie die Breite und Höhe aller Bilder, um Layoutunterbrechungen zu vermeiden. Testen Sie abschließend unter realistischen Bedingungen mit WebPageTest im 4G-Filmstreifen: Der Held muss vom ersten Bild an sichtbar sein.
Um Hosting und CDN zu vergleichen, wenn das LCP trotz richtiger Verzögerung langsam bleibt, verwenden Sie die Leistung von Vergleich und Ratgeber.
Häufig gestellte Fragen
Sollte Lazy Loading standardmäßig auf alle Bilder angewendet werden?
Nein. „Above-the-fold“-Elemente – Held, Logo, erstes sichtbares Bild – sollten sofort geladen werden. Lazy Loading gilt für den Inhalt, den der Benutzer beim Scrollen entdeckt, nicht für das, was er sieht, wenn er ankommt.
natives Loading="lazy" oder benutzerdefinierter Intersection Observer?
Das native Attribut reicht in den allermeisten Fällen aus und vermeidet zusätzliches JavaScript. Ein benutzerdefiniertes Skript ist für erweiterte Platzhalter (LQIP) oder sehr spezifische Laderegeln gerechtfertigt – nicht als systematischer Ersatz für native.
Hat Lazy Loading einen Einfluss auf die Suchmaschinenoptimierung?
Indirekt ja, über das LCP und die Core Web Vitals. Eine Verzögerung des Hauptbildes verschlechtert die Leistungsbewertung. Kritische Bilder müssen ohne Interaktion oder endloses Scrollen zugänglich bleiben, was den Inhalt verbergen würde.
Und für YouTube- oder Google Maps-Iframes?
Kombinieren Sie „loading="lazy"` und eine Fassade, die den Player nur beim Klicken lädt. Die Auswirkung auf das Seitengewicht übersteigt oft die des Lazy Loading von Bildern allein.
Nützliches Lazy Loading verzögert das, was unsichtbar ist – nicht das, was der Benutzer zuerst sehen wollte.