Lazy Loading in 2026: Was Browser nativ unterstützen und wofür man ein Modul braucht

Lazy Loading in 2026: Was Browser nativ unterstützen und wofür man ein Modul braucht

Lazy Loading ist eine Performance-Optimierungstechnik, die das Laden von Ressourcen außerhalb des Bildschirms verzögert, bis der Benutzer in ihre Nähe scrollt. Im Jahr 2026 hat die native Browser-Unterstützung für Lazy Loading deutlich zugenommen, aber es gibt immer noch Szenarien, in denen PrestaShop-Shop-Betreiber zusätzliche Module oder benutzerdefinierte Implementierungen benötigen. Dieser Leitfaden erklärt genau, was Browser selbst erledigen, welche Lücken bestehen und wie Sie die beste Lazy-Loading-Strategie für Ihren PrestaShop-Shop implementieren.

Was natives Lazy Loading 2026 abdeckt

Das HTML-Attribut loading="lazy" wird jetzt von über 95% der Browser weltweit unterstützt. Dazu gehören Chrome (seit v77), Firefox (seit v75), Safari (seit v15.4), Edge (seit v79) und alle Chromium-basierten Browser. Das bedeutet, dass natives Lazy Loading für die meisten Besucher Ihres Shops sofort funktioniert.

So funktioniert natives Lazy Loading

Das Hinzufügen von loading="lazy" zu einem <img>- oder <iframe>-Tag weist den Browser an, das Laden dieser Ressource zu verzögern, bis sie sich in einer bestimmten Entfernung vom Viewport befindet. Der Browser übernimmt die gesamte Timing- und Intersection-Logik intern, ohne JavaScript-Overhead.

<!-- Natives Lazy Loading für Bilder -->
<img src="produkt-bild.jpg" 
     loading="lazy" 
     width="800" 
     height="600" 
     alt="Produktname">

<!-- Natives Lazy Loading für Iframes -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID" 
        loading="lazy" 
        width="560" 
        height="315"></iframe>

Was Browser nativ unterstützen

Was Browser NICHT unterstützen

Natives Lazy Loading in PrestaShop implementieren

Für PrestaShop 8.x und 9.x Themes

Moderne PrestaShop-Themes (wie Hummingbird für PS 9) enthalten oft standardmäßig natives Lazy Loading. Um es zu überprüfen oder zu Ihrem Theme hinzuzufügen, bearbeiten Sie die Template-Dateien, in denen Produktbilder gerendert werden.

{* Vorher - kein Lazy Loading *}
<img src="{$product.cover.bySize.home_default.url}" 
     alt="{$product.name}">

{* Nachher - mit nativem Lazy Loading *}
<img src="{$product.cover.bySize.home_default.url}" 
     loading="lazy" 
     width="{$product.cover.bySize.home_default.width}"
     height="{$product.cover.bySize.home_default.height}"
     alt="{$product.name}">

Kritische Regel: Bilder above-the-fold niemals lazy laden

Der häufigste Lazy-Loading-Fehler ist die Anwendung auf Bilder, die ohne Scrollen sichtbar sind. Dies verschlechtert tatsächlich die Performance, da der Browser das Laden von Inhalten verzögert, die der Benutzer sofort sieht. Googles Core Web Vitals werden Sie dafür mit einem höheren LCP-Wert (Largest Contentful Paint) bestrafen.

Bilder, die NICHT lazy geladen werden sollten:

• Ihr Shop-Logo
• Hero-/Bannerbilder oben auf der Seite
• Die ersten 1-2 Produktbilder auf Kategorieseiten
• Jedes Bild, das im initialen Viewport ohne Scrollen sichtbar ist

Für diese kritischen Bilder verwenden Sie Eager Loading mit Priority-Hints:

<img src="hero-banner.jpg" 
     loading="eager" 
     fetchpriority="high" 
     width="1200" 
     height="400" 
     alt="Sommer-Sale-Banner">

Wann Sie ein Modul brauchen: CSS-Hintergrundbilder

PrestaShop-Themes verwenden häufig CSS-Hintergrundbilder für Slider, Banner, Kategorieheader und Werbeblöcke. Das Attribut loading="lazy" funktioniert nicht für CSS-Hintergründe. Sie benötigen JavaScript, um diese zu behandeln.

IntersectionObserver-Ansatz

document.addEventListener('DOMContentLoaded', function() {
    const lazyBackgrounds = document.querySelectorAll('[data-bg]');
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                const el = entry.target;
                el.style.backgroundImage = 'url(' + el.dataset.bg + ')';
                observer.unobserve(el);
            }
        });
    }, { rootMargin: '200px 0px' });
    lazyBackgrounds.forEach(function(bg) { observer.observe(bg); });
});

Wann Sie ein Modul brauchen: Platzhalter-Effekte

Natives Lazy Loading zeigt nichts an, bis das Bild geladen ist, was zu einem unangenehmen visuellen Erlebnis führen kann. Module oder Bibliotheken können hinzufügen:

• Blur-up-Effekt (LQIP) - Laden Sie zuerst eine winzige, unscharfe Version, dann ersetzen Sie sie durch das vollständige Bild
• Skeleton-Screens - Graue Platzhalterblöcke, die den Bilddimensionen entsprechen
• Dominante Farb-Platzhalter - Extrahieren Sie die dominante Farbe aus dem Bild und verwenden Sie sie als Platzhalter-Hintergrund

Auswirkungen auf PrestaShop-Performance und Core Web Vitals

Richtiges Lazy Loading beeinflusst direkt drei Core Web Vitals Metriken:

• LCP - Lazy Loading von Above-the-fold-Bildern VERSCHLECHTERT LCP. Nur Below-the-fold-Bilder lazy laden.
• CLS - Bilder ohne width/height-Attribute verursachen Layoutverschiebungen. Immer Dimensionen angeben.
• INP - Weniger gleichzeitig ladende Ressourcen bedeuten weniger Hauptthread-Belastung.

Pflicht: Width- und Height-Attribute

<!-- SCHLECHT - verursacht Layoutverschiebung -->
<img src="produkt.jpg" loading="lazy" alt="Produkt">

<!-- GUT - reserviert Platz, keine Layoutverschiebung -->
<img src="produkt.jpg" loading="lazy" 
     width="400" height="400" alt="Produkt">

PrestaShop-spezifische Empfehlungen

Produktlistenseiten

Alle Produktbilder lazy laden außer der ersten Reihe. Natives loading="lazy" für Produktbilder verwenden und fetchpriority="high" auf die erste Reihe anwenden.

Produktdetailseiten

Das Hauptproduktbild sollte eager geladen werden mit fetchpriority="high". Thumbnail-Bilder in der Galerie können lazy geladen werden.

Startseite

Slider-/Karussell-Bilder above the fold sollten eager geladen werden. Modulblöcke below the fold sollten Lazy Loading verwenden.

Zusammenfassung: Modul vs. Nativ