Lazy Loading
Lazy Loading bezeichnet das verzögerte Laden von Ressourcen wie Bildern, Komponenten oder Modulen erst dann, wenn sie im Viewport benötigt werden. Ziel ist es, die initiale Ladezeit einer Seite zu reduzieren und die wahrgenommene Performance zu verbessern. Richtig eingesetzt, senkt Lazy Loading die übertragene Datenmenge beim Erstaufruf erheblich und verbessert PageSpeed -Werte.
Warum ist Lazy Loading relevant?
Durch das Verschieben nicht kritischer Ressourcen verkürzt sich die Zeit bis zur ersten sichtbaren Darstellung. Dadurch verbessern sich Kennzahlen wie First Contentful Paint und indirekt auch Largest Contentful Paint . Besonders auf inhaltsreichen Seiten reduziert Lazy Loading die initiale Netzwerklast.
Technische Umsetzung
Lazy Loading kann über native Browser-Attribute oder Framework-Mechanismen umgesetzt werden. In modernen Architekturen wird es häufig mit optimiertem Rendering und einem strukturierten Build-Prozess kombiniert, um Ressourcen intelligent zu priorisieren.
SEO- und UX-Aspekte
Falsch implementiertes Lazy Loading kann dazu führen, dass Inhalte für Suchmaschinen nicht korrekt erfassbar sind oder Layout-Verschiebungen auftreten. Eine Kombination mit sauberem Caching und strukturiertem Markup verhindert negative Auswirkungen auf PageSpeed oder Nutzererfahrung.
Unser Ansatz
In unserer Angular-Architektur nutzen wir @defer-Blöcke mit Viewport-Trigger: Komponenten unterhalb des sichtbaren Bereichs werden erst geladen, wenn der Nutzer dorthin scrollt. Bilder erhalten das native loading="lazy"-Attribut – mit Ausnahme des Hero-Bildes, das per preload priorisiert wird, um den Largest Contentful Paint nicht zu verschlechtern. Auf der Glossarübersicht mit 65+ Einträgen spart diese Strategie beim Erstaufruf über 400 KB an Daten. In Kombination mit Server-Side Rendering bleibt der Inhalt trotzdem vollständig crawlbar.