Lazy-Loading, im Tech-Kontext.
Lazy-Loading lädt Bilder, Videos und Komponenten erst kurz vor dem Sichtbarwerden. Spart Datenvolumen, schadet aber dem LCP, wenn der Hero betroffen ist.
Lazy-Loading verschiebt das Laden einer Ressource auf den Moment, in dem sie gebraucht wird. Für Bilder und iframes reicht dafür das Attribut loading mit dem Wert lazy, für Komponenten übernimmt der Bundler das über einen dynamischen Import. Nutzen: der erste Bildschirm lädt weniger Bytes, und die Seite wird auf Mobilfunk deutlich früher nutzbar. Der klassische Fehler ist, auch das Hero-Bild lazy zu laden. Dann startet der Abruf erst nach dem Layout, und der Largest Contentful Paint verschlechtert sich messbar. Die Regel ist einfach: alles im ersten sichtbaren Bereich sofort laden und priorisieren, alles darunter lazy.
Beispiele aus dem Mittelstand
- Eine Referenzgalerie mit 40 Bildern lädt beim Aufruf nur die ersten sechs, der Rest folgt beim Scrollen.
- Ein Konfigurator wird erst geladen, wenn der Besucher den zugehörigen Bereich erreicht, und belastet die Startseite dadurch nicht.
<!-- Hero: sofort laden und priorisieren -->
<img src="/hero-1600.webp" width="1600" height="900" fetchpriority="high" alt="Werkhalle" />
<!-- Weiter unten: erst bei Annäherung laden -->
<img src="/referenz-7.webp" width="800" height="600" loading="lazy" decoding="async" alt="Referenz" />// Schwere Komponente erst laden, wenn sie gebraucht wird
const Kartenansicht = lazy(() => import("./Kartenansicht"));Folge-Fragen
Warum wurde meine Seite durch Lazy-Loading langsamer?
Vermutlich ist das größte sichtbare Bild betroffen. Der Browser darf es dann erst nach dem Layout anfordern, was den LCP verschiebt.
Wie viele Bilder soll ich sofort laden?
Nur die, die ohne Scrollen sichtbar sind. Auf dem Telefon sind das meist ein bis zwei.
Braucht es dafür eine Bibliothek?
Für Bilder und iframes nicht, das Attribut reicht in allen aktuellen Browsern. Für Komponenten genügt der dynamische Import.
Was ist mit eingebetteten Videos?
Statt das Video-Skript sofort zu laden, ein Vorschaubild zeigen und den Player erst beim Klick nachladen.
Lazy-Loading in der Praxis.
Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.
SEO-Performance