Lazy Loading: Schnellere Seiten durch weniger Laden zu Beginn

Stellen Sie sich vor, Sie betreten ein Restaurant, und der Kellner bringt sofort jedes Gericht auf der Speisekarte auf einmal, nur für den Fall, dass Sie es vielleicht möchten. Der Tisch ächzt unter Tellern, die Sie nie bestellt haben, das Essen wird kalt, und Sie können nicht einmal das Eine finden, das Sie tatsächlich essen wollten. So oder ähnlich verhalten sich viele Webseiten standardmäßig: Sobald jemand ankommt, versucht der Browser, jedes Bild, jedes Video und jeden Inhaltsbrocken auf der gesamten Seite abzurufen, selbst die Teile, die weit unter dem Bereich vergraben sind, in den der Besucher jemals scrollen wird.

Lazy Loading ist der höfliche Kellner, der wartet, bis er gefragt wird. Anstatt alles auf einmal auf den Tisch zu kippen, serviert es jeden Teil der Seite nur dann, wenn der Besucher ihn gleich benötigt. In diesem Leitfaden erklären wir, was Lazy Loading eigentlich ist, warum es Seiten dramatisch schneller erscheinen lässt, wo es am meisten hilft und welche Handvoll Fehler Sie stillschweigend verletzen können, wenn Sie es ohne Nachdenken einschalten. Keine Programmierkenntnisse erforderlich.

Was Lazy Loading wirklich bedeutet

Wenn jemand eine Webseite öffnet, lädt der Browser die benötigten Zutaten herunter, um sie anzuzeigen: Text, Bilder, Videos, Schriftarten und kleine Dateien, die das Layout und Verhalten steuern. Standardmäßig ist der Browser eifrig. Er greift alles, was er auf der Seite finden kann, unabhängig davon, ob der Besucher es jemals sehen wird. Auf einer langen Seite mit Dutzenden von Bildern bedeutet das, dass viel heruntergeladen wird, bevor die Person den ersten Absatz bequem lesen kann.

Lazy Loading dreht diese Logik um. Der Seite wird gesagt: Lade dieses Bild, dieses Video oder diesen Abschnitt nur dann, wenn es kurz davor ist, auf dem Bildschirm des Besuchers zu erscheinen. Alles, was "above the fold" ist, also der Teil, der ohne Scrollen sichtbar ist, lädt sofort. Aber das schwere Material weiter unten wartet geduldig im Hintergrund, bis der Besucher dorthin scrollt. Für den Leser fühlt es sich nahtlos an, da der Inhalt genau dann erscheint, wenn er ihn erreicht.

Der Nutzen ist zweifach. Erstens wird die Seite viel schneller nutzbar, weil der Browser nicht mehr mit einem Berg von Dateien kämpft, die noch niemand angefordert hat. Zweitens lösen Besucher, die nach dem Lesen nur des oberen Teils der Seite gehen, niemals die Downloads aus, die sie ohnehin nie gesehen hätten, was Daten und Serveraufwand spart. Wenn sich Ihre Seiten bereits schleppend anfühlen, passt Lazy Loading natürlich zu den umfassenderen Taktiken in unserem Leitfaden zum Beschleunigen einer langsamen Website.

Eine kurze Analogie, die hängen bleibt

Stellen Sie sich einen Streaming-Dienst vor. Er lädt keinen ganzen Film auf Ihr Gerät herunter, bevor Sie auf Wiedergabe drücken können. Er puffert ein wenig vor dem, was Sie gerade sehen, gerade genug, um die Dinge reibungslos zu halten. Lazy Loading macht dasselbe für eine Webseite: Es hält gerade genug geladen, um dem Besucher voraus zu sein, und lässt den Rest nachholen, während er scrollt. Entscheidend ist, dass der Besucher sich der Maschinerie dahinter nie bewusst ist. Er erlebt einfach eine Seite, die sich schnell und reaktionsschnell anfühlt, und genau das ist der Punkt: Die beste Performance-Arbeit ist für die Menschen, die davon profitieren, unsichtbar.

Warum Eager Loading mehr schadet, als es aussieht

Es ist verlockend anzunehmen, dass das Laden von allem im Voraus harmlos ist, denn schließlich erhält der Besucher die ganze Seite irgendwann. Aber Geschwindigkeit ist nicht nur das Endergebnis. Es geht um das Erlebnis auf dem Weg, und Menschen sind weitaus weniger geduldig, als wir gerne zugeben. Untersuchungen zum Webverhalten zeigen immer wieder, dass mit zunehmender Zeit, bis eine Seite nutzbar wird, mehr Besucher aufgeben und gehen, bevor sie fertig ist.

Es gibt auch versteckte Kosten bei der Priorisierung der Arbeit durch Browser. Wenn ein Browser damit beschäftigt ist, ein Hero-Video herunterzuladen, das am unteren Rand der Seite versteckt ist, konkurriert dieser Aufwand mit den Dateien, die benötigt werden, um den oberen Teil der Seite sofort anzuzeigen. Der Besucher wartet am Ende auf Inhalte, die er möchte, während der Browser still und leise Inhalte abruft, die er möglicherweise nie erreicht. Lazy Loading beseitigt diesen Wettbewerb, indem es die wichtigsten Dinge zuerst behandelt.

Der mobile Aspekt

Der Fall für Lazy Loading ist auf Smartphones noch stärker. Mobile Verbindungen sind variabler, Geräte haben weniger Rechenleistung, und Daten können begrenzt oder teuer sein. Ein Telefon zu zwingen, eine ganze bildlastige Seite herunterzuladen, bevor irgendetwas nutzbar ist, ist ein Rezept für Frustration. Da Lazy Loading das schwere Material verzögert, entlastet es die anfängliche Last genau dort, wo es am wichtigsten ist. Wenn die meisten Ihrer Besucher über Smartphones kommen, lohnt es sich, dies zusammen mit unserem Artikel über mobile Performance und die schnelle Haltung Ihrer Website auf Telefonen zu lesen.

Was Sie Lazy laden können und was nicht

Lazy Loading ist keine Alles-oder-Nichts-Einstellung. Die Kunst besteht darin, zu entscheiden, was verzögert und was sofort geladen werden soll. Wenn Sie dieses Gleichgewicht richtig hinbekommen, fühlt sich die Seite sofort an. Wenn Sie es falsch machen, können Sie versehentlich genau das verlangsamen, was der Besucher sehen wollte.

Die goldene Regel ist einfach: Alles, was der Besucher sofort beim Öffnen der Seite sieht, sollte sofort geladen werden, und alles andere kann warten. Die meisten modernen Website-Plattformen und Content-Systeme bieten Lazy Loading heute als integrierte Option oder als Ein-Klick-Einstellung an, sodass Sie selten selbst Code anfassen müssen.

Lazy Loading und Core Web Vitals

Sie haben vielleicht schon von den Core Web Vitals gehört, einer Reihe von Messgrößen, die beliebte Suchmaschinen verwenden, um zu beurteilen, wie gut sich eine Seite anfühlt. Sie achten darauf, wie schnell der Hauptinhalt erscheint, wie schnell die Seite auf Taps und Klicks reagiert und ob Dinge während des Ladens unerwartet herumspringen. Lazy Loading, richtig gemacht, kann bei ersterem helfen, da das Verzögern unnötiger Downloads dazu führt, dass der wichtige Inhalt schneller angezeigt wird.

Es gibt jedoch einen Haken, den es zu verstehen gilt. Einer der Vitals bestraft Seiten, bei denen sich der Inhalt während des Ladens verschiebt, der ärgerliche Moment, in dem Sie auf eine Schaltfläche tippen möchten und ein Bild diese plötzlich nach unten drückt. Wenn lazy-geladene Bilder ihre Abmessungen nicht im Voraus reserviert haben, können sie genau diese Art von Sprung verursachen. Die Lösung besteht darin, dem Browser mitzuteilen, wie viel Platz jedes Bild vor seiner Ankunft einnehmen wird, damit das Layout stabil bleibt. Wir behandeln das größere Bild in unserem Durchgang zu Website-Geschwindigkeit und Core Web Vitals.

Die häufigsten Fehler, die Sie vermeiden sollten

Lazy Loading ist eine dieser seltenen Verbesserungen, die größtenteils Vorteile bietet, aber ein paar Fehltritte können den Nutzen zunichtemachen. Der erste, wie erwähnt, ist das Lazy Loading des Hero-Bildes ganz oben auf der Seite. Da es das Erste ist, was ein Besucher sieht, lässt eine Verzögerung die gesamte Seite langsamer und nicht schneller erscheinen. Laden Sie dieses immer eifrig.

Der zweite Fehler ist das Vergessen, Platz für verzögerte Bilder zu reservieren, was dazu führt, dass der Inhalt ruckelt, wenn jedes Bild erscheint. Der dritte Fehler ist das Übertreiben: Lazy Loading so aggressiv anzuwenden, dass Bilder erst in dem Moment heruntergeladen werden, in dem sie auf dem Bildschirm erscheinen, was eine sichtbare Lücke hinterlässt, wenn der Besucher scrollt. Das Ziel ist es, etwas vor dem Besucher mit dem Laden zu beginnen, damit der Inhalt bereit ist, kurz bevor er ihn erreicht, nicht danach.

Wie dies in die laufende Wartung passt

Geschwindigkeit ist nichts, was man einmal behebt und dann vergisst. Seiten wachsen im Laufe der Zeit, wenn neue Bilder, Banner und eingebettete Inhalte hinzugefügt werden, und was letztes Jahr schnell war, kann still und leise träge werden. Lazy Loading ist eines von mehreren Werkzeugen, das neben gutem Bildmanagement, sinnvollem Caching und gegebenenfalls einem Content Delivery Network eingesetzt wird. Um die Dinge langfristig scharf zu halten, lohnt es sich, Geschwindigkeitsprüfungen in Ihre Routine einzubauen, wie wir in unserem Leitfaden zum Erhalt der Website-Geschwindigkeit über die Zeit beschreiben.

Eine kurze Geschichte zweier Produktseiten

Um all dies zu konkretisieren, stellen Sie sich zwei nahezu identische Online-Shops vor, die dieselben Waren verkaufen. Beide haben lange Produktseiten voller Fotos, Kundenrezensionen, verwandter Artikel und ein Video am unteren Ende. Der erste Shop lädt alles, sobald ein Besucher ankommt. Bei einer schnellen Büroanbindung scheint das in Ordnung zu sein, aber auf einem Telefon mit lückenhaftem Empfang in einer Warteschlange starrt der Besucher auf eine halbfertige Seite, tippt ungeduldig und gibt auf. Der Verkauf ist verloren, bevor das Produkt überhaupt gesehen wurde.

Der zweite Shop lädt alles unterhalb des ersten Bildschirmausschnitts lazy. Das Hauptproduktfoto und der Kaufbutton erscheinen fast sofort, da der Browser nicht durch die Dutzende von Bildern und das Video weit unten abgelenkt wird. Der Besucher sieht, wonach er gesucht hat, scrollt in seinem eigenen Tempo, und der Rest des Inhalts erscheint leise kurz vor ihm. Dieselben Produkte, dieselben Fotos, dasselbe Video, aber ein völlig anderes Erlebnis, das ausschließlich durch die Reihenfolge bestimmt wird, in der die Dinge geladen werden. Das ist die leise Kraft, Dinge aufzuschieben, die noch nicht benötigt werden, und deshalb zahlt sich diese einzelne Technik so oft mehrfach aus.

Wie man erkennt, ob es funktioniert

Sie brauchen keine speziellen Tools, um den Unterschied zu spüren, obwohl diese helfen. Der einfachste Test ist, eine lange Seite auf Ihrer Website zu öffnen und zu beobachten, wie sie sich beim Scrollen verhält. Wenn Lazy Loading gut funktioniert, sollte der obere Bereich der Seite schnell erscheinen, und Bilder weiter unten sollten sanft eingeblendet werden, sobald Sie sie erreichen, ohne lange leere Lücken und ohne dass das Layout springt.

Für eine präzisere Messung zeigen Ihnen kostenlose Tools zur Seiten-Geschwindigkeitstests, wie viel der Browser herunterladen musste, bevor die Seite nutzbar wurde, und ob große Bilder unnötig früh abgerufen wurden. Kombinieren Sie diese Überprüfungen mit einer umfassenderen Überprüfung mithilfe unseres Website-Gesundheitsaudit-Leitfadens, und Sie werden eine klare, wiederholbare Möglichkeit haben, die Verbesserung zu bestätigen. Wenn Sie es vorziehen, dass jemand die technische Seite von Anfang bis Ende übernimmt, können Sie uns jederzeit kontaktieren.

Fazit

Lazy Loading ist eine der wertvollsten und risikoärmsten Geschwindigkeitsverbesserungen, die fast jede Website nutzen kann. Es funktioniert, indem es nur das lädt, was der Besucher braucht, wenn er es braucht, anstatt jeden dazu zu zwingen, eine ganze Seite herunterzuladen, die er möglicherweise nie zu Ende liest. Das Ergebnis sind Seiten, die sich schneller, leichter und freundlicher für Menschen mit langsameren Verbindungen anfühlen, mit positiven Auswirkungen auf die Sichtbarkeit in Suchmaschinen und auf die einfache Tatsache, dass Besucher, die nicht warten müssen, viel wahrscheinlicher bleiben.

Das Beste daran ist, dass Sie selten etwas davon selbst erstellen müssen. Die meisten modernen Plattformen bieten es als eine Einstellung an, die Sie aktivieren können. Die Kunst liegt nicht in der Technologie, sondern im Urteilsvermögen: Laden Sie die wichtigen Dinge sofort, verschieben Sie den Rest, reservieren Sie Platz, damit nichts springt, und überprüfen Sie das Ergebnis. Tun Sie das, und Ihre Besucher werden eine schnellere Seite genießen, ohne jemals zu wissen, warum.

Häufig gestellte Fragen

Referenzen

1. HTTP Archive. "Web Almanac: Page Weight." almanac.httparchive.org.
2. Google. "Browser-level image lazy loading and Core Web Vitals." web.dev.
3. Mozilla. "Lazy loading." developer.mozilla.org.