Lazy Loading (verzögertes Laden) ist eine Technik, bei der Bilder und Ressourcen einer Webseite erst dann geladen werden, wenn sie kurz vor der Anzeige im sichtbaren Bereich des Browsers stehen — anstatt alles auf einmal beim ersten Seitenaufruf zu laden. Für Online-Shops mit Dutzenden oder Hunderten von Produktbildern reduziert diese Optimierung das anfängliche Seitengewicht drastisch und verbessert die wahrgenommene Ladegeschwindigkeit für Besucher erheblich.
Wie funktioniert Lazy Loading?
Ohne Lazy Loading lädt der Browser beim ersten Seitenaufruf alle im HTML enthaltenen Bilder herunter — einschließlich jener, die sich weit unterhalb des sichtbaren Bereichs befinden und vom Besucher möglicherweise nie angesehen werden. Mit Lazy Loading werden nur Bilder geladen, die sich im Viewport oder in unmittelbarer Nähe befinden. Die übrigen Bilder warten, bis der Nutzer zur entsprechenden Stelle scrollt.
Das Ergebnis ist unmittelbar spürbar: Die Seite wird schneller angezeigt, es werden weniger Daten übertragen, und der Server erhält weniger gleichzeitige Anfragen. Auf einer PrestaShop-Produktlistenseite mit 40 Artikeln kann dies die Anzahl der beim Einstieg geladenen Bilder von 40 auf nur 6 bis 8 reduzieren — eine beträchtliche Gewichtsersparnis.
Natives HTML Lazy Loading: das Attribut loading="lazy"
Seit 2019–2020 unterstützen alle modernen Browser Lazy Loading nativ über ein einfaches HTML-Attribut am img-Tag: `loading="lazy"`. Es genügt, dieses Attribut hinzuzufügen, damit der Browser das verzögerte Laden automatisch übernimmt — ohne JavaScript oder externe Bibliotheken.
Beispiel: `
`. Die Angabe von width und height ist wichtig: Sie ermöglicht dem Browser, den Platz im Layout schon vor dem Laden des Bildes zu reservieren, was visuelle Verschiebungen (CLS — Cumulative Layout Shift) verhindert.
Der JavaScript-Ansatz: die Intersection Observer API
Vor dem nativen Support — und heute noch für fortgeschrittene Anwendungsfälle — wurde Lazy Loading über die JavaScript Intersection Observer API umgesetzt. Diese API erkennt präzise, wenn ein DOM-Element den Viewport betritt, und löst dann das Laden des Bildes aus. Sie bietet mehr Kontrolle: Es lässt sich ein Auslöseabstand definieren (z. B. 300px vor dem Eintritt des Bildes in den Viewport), um jeden visuellen Flackern zu vermeiden.
Niemals Above-the-Fold-Bilder lazy-loaden!
Auswirkungen auf die Core Web Vitals
Korrekt angewendetes Lazy Loading verbessert mehrere Core Web Vitals-Metriken. Es reduziert das anfängliche Gesamtgewicht der Seite, was den LCP (Largest Contentful Paint) für above-the-fold-Bilder verbessert — der Browser widmet seine Bandbreite den Prioritätsressourcen, statt sie auf alle Bilder der Seite zu verteilen. Außerdem wird der TBT (Total Blocking Time) durch geringere anfängliche Netzwerkverarbeitung gesenkt.
Umgekehrt kann falsch angewendetes Lazy Loading — insbesondere beim Hero-Bild — den LCP in die Höhe treiben. Dies ist einer der häufigsten Fehler bei auditierten PrestaShop-Shops: Ein Theme wendet loading="lazy" unterschiedslos auf alle Bilder an und verschlechtert damit genau die Metrik, die verbessert werden sollte.
Indexiert Google Lazy-Loading-Bilder?
Ja. Googlebot ist in der Lage, per Lazy Loading geladene Bilder zu sehen und zu indexieren. Google hat bestätigt, dass sein Crawler JavaScript ausführt und auf das Auslösen verzögerter Ladevorgänge wartet. Es wird jedoch empfohlen, natives HTML-Lazy-Loading (das loading-Attribut) gegenüber einer eigenen JavaScript-Implementierung zu bevorzugen, um eine optimale Indexierung sicherzustellen.
Lazy Loading und CDN: eine gewinnbringende Kombination
Lazy Loading in PrestaShop
PrestaShop bietet kein natives Lazy Loading, das per Klick im Backend aktivierbar wäre. Die Umsetzung hängt vom verwendeten Theme ab. Neuere Themes (Classic 1.7+, Hummingbird) integrieren in der Regel das Attribut loading="lazy" für Listing-Bilder. Falls Ihr Theme dies nicht unterstützt, müssen entweder die betreffenden Smarty-Templates angepasst oder ein spezielles Modul installiert werden.
- Listing-Bilder (Kategorien, Suchergebnisse, Neuheiten): ideal für Lazy Loading — sie befinden sich meist außerhalb des initialen Viewports
- Hauptproduktbild auf der Produktseite: KEIN Lazy Loading — es ist oft das LCP-Element der Seite
- Miniaturbilder im Warenkorb oder in «Ähnliche Produkte»-Blöcken: Lazy Loading empfohlen
- Hero-Banner auf der Startseite: KEIN Lazy Loading, stattdessen fetchpriority="high" verwenden
- Bilder in Kundenbewertungen oder Akkordeon-Inhalten: Lazy Loading empfohlen