Lazy Loading

Lazy LoadingLazy Loading bezeichnet das verzögerte Nachladen von Inhalten wie Bildern erst dann, wenn sie in den sichtbaren Bereich gelangen, um die anfängliche Ladezeit zu reduzieren.Zum Glossareintrag → (verzögertes Laden) bedeutet, dass Inhalte wie Bilder oder eingebettete Elemente erst geladen werden, wenn sie in den sichtbaren Bereich des Nutzers gelangen, statt sofort beim Seitenaufruf. Das reduziert die anfängliche Datenmenge und kann die LadezeitPageSpeed bezeichnet die Ladezeit und Reaktionsfähigkeit einer Website. PageSpeed-Optimierung umfasst Massnahmen, die Ladezeit, Reaktionsfähigkeit und visuelle Stabilität verbessern.Zum Glossareintrag → verbessern, besonders bei langen Seiten mit vielen Bildern.

Entscheidend ist die richtige Anwendung:

• Bilder unterhalb des sichtbaren Bereichs können sinnvoll lazy geladen werden.
• Das wichtigste Bild im sichtbaren Bereich, häufig das LCPLargest Contentful Paint (LCP) misst, wann das grösste sichtbare Inhaltselement im sichtbaren Bereich geladen ist, und steht damit für die wahrgenommene Ladegeschwindigkeit.Zum Glossareintrag →-Element, sollte nicht lazy geladen werden.

Ein häufiger Fehler ist loading="lazy" auf dem Hero- oder LCP-Bild. Dadurch wird genau das Element verzögert, das für einen guten Largest Contentful Paint (LCP) entscheidend ist. Besser ist es, das LCP-Bild stattdessen mit fetchpriority="high" zu priorisieren und Lazy Loading nur für nachrangige Inhalte einzusetzen.

Vorteile und Stolperfallen #

Lazy Loading reduziert das initiale Seitengewicht und beschleunigt das erste RenderingJavaScript-Rendering bezeichnet den Vorgang, bei dem ein Browser oder Crawler JavaScript-Code ausführt, um daraus die fertige, sichtbare Seite zu erzeugen. Erst nach diesem Schritt entstehen Inhalte, die nicht bereits im ausgelieferten HTML stehen.Zum Glossareintrag →. Die klassische Falle: das Hero-Bild selbst lazy zu laden. Alles im ersten Viewport sollte sofort laden — sonst erscheint das grösste Element zu spät und LCP wird schlechter statt besser. Breite und Höhe immer reservieren, damit das Layout nicht springt.

SEO- und KI-Crawler-Aspekte #

Der GooglebotDer Googlebot ist der Webcrawler von Google, der Webseiten abruft, um sie für die Google-Suche zu crawlen und zu indexieren.Zum Glossareintrag → rendert lazy geladene Inhalte, einfachere KI-CrawlerKI-Crawler sind automatisierte Bots, die Webseiten für KI-Anbieter abrufen, um Inhalte zu finden, für Suchfunktionen bereitzustellen, für Antworten abzurufen oder je nach Anbieter für Modelltraining zu verwenden.Zum Glossareintrag → führen aber oft kein JavaScript aus. Natives loading="lazy" mit echtem src-Attribut bleibt für alle crawlbarBeim Crawling ruft ein Suchmaschinen-Bot eine URL ab und lädt deren Inhalte herunter. Es ist der erste Schritt, bevor eine Seite indexiert werden kann.Zum Glossareintrag →; reine JavaScript-Lösungen mit data-src können Bilder vor diesen Bots komplett verstecken.