Lazy-Loading: erst laden wenn nötig

Was Lazy-Loading bringt

Lazy-Loading bedeutet: Inhalte erst dann laden, wenn sie gebraucht werden. Klassischer Fall: Bilder unterhalb des Viewports laden nicht beim Initial-Page-Load, sondern erst wenn der User dahin scrollt. Spart Bandbreite und beschleunigt LCP.

Native loading="lazy"

Seit Chrome 76, Firefox 75, Safari 15.4 nativ unterstützt:

<img src="/foto.jpg" loading="lazy" alt="..." width="800" height="600">
<iframe src="/embed" loading="lazy"></iframe>

Browser entscheidet selbst, wann (~viewport + 3000 px) das Bild geladen wird. Keine JavaScript-Library nötig.

Anti-Pattern: Hero-Bild lazy-loaden

Das LCP-Bild darf NIE lazy-geladen werden - damit drückt man LCP künstlich nach oben. Stattdessen explizit:

<!-- Hero / LCP-Bild -->
<img src="/hero.avif" fetchpriority="high" alt="..." width="1200" height="600">

<!-- Alle anderen -->
<img src="/foto-2.avif" loading="lazy" alt="..." width="800" height="600">
<img src="/foto-3.avif" loading="lazy" alt="..." width="800" height="600">

IntersectionObserver für komplexe Fälle

Für nicht-img Elemente (heavy Components, Charts, Maps) den IntersectionObserver nutzen:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // Lade die Komponente
      import('./Chart').then(({ default: Chart }) => mount(Chart));
      observer.disconnect();
    }
  });
}, { rootMargin: '200px' });

observer.observe(document.querySelector('#chart-placeholder'));

rootMargin: '200px' triggert das Loading 200 px bevor das Element sichtbar wird - meist genug Zeit damit es bei Sichtbarkeit fertig ist.

Lazy-Loading von Komponenten in React

const HeavyChart = React.lazy(() => import('./HeavyChart'));

function Page() {
  return (
    <Suspense fallback={<div>Lädt...</div>}>
      <HeavyChart />
    </Suspense>
  );
}

Astro hat das Konzept im Framework eingebaut über client:visible - Komponente lädt erst bei Sichtbarkeit.

Was nicht lazy-loaden sollte

• Hero-Bild / LCP-Element (siehe oben)
• CSS für sichtbaren Bereich (Critical CSS inline statt lazy)
• Kritische Navigation (Header-Logo, Hauptmenü)
• Webfonts für Above-the-Fold-Text (preload statt lazy)