Was ist Lazy Loading?

Kurz erklärt: Lazy Loading ist eine Technik, bei der Bilder, Videos oder Skripte erst geladen werden, wenn der Nutzer sie wirklich sieht – das spart Datenvolumen und beschleunigt den ersten Seitenaufbau spürbar.

Was wird typischerweise lazy geladen?

  • Bilder unterhalb des sichtbaren Bereichs (below the fold)
  • Eingebettete YouTube-/Vimeo-Videos
  • Tracking- und Analyse-Skripte (z. B. Heatmaps)
  • Karten (Google Maps, Mapbox)
  • Komplette React-Seitenkomponenten (Code-Splitting)

Wie wird Lazy Loading umgesetzt?

Bei Bildern reicht heute oft das HTML-Attribut loading="lazy". Für Skripte und Videos kommen Intersection Observer oder spezielle Lazy-Komponenten zum Einsatz. Auf React-Seiten lädt sich Code per dynamic import erst dann nach, wenn die jeweilige Route oder Sektion gebraucht wird.

Wo solltest Du Lazy Loading nicht einsetzen?

  • Beim Hero-Bild – das soll sofort sichtbar sein (LCP)
  • Bei kritischen CSS- und Schrift-Dateien
  • Bei Above-the-Fold-Inhalten generell

Praxis-Beispiel: Eine Coaching-Website hatte 14 große Testimonial-Fotos auf der Startseite. Beim ersten Aufruf wurden trotzdem alle geladen – fast 9 MB. Nach Lazy Loading lädt der erste Aufruf nur noch 0,8 MB; die restlichen Bilder erscheinen erst beim Scrollen. Mobile Ladezeit: von 5,4 s auf 1,3 s.

Warum für Coaches & Solopreneure relevant: Coaching-Websites leben von authentischen Bildern und Videos – aber ohne Lazy Loading werden genau diese Inhalte zur Bremse. Mit der richtigen Strategie bekommst Du beides: emotionale Tiefe und technische Leichtigkeit. Standard auf jeder meiner Websites.