Eine Seite mit vielen Bildern lädt beim ersten Aufruf alles auf einmal – auch das, was erst sichtbar wird, wenn der Nutzer weit nach unten scrollt. Das kostet Ladezeit, Datenvolumen und Nerven. Lazy Loading dreht die Logik um: Bilder und manchmal andere Medien werden erst geladen, wenn sie in den sichtbaren Bereich (Viewport) rücken oder kurz davor sind. Was der Nutzer nicht sieht, wird nicht geladen. So wird die Seite schneller, und der erste Eindruck verbessert sich.
Technisch kann Lazy Loading über das loading="lazy"-Attribut bei Bildern umgesetzt werden – der Browser übernimmt dann die Entscheidung, wann nachgeladen wird. Alternativ nutzt man JavaScript, das prüft, ob ein Element in den Viewport kommt, und dann erst die Bild-URL setzt oder nachlädt. Bei langen Seiten mit vielen Bildern – Galerien, Blog-Übersichten, Shops – ist der Effekt oft deutlich spürbar: Die initiale Ladezeit sinkt, und die Seite wirkt reaktionsschneller.
Lazy Loading verbessert die Performance und schont die Ressourcen. Besonders auf mobilen Geräten mit begrenztem Datenvolumen und schwächeren Verbindungen zählt jedes Kilobyte. Suchmaschinen berücksichtigen Ladezeiten im Ranking; wer hier optimiert, profitiert doppelt: bessere Nutzererfahrung und bessere Sichtbarkeit.
Wichtig: Das erste Bild oder die ersten Inhalte above the fold sollten nicht lazy geladen werden – sie müssen sofort erscheinen, sonst leidet der erste Eindruck und unter Umständen auch das Core Web Vital LCP (Largest Contentful Paint). Alles, was unterhalb des sichtbaren Bereichs liegt, ist dagegen ein Kandidat für Lazy Loading.
Wer Lazy Loading gezielt einsetzt, macht aus einer schweren Seite eine leichte – ohne auf Bilder oder Medien zu verzichten. So bleibt die Seite schnell, und der Nutzer bekommt nur das geladen, was er gerade braucht.