Eine schnellere Website mit Lazy Loading

Lazy Loading bezeichnet ganz allgemein eine Technik in der Software-Entwicklung um Daten erst bei Bedarf nachzuladen. Im Zusammenhang mit Websites  geht es darum, beispielsweise Bilder erst dann zu vom Server zu laden, wenn diese im sichtbaren Bereicht sind. Dadurch wird die Ladezeit von Websites reduziert.

Lazy Loading ist eine bewährte und häufig eingesetzte Methode um die Geschwindigkeit von Websites zu erhöhen. Wie funktioniert Lazy Loading? Warum wird eine Website dadurch schneller?  Wie verwendet man Lazy Loading in WordPress? Die Antworten soll dieser Artikel liefern. Es gibt aber auch ein paar Dinge, die vor dem Einsatz von Lazy Loading zu beachten sind. Andernfalls würden Probleme in Bezug auf die Ladezeit einer Website nur etwas beschönigt aber nicht gelöst. Das wäre kein sinnvoller Weg. Daher beschreibe ich in diesem Artikel auch die nötigen Vorarbeiten für einen effektiven Einsatz von Lazy Loading.

Generell werden beim „Lazy Loading“ – also beim „faulen Laden“ – Daten erst dann aus der Datenquelle abgerufen, wenn sie benötigt werden. Bei einer Kundenverwaltung könnte das zum Beispiel so aussehen, dass zuerst einmal nur die Namen der Kunden geladen und angezeigt werden. Erst wenn ein Kunde angeklickt wird um die Detaildaten anzuzeigen werden alle restlichen Daten des Kunden aus der Datenbank geladen. Das Gegenteil davon wäre das „Eager Loading“, bei dem alle Daten, die benötigt werden könnten, sofort geladen werden. Welches der beiden Modelle sinnvoller ist lässt sich nicht generell sagen. Die Entscheidung ist abhängig von der Anwendung und der Komplexität der Daten zu treffen.

Der Vorteil des Lazy Loading liegt darin, dass zu Beginn weniger Daten geladen werden müssen und die Anzeige daher schneller erfolgt. Der Vorteil des Eager Loading liegt in der Effizienz und einem möglicherweise beschleunigten Arbeitsablauf nachdem die Daten einmal geladen sind. Beim Webdesign hat Lazy Loading eine etwas speziellere Bedeutung. In der Regel ist damit das Nachladen eingebundener Objekte auf einer Seite gemeint. Das automatische Nachladen von Inhalten beim Scrollen wird hingegen meist als „Infinite Scroll“ bezeichnet.

Bei den eingebundenen Objekten handelt es sich um Teile einer Webseite, die nicht direkt im HTML-Code vorhanden sind, sondern als eigene Datei vom Server abgerufen werden müssen. Das sind beispielsweise Bilder, aber auch Videos und andere Objekte gehören dazu. Da Bilder den häufigsten Einsatzbereich darstellen gehe ich nur darauf näher ein. Die Aussagen treffen vom Prinzip her aber auch auf alle anderen Objekte auf einer Seite zu.

Wie schnell muss eine Website eigentlich sein?

Niemand wartet gerne auf das Laden einer Webseite. Welche Ladezeit noch akzeptabel ist und ab wann potenzielle Besucher eine Seite schließen bevor sie vollständig geladen ist, ist leider nicht allgemein gültig zu beantworten. Das hängt stark davon ab um was für eine Website es sich handelt. Bei einem Webshop mit einem großen Angebot wird man eher bereit sein etwas länger zu warten.

Daher ist es auch nicht verwunderlich, dass verschiedene Studien und Umfragen zu teilweise recht unterschiedlichen Ergebnissen kommen, die sich nur schwer auf die eigene Website umlegen lassen. Auch die Ergebnisse von Messungen der tatsächlichen durchschnittlichen Ladezeiten von Websites kommen zu sehr unterschiedlichen Ergebnissen und sind leider wenig hilfreich. Ein häufig genannter Anhaltspunkt ist, dass es nicht wesentlich länger als drei Sekunden dauern sollte bis eine Website vollständig geladen ist. Das halte ich persönlich für einen guten Wert wobei natürlich gilt „je schneller, desto besser“.

Welchen Einfluss die #performance einer Website auf das Verhalten der Besucher hat ist schwer zu beziffern. Es ist schwer zu sagen, welches zusätzliche Potenzial eine Website durch eine zu lange Ladezeit verliert. Am leichtesten lässt sich das wohl in Geld ausdrücken. Bereits vor mehreren Jahren hat Amazon in einer Untersuchung herausgefunden, dass jede Verzögerung der Ladezeit um 100 Millisekunden dem Unternehmen 1% Umsatzeinbußen beschert. Hochgerechnet würde das bedeuten, dass Amazon die Hälfte seines Umsatzes verlieren würde, wenn die Amazon-Website fünf Sekunden länger zum Laden benötigen würde. Diese eindrucksvolle Zahl sollte deutlich zeigen, wie wichtig die Ladezeit für eine Website ist.

Experiments at Amazon.com showed that every 100-ms increase in the page load time decreased sales by 1 percent

Wie macht man die eigene Website schneller?

Es gibt diverse Tools, mit denen sich verschiedene Faktoren, die Einfluss auf die Geschwindigkeit einer Website haben, messen lassen. Es ist ein häufiger Fehler, diesen Werten zu viel Aufmerksamkeit zu schenken. Diese Tools können durchaus wertvolle Hinweise liefern, wo noch Optimierungspotenzial besteht. Die grundlegenden Hausaufgaben sollten aber dann schon erledigt sind. Das einzige Kriterium, das die Besucher einer Website interessiert, ist die tatsächliche Ladezeit. Nicht ein nach technischen Aspekten berechneter Punktestand.

Anstatt zu viel Augenmerk auf diese Bewertung technischer Details zu legen ist zumindest für den Anfang der Blick auf die Ladezeit ausreichend. Ein gutes Tool zum Messen der Ladezeit ist Pingdom. Als Standort, von dem aus der Test durchgeführt wird, empfiehlt es sich, Stockholm auszuwählen. Für Websites im deutschsprachigen Raum wird die Ladezeit aus den USA oder aus Australien eher nicht interessant sein. Pingdom liefert eine ganze Menge an Informationen, am Anfang reicht aber wie erwähnt die Ladezeit als Kriterium. Der Test sollte mehrmals an unterschiedlichen Wochentagen und zu unterschiedlichen Uhrzeiten durchgeführt werden um einen guten Durchschnittswert zu ermitteln.

Es gibt eine ganze Menge an Parametern, an denen man drehen kann, um die Ladezeit einer Website zu steigern. Manches davon erfordert intensivere Beschäftigung mit dem Thema um sich das notwendige Wissen anzueignen und manches ist mit Kosten verbunden und deshalb vom Budget abhängig. Aber es gibt eine ganz einfache Maßnahme, die kein Spezialwissen erfordert und nichts kostet. Diese sollte bei der Geschwindigkeitsoptimierung der eigenen Website daher an erster Stelle stehen.

Dabei handelt es sich ganz schlicht und einfach um die Reduktion der zu übertragenden Datenmenge. Je weniger Daten über das Netz übertragen werden müssen umso schneller ist die Seite geladen. Klingt banal – und ist es auch. Umso erstaunlicher ist es, wie häufig dieser Punkt vernachlässigt wird. Diesen einfachen Grundsatz zu beachten ist das Fundament einer Seite, die schnell geladen wird.

Der erste Schritt, der auf dem Weg zu einer flotten Website zu machen ist, besteht immer darin, die Datenmenge so gering wie möglich zu halten. Ein schlankes, schnelles #theme auszuwählen steht dabei an erster Stelle. Danach folgt, dass nur so wenige Plugins aktiviert werden, wie notwendig sind. Und als nächstes geht es auch schon an die Bilder. Selbstverständlich bedeuten weniger Bilder automatisch weniger Datenmenge. Zugunsten der Geschwindigkeit ganz auf Bilder zu verzichten war vor einigen Jahren noch OK, heute ist das für die meisten Websites aber keine Option mehr. Davon abgesehen ist es auch nicht nötig. Die Anzahl der Bilder auf einer Seite auf ein vernünftiges Maß zu beschränken ist aber auf jeden Fall die sinnvollste aller Maßnahmen.

Bildgröße und Dateigröße

Mit der Bildgröße ist die Auflösung gemeint. Bilder sollten keine höhere Auflösung aufweisen als maximal für die Darstellung erforderlich ist. Gerade bei Fotos ist es ein häufiger Fehler, dass diese mit der vollen Auflösung, mit der sie von der Kamera kommen, auf den Server geladen werden. Bei den heutigen Kompaktkameras sind Auflösung von mindestens 12 Megapixel schon Standard. Ein Monitor mit Full HD Auflösung verfügt im Vergleich dazu über gut 2 Megapixel und ein 4K Monitor weist etwas über 8 Megapixel auf. Und dazu müsste das Bild schon über die gesamte Bildschirmfläche angezeigt werden.

Wenn es sich nicht gerade um die Website eines Fotografen oder eines Künstlers handelt, der seine Werke bestmöglich präsentieren möchte sind Bilder in solchen Auflösungen in der Regel nicht nötig. Gerade wenn gar keine Vollbildanzeige vorgesehen ist, ist das völlig unnötig. Zur Darstellung im Inhalt einer Seite sind Bildgrößen von unter 1 Megapixel häufig ausreichend. Um HiDPI-Displays zu unterstützen, die Fotos in 4-facher Auflösung darstellen, reichen meist etwa 3 Megapixel.

Liegt ein Bild in einer höheren Auflösung vor als maximal benötigt wird, so muss dennoch die gesamte Datenmenge an den Browser übertragen werden. Erst der Browser kümmert sich um die verkleinerte Darstellung. Die größere Datenmenge erhöht die Ladezeit und ist völlig sinnlos. Viele Themes benutzen für die Beitragsbilder eine verkleinerte Version. Hier kümmert sich WordPress um die Verkleinerung. Außerdem werden seit #wpversion 4.4 Responsive Images von WordPress unterstützt. Das bedeutet, dass für die Darstellung auf kleineren Bildschirmen wie zum Beispiel einem Smartphone ein Bild in einer niedrigeren Auflösung übertragen wird. Welche Auflösungen zur Verfügung stehen wird vom Theme bestimmt.

Um die verkleinerten Varianten der Bilder kümmert sich WordPress also selbst. Zu beachten ist deshalb immer die maximal benötigte Größe. In dieser Größe sollten Bilder vorliegen. Bilder mit höherer Auflösung erhöhen die Ladezeit unnötig und sollten deshalb vor dem #upload mit einem Grafikprogramm verkleinert werden.

Der zweite Faktor ist die Größe der Datei. Natürlich besteht ein Zusammenhang zwischen Auflösung und Dateigröße, dieser ist jedoch nicht linear. Das heißt, dass die Dateigröße eines Bildes bei doppelter Auflösung nicht unbedingt doppelt so groß ist. Der Grund dafür ist, dass die im Web gängigen Bildformate komprimiert sind. Für die Dateigröße spielt daher das richtige Dateiformat sowie die gewählte Kompression eine Rolle.

Als Faustregel gilt, dass für Grafiken das PNG-Format verwendet werden sollte und für Fotos das JPG-Format. Wird für ein Foto das PNG-Format verwendet, so führt dies zu einer wesentlich größeren Datei als bei Verwendung von JPG. Umgekehrt ist das nicht zwingend der Fall, dennoch ist PNG für Grafiken besser geeignet. Auf das vektorbasierte SVG-Format gehe ich an dieser Stelle bewusst nicht ein, weil für dieses andere Voraussetzungen gelten.

Darüber hinaus ist auch die Kompression einstellbar. Gerade bei Fotos lässt sich mit dem Qualitätsfaktor gut experimentieren. In vielen Programmen lässt sich die Qualität als Prozentwert einstellen. Geringere Qualität bedeutet dabei eine höhere Kompression und damit eine kleinere Datei. Je höher die Kompression, desto schlechter wird die Qualität des Fotos. Kleine Abstriche in der Qualität sind jedoch häufig kaum erkennbar und wirken sich positiv auf die Ladezeit aus.

Meiner persönlichen Erfahrung nach kann man die Kompression problemlos automatisiert optimieren lassen. Ein Online-Tool, das ich häufig verwende, ist TinyPNG. Einfach bis zu 20 Bilddateien auf einmal per Drag & Drop hochladen und gesammelt optimiert wieder herunterladen. Die Einsparungen bei den Dateigrößen sind teilweise erheblich und das ohne sichtbaren Verlust.

Alternativ kann man die Bilder auch von einem #plugin direkt beim Upload in die #mediathek optimieren lassen. Ich selbst verwende EWWW Image Optimizer, es gibt aber auch einige andere ähnliche Plugins. Mit über 1 Million aktiven Installationen ist das Plugin Smush Image Compression and Optimization noch beliebter und schneidet in Tests sogar noch etwas besser ab. Dabei werden die Bilder jedoch auf einen externen Server übertragen und dort optimiert. Im Gegensatz dazu verbleiben die Daten beim EWWW Image Optimizer immer am eigenen Server, was mir persönlich einfach sympatischer ist (wobei es auch hier die Möglichkeit gibt, einen externen Dienst zu nutzen).

Egal, wie gut ein Bild optimiert ist – noch besser für die Ladezeit ist es natürlich, wenn das Bild erst gar nicht übertragen werden muss. Und damit kommen wir nun zum Image Lazy Loading.

Image Lazy Loading

Beim Image Lazy Loading werden Bilder, die sich außerhalb des sichtbaren Bereichs befinden, nicht geladen. Damit reduziert sich die zu übertragende Datenmenge für Bilder, die derzeit nicht sichtbar sind, auf Null. Das Lazy Loading kann nicht durch den Server gesteuert werden, da der Server nicht „weiß“ welcher Bereich der Seite gerade im Browser des Besuchers sichtbar ist und welcher nicht. Lazy Loading benötigt also immer JavaScript Code, der im Browser ausgeführt wird.

Beim Einsatz von Lazy Loading werden erst einmal alle Bilder durch Platzhalter ersetzt. Danach werden laufend die Bilder nachgeladen, die durch Scrollen der Seite gerade in den sichtbaren Bereich kommen. Beim Aufruf der Seite müssen so nur die Bilder übertragen werden, die beim Anzeigen der Seite sichtbar sind. Dadurch wird die Datenmenge reduziert und das Laden der Seite beschleunigt.

Der Einsatz von Lazy Loading scheint also eine unverzichtbare Waffe im Kampf gegen lange Ladezeiten zu sein. Im Prinzip stimmt das auch – aber auch nicht immer. Ein unnötiger Einsatz von Lazy Loading kann auch einen negativen Effekt haben. Durch das Einbinden von zusätzlichem Code wird die Datenmenge, die übertragen werden muss, natürlich um die Größe dieses Codes erhöht. Die Einsparung durch Lazy Loading muss demnach größer sein, als das durch das Script selbst verursachte zusätzliche Volumen.

Wer auf seinen Seiten große Header-Bilder einsetzt und danach im restlichen Inhalt keine oder kaum Bilder verwendet, wird möglicherweise von Lazy Loading gar nicht profitieren, da das Header-Bild ja unabhängig davon, wie groß der Bildschirm oder das Browser-Fenster des Besuchers ist, beim Aufruf immer sichtbar ist und damit ohnehin in jedem Fall geladen werden muss. In solchen Fällen kann sich der zusätzliche JavaScript Code durchaus negativ auf die Ladezeit auswirken. Eine kurze Analyse der eigenen Website sowie ein Vorher- / Nachher-Vergleich ist daher unbedingt nötig.

Lazy Loading in WordPress

Lazy Loading auf der eigenen WordPress-Website einzusetzen ist Gott sei Dank keine Wissenschaft. Wie fast immer bei WordPress kann man unter mehreren Plugins wählen, die diese Technik aktivieren ohne dass man sich selbst darum kümmern müsste. Mein persönlicher Favorit ist das Plugin a3 Lazy Load.

a3 Lazy Load

Neben Bildern unterstützt das a3 Lazy Load Plugin auch das Lazy Loading von Videos und anderen eingebetteten Inhalten. Das Plugin ist zwar zumindest derzeit noch nicht auf Deutsch übersetzt, aber die Einstellungen sind auch so leicht durchschaubar und verständlich. Es lassen sich einige Einstellungen vornehmen, das Plugin sollte aber in den meisten Fällen mit den Standardeinstellungen tadellos funktionieren.

Um die Funktionsweise zu demonstrieren stellen die Entwickler eine Demo-Seite mit 1.000 Bildern zur Verfügung. Dank Lazy Loading werden – je nach Bildschirmgröße bzw. Größe des Browserfensters – nur ungefähr die ersten drei davon geladen. Die restlichen 997 werden erst bei Bedarf nachgeladen. Dass das einen immensen Vorteil bei der Ladezeit bedeutet, ist für jeden leicht vorstellbar.

Fazit

Der Ladezeit der eigenen Website ist unbedingt Beachtung zu schenken. Eine lange Ladezeit bewirkt, dass potenzielle Besucher die Geduld verlieren und abspringen, noch bevor die Seite angezeigt wird. Lazy Loading ist eine sehr gute Möglichkeit, um die Ladezeit von Webseiten zu minimieren. Mit einem der vorhandenen Lazy Loading Plugins ist der Einsatz in WordPress für jeden leicht zu realisieren. Trotzdem sollte Lazy Loading nicht einfach unüberlegt eingesetzt werden. Vorher gilt es, ein paar grundlegende Dinge zu beachten und nötigenfalls zu korrigieren um eine solide Basis für eine schnelle Website zu legen. Nur wenn diese Basis vorhanden ist kann die Sinnhaftigkeit des Einsatzes von Lazy Loading richtig bewertet werden. Wenn man dann feststellt, dass Lazy Loading auf der eigenen Website Sinn macht, ist es ein tolles Werkzeug um die Ladezeit sehr effektiv zu verringern.