⚡Performance

Lazy Loading implementieren

Lade nur was der Nutzer gerade sieht

Warum alles auf einmal laden wenn der Nutzer nur den oberen Teil der Seite sieht? Lazy Loading laed Bilder, Komponenten und Daten erst wenn sie in den Viewport scrollen. Schnellere initiale Ladezeit, gleicher Content.

Pro-Tip — Der schnelle Weg
Nutze den Intersection Observer fuer Custom Lazy Loading. Er ist performanter als Scroll-Event-Listener weil er asynchron arbeitet und den Main Thread nicht blockiert.
Seite 1
1

Bilder lazy laden

Das loading Attribut auf img-Tags ist der einfachste Weg. Browser laden das Bild erst wenn es fast im Viewport ist. Next.js Image macht das automatisch.

<!-- Natives Lazy Loading -->
<img src="foto.jpg" loading="lazy" alt="Foto" />


// Next.js (automatisch lazy)
import Image from 'next/image';
<Image src="/foto.jpg" width={800} height={600} alt="Foto" />
2

Intersection Observer nutzen

Fuer Custom-Elemente wie Animationen oder Datenladen nutze den Intersection Observer. Er feuert ein Callback wenn ein Element sichtbar wird.

function useLazyLoad(ref: RefObject<HTMLElement>) {
 const [isVisible, setIsVisible] = useState(false);


 useEffect(() => {
 const observer = new IntersectionObserver(
 ([entry]) => { if (entry.isIntersecting) setIsVisible(true); },
 { threshold: 0.1 }
 );
 if (ref.current) observer.observe(ref.current);
 return () => observer.disconnect();
 }, []);


 return isVisible;
}
3

Komponenten lazy laden

Mit React.lazy und Suspense lad schwere Komponenten erst wenn sie gerendert werden. Perfekt fuer Tabs, Modals oder unterhalb-des-Folds Inhalte.

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


function Post() {
 return (
 <div>
 <Article />
 <Suspense fallback={<Skeleton />}>
 <Comments />
 </Suspense>
 </div>
 );
}
4

Infinite Scroll mit Lazy Loading

Lade neue Daten erst wenn der Nutzer ans Ende der Liste scrollt. Kombination aus Intersection Observer und Pagination.

const loadMoreRef = useRef<HTMLDivElement>(null);
const isNearEnd = useLazyLoad(loadMoreRef);


useEffect(() => {
 if (isNearEnd) fetchNextPage();
}, [isNearEnd]);


return (
 <div>
 {items.map(item => <Card key={item.id} {...item} />)}
 <div ref={loadMoreRef} />
 </div>
);
5

Above the Fold priorisieren

Alles was der Nutzer sofort sieht sollte NICHT lazy geladen werden. Setze priority auf Hero-Bilder und lade kritischen Content sofort.

Seite 2
Warum das funktioniert
  • Initial weniger Daten bedeutet schnellere Time to Interactive
  • Nutzer sehen sofort Inhalte statt auf alles zu warten
  • Bandbreite wird gespart fuer Inhalte die nie angesehen werden
  • Intersection Observer ist performanter als Scroll Events
Tipps
  • Hero-Bilder und Above-the-Fold Inhalte nie lazy laden
  • Placeholder oder Skeleton waehrend des Ladens anzeigen
  • Intersection Observer rootMargin nutzen um frueher zu laden
  • Teste mit Slow 3G um das Ladeverhalten zu sehen
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen