Endstation Ladezeit: 3 Geheimtipps für ein optimales Ladeverhalten
Wie sollte das optimale Ladeverhalten einer Website ablaufen? Es muss nicht immer alles linear sein oder dem Zufall überlassen werden. Das Ladeverhalten lässt sich zur Steigerung der Conversion Rate und Optimierung der Ladezeit beeinflussen. In diesem Artikel gehen wir auf häufige Stolpersteine, Best Practices und Tipps zum idealen Ladeverhalten ein.
Über das Thema Ladezeitoptimierung haben wir in vergangenen Artikeln mit Hebel Nr. 1 – Reduktion und Hebel Nr. 2 – Minimierung bzw. Komprimierung von Daten – vor allem aus technischer Sicht – bereits berichtet. Das Werkzeug um die Ladezeit noch weiter zu verbessern und vor allem auch die User Experience zu steigern, ist das asynchrone Laden und verarbeiten von Inhalten. Heutzutage befindet es sich häufig in modernen Shops und Websites im Einsatz. Aber wie setzt man diese Technologie richtig ein?
Hebel Nr. 3 – Asynchrones Laden
Das asynchrone Laden von Website-Inhalten zählt zu den eher „subjektiven“ Performance-Optimierungen, mit dessen Einsatz nicht nur die Ladezeit reduziert sondern vor allem Inhalte gezielt ausgespielt werden können. Damit ermöglicht uns dieses Werkzeug, den Fokus auf gewisse Elemente zu lenken und den „Joy-of-Use“ zu verbessern. Es kann Einfluss auf die User Experience und letztlich die gesamte Customer Journey haben, was wiederum die Conversion Rate bzw. den Customer Lifetime Value erhöhen kann.
In diesem Artikel erwarten Sie folgende Inhalte:
Fangen wir vorne an.
Was ist asynchrones Laden?
Inhalte lassen sich parallel zur Seite laden und müssen nicht zwangsläufig mit ihr zeitgleich (synchron) verarbeitet werden.
Dabei beschleunigt dieses Verfahren überwiegend subjektiv, weil je nach Einsatz per se erstmal die gleiche Anzahl Inhalte geladen wird, deren Verarbeitungsgeschwindigkeit letztlich – in Abhängigkeit von Browser und Bandbreite – begrenzt ist.
In der Wirkung bedeutet dies, dass die Seite bereits „fertig“ geladen ist (kein Ladebalken mehr) aber im Hintergrund noch weitere Elemente geladen werden (z. B. Grafiken oder weitere Informationen). Die Seite wirkt dadurch schneller.
Wann, wie viel und ob überhaupt Inhalte parallel oder nachgelagert geladen werden, hängt von der Vorgehensweise ab und sollte von Fall zu Fall unterschieden werden. Hierbei entscheidet sich, ob tatsächlich die gleiche Anzahl Elemente geladen werden muss oder beim Aufruf der Seite Ladezeit gespart werden kann.
Wie funktioniert asynchrones Laden?
Im Web-Umfeld wird asynchrones Laden mit AJAX ermöglicht (Asynchronous JavaScript and XML). Der Name verrät bereits: es handelt sich hierbei um JavaScript, welches schon mal per Definition zur Verfügung stehen muss.
Im Prinzip werden überall dort, wo sonst Inhalte im HTML Dokument eingebunden werden, diese alternativ per JavaScript in einem gesonderten Ablauf verarbeitet.
Wann, entscheidet nicht der Browser aufgrund der Position im Quellcode, sondern wird frei durch JavaScript definiert (z. B. durch Events wie MouseOver, Scrolling oder nach Storyboard). Ansonsten arbeitet der Browser das Dokument sequentiell ab – also einfach von oben nach unten.
Dabei sorgen idealerweise Platzhalter dafür, dass an dieser Stelle keine Lücke entsteht und Inhalte durch typische Ladeanimationen angekündigt werden.
Was sind die Vorteile / Nachteile von asynchronem Laden?
Der Vorteil dieses Verfahrens ist die Entkoppelung von Darstellung relevanter Inhalte und der vollständigen Anzeige und Nutzbarkeit der Website.
Mit anderen Worten: Der Nutzer erhält schneller ein Ergebnis und kann sich bereits ein Bild machen, obwohl noch nicht alles zur Verfügung steht. Dabei lässt sich beeinflussen, was der Nutzer zuerst erhält (Priorisierung). Die Website reagiert agiler, weil früher mehr zu sehen ist und genutzt werden kann.
Außerdem lässt sich steuern, wann der Inhalt anzeigt wird. Dieser lässt sich optisch ansprechend darstellen, was den Joy-of-Use erhöhen kann.
Der Nachteil dieser Vorgehensweise ist erst mal die Voraussetzung, dass JavaScript zur Verfügung stehen muss. Obwohl das mittlerweile eigentlich selbstverständlich ist. In der Wirkung kann die Seite allgemein als „unruhig“ empfunden werden, weil sich zusätzlich zur Laufzeit evtl. zu viele andere Elemente ändern.
Aber auch der Webserver kann ggf. durch zu viele AJAX-Requests in seiner Leistung negativ beeinflusst werden. Außerdem gilt es, das Caching im Auge zu behalten, damit Inhalte nicht mehrfach geladen werden (z. B. nach einem Seitenwechsel).
Soweit zum technischen Hintergrund. Der weit spannendere Teil ist der richtige Einsatz dieser Möglichkeiten. Hierbei werden die meisten Fehler gemacht und das größte Potenzial verschenkt.
Wann und wie sollte AJAX eingesetzt werden? Was sollte überhaupt geladen werden?
-
Der Ablauf generell
Es sollten nur Inhalte nachgeladen werden,
- die nicht immer oder nur selten gebraucht werden (z. B. Produktdetails),
- die längere Ladezeit haben (z. B. größere Bilder, ext. Webservice) oder
- die erst sehr spät benötigt werden (z. B. am Seitenende, im unsichtbaren Bereich).
Um den Joy-of-Use die Usability zu verbessern, sollten die geladenen Elemente mit einer Ladeanimation versehen werden und nach dem erfolgreichen Laden nicht einfach in die Seite eingefügt, sondern möglichst weich eingeblendet werden. Das zeigt auch der Vergleich von svpply und hardgraft im weiteren Verlauf.
Hier gilt es etwas Fingerspitzengefühl zu zeigen: Zu viele und zu langsame Animationen sind kontraproduktiv.
Tipp:
Für einen FadeIn haben sich – unserer Erfahrung nach – Werte zwischen 250 – 450ms und für den FadeOut 150 – 250ms als passend herausgestellt.Beispiel mit FadingBeispiel ohne
-
Nr. 1: Lazy Loading
Das Lazy Loading ist in diesem Zusammenhang der gängigste Einsatz von AJAX und wird auch als Deferred Loading oder Delayed Loading bezeichnet. Im Prinzip handelt es sich dabei um „Nachladen bei Bedarf“, und ist damit das Gegenteil von Eager Loading bzw. Immediate Loading. Mit Lazy Loading ist es beispielsweise möglich nur den Viewport (sichtbarer Bereich) zu laden, und der Rest erst, wenn er gebraucht wird. Was grundsätzlich sinnvoll erscheint. Häufig findet dieses Verfahren beim Infinite Scrolling (Seite lädt durch Scrollen immer mehr Inhalt) Einsatz, was in der Vergangenheit im eCommerce wenig sinnvoll eingesetzt wurde und heute nur noch selten zu finden ist.
Im Wesentlichen hat Lazy Loading Vorteile bei der Ladezeit. Beispiel: Produktbilder auf einer Kategorie- oder Suchergebnisseite werden erst geladen, wenn der Kunde tatsächlich die Absicht zeigt, sich für diese zu interessieren (durch runter scrollen). Klickt er sich nur durch die Kategorien, werden keine unsichtbaren Inhalte geladen und somit Ladezeit eingespart. Oder aber Inhalte, die nur selten gebraucht werden oder sich hinter einem unsichtbaren Element befinden, lassen sich so nachladen (z. B. Recommendations, Kundenmeinungen etc.). Auch bei Longcopy-Landingpages macht es Sinn, gerade beim Einsatz von Scrollytelling.
Ein wesentlicher Nachteil dieser Vorgehensweise, vor allem in Bezug auf Infinite Scrolling kann z. B. der entstehende Eindruck einer „niemals endenden oder fertigen Seite sein“. Es wirkt fast schon „frustrierend“, dass man einfach nicht das Seitenende zu erreichen scheint. Die Orientierung auf der Seite kann darunter leiden, wenn zum Beispiel zwischen Produkt- und Kategorieseite gewechselt wird und jedes mal wieder bis zum entsprechenden Produkt gescrollt werden oder die Seite sich erst immer wieder Stück für Stück aufbauen muss.
Generell kann dieses Verfahren den Nachteil haben, dass je nachdem welche Inhalte nachgeladen werden, dies zu einer Verzögerung führt (vom Auslösen des Ladevorgangs bis zum Ergebnis).
Mit anderen Worten: Das was beim ursprünglichen Laden der Seite eingespart wurde, muss evtl. im Verlauf nach Bedarf trotzdem geladen werden. Das Gesamtvolumen und die Zeitspanne bis letztlich alle Informationen zur Verfügung stehen, bleibt somit unverändert und verschiebt sich lediglich. Dies bezieht sich auf die eingangs erwähnte „subjektive“ Verbesserung der Ladezeit.
Tipp:
Gerade bei Listenseiten, wie z. B. Kategorien, nicht zu lange Seiten erzeugen und idealerweise die Position merken, damit Orientierung und Navigation erhalten bleiben. Es sollte eine definierte Anzahl an Elementen pro Seite und eine entsprechende Paginierung bestehen bleiben. Bei Longcopy-Landingpages sollte eine Navigation erkennbar und Sprungmarken zur Verfügung stehen. -
Nr. 2: Priorisiertes Laden
Das priorisierte Laden von Inhalten gibt die Reihenfolge vor, in welcher Inhalte geladen und/oder angezeigt werden. Damit hat es vor allem Einfluss auf die User Experience und den Joy-of-Use. Bei dieser Vorgehensweise lässt sich am besten beeinflussen, welche Inhalte der Kunde idealerweise wahrnehmen sollte. Zum Beispiel lässt sich der Fokus auf USPs, die Call-to-Action oder besondere Aktionen lenken, in dem man diese leicht verzögert einblendet. Pro Seitentyp kann in einer Art Storyboard festgelegt werden, in welcher Reihenfolge und Darstellung die Inhalte angezeigt werden sollen. Letztlich hat die Priorisierung aber auch Einfluss auf die „gefühlte“ Ladezeit, weil z. B. sofort sichtbare Elemente des Viewports vor unsichtbaren darunter geladen werden können.
Der große Vorteil dieser Methode ist die Aufmerksamkeit beeinflussen zu können. Als Nachteil kann man Gefahr laufen, dass auch hier die Seite zu unruhig wirkt oder sogar als langsamer wahrgenommen wird, weil sich Inhalte im Verlauf des Ladevorgangs noch aufbauen.
Tipp:
Es muss bei dieser Vorgehensweise nicht zwangsläufig der Inhalt asynchron geladen werden. Auch bestehende Inhalte lassen sich gezielt anzeigen, um hier lediglich den Fokus zu setzen. -
Nr. 3: Vorhersagen von Inhalten
Das Vorhersagen von Inhalten (Prediction) ist immer dann sinnvoll, wenn man sich in einem linearen Prozess befindet oder mit großer Wahrscheinlichkeit davon ausgehen kann, was als nächstes folgt.
Idealerweise werden dabei im Leerlauf – also wenn aktuell nichts geladen wird – schon Inhalte einer Folgeseite geladen, damit diese dann schneller zur Verfügung stehen. Damit hat dieses Verfahren vor allem Einfluss auf die Ladezeit und ist im Prinzip das Gegenteil von Lazy Loading. Hier werden die Inhalte nicht nach Bedarf sondern auf Verdacht geladen, also vor- und nicht nachgeladen. Rein technisch sind die beiden Verfahren jedoch absolut identisch.
Praxisbeispiele sind hier z. B. der Checkout und der Registrierungs- bzw. Antragsprozess. Grundsätzlich ist es aber auch relativ wahrscheinlich, dass nach dem Besuch einer Kategorieseite eine Produktseite aufgerufen wird, und hierbei ggf. schon Elemente, die auf allen Produktseiten vorhanden sind, vorgeladen werden können. Aber auch auf einer Produktseite das Warenkorb-Overlay vorzuladen kann sinnvoll sein.
Der Vorteil dieses Verfahrens ist, Leerlauf sinnvoll zu nutzen, so dass Inhalte – wenn sie benötigt werden – direkt zur Verfügung stehen. Das führt gleichzeitig zum Nachteil, dass ggf. Inhalte geladen werden, die nicht gebraucht werden. Dies kann leicht der Fall sein, wenn der Nutzer beispielsweise früher abbricht oder einen anderen Pfad wählt. Hier gilt es abzuwägen, ob sich Prediction lohnt – jedoch mit der Gefahr – evtl. unnötigen Traffic auf dem Server erzeugt zu haben.
Tipp:
Ein Blick in die Webanalyse kann helfen, einen häufigen Nutzungspfad zu erkennen, um so Einsparpotenzial zu erkennen.
Best Practices im eCommerce
Die genannten Methoden bieten eine Reihe von Möglichkeiten, um Inhalte bei Bedarf vor- oder nachzuladen. Die gängigsten Anwendungsfälle aus dem Alltag haben wir in folgender Tabelle zusammengefasst und lässt sich hier als PDF herunterladen:
Fazit
Viele Anbieter überlassen das Ladeverhalten ihrer Websites dem Browser und damit dem Zufall. Sie verschenken hier wichtiges Potenzial. Aber auch wenn AJAX eingesetzt wird, geschieht dies unter Umständen an der falschen Stelle oder ohne Gefühl für die User Experience.
Das Werkzeug „asynchrones Laden und verarbeiten von Inhalten“ bietet immer noch viele Möglichkeiten, um den Joy-of-Use und die Ladezeit zu optimieren – auch wenn die Technologie bereits über ein Jahrzehnt verfügbar ist. Gerade mit der richtigen Priorisierung oder Vorhersage lässt sich Ladezeit einsparen und die User Experience verbessern. Der gezielte Einsatz von Lazy Loading rundet das Ergebnis ab.
Ähnliche Artikel
- So verbrennt Ihr HTML Code >1 Mio € Umsatz pro Jahr
- So verbrennen Ihre Website-Grafiken >1 Mio € Umsatz pro Jahr
- Mehr Joy-of-Use im eCommerce
8 Kommentare
Lothar Seifert,
Hallo Herr Brückmann, vielen Dank für diesen guten Artikel. Die Entwicklung geht immer weiter, wie man hier sehen kann. Eine Frage habe ich noch dazu: Kann man nicht einfach per PHP an einer ausgesuchten Stelle einen Stopp einbauen, so das der Bereich, der für das Durchblättern einzelner Seiten nicht notwendig ist, erst verzögert geladen wird? Entscheidend wäre hier nur die Frage, wie lange der Stopp dauern sollte.
Viele Grüße aus der Oberlausitz
Manuel Brückmann,
Hallo Herr Seifert,
Danke für Ihr Feedback. Im Sinne der Seitenladezeit ist eine Verzögerung im Backend nicht empfehlenswert. Dieses sollte immer so schnell wie möglich die Inhalte zur Verfügung stellen. Zumal ich mir recht sicher bin, dass es nicht möglich ist, teile des ausführbaren Codes in PHP zu pausieren, ohne dass auch alles andere still steht. Sinnvoller ist hier, wenn es Ihnen an dieser Stelle um die Fokussierung auf ein Element geht, dieses lediglich im Frontend verzögert einzublenden (JavaScript).
Online Surferin,
Hallo Herr Brückmann,
danke für den sehr interessanten Artikel. Würde es noch eine andere Möglichkeit geben die CSS Datei auszugliedern oder ist Ajax die gängigste Vorgehensweise?
Schöne Grüße
Manuel Brückmann,
Liebe Online Surferin,
ich kann noch nicht ganz nachvollziehen, warum Sie CSS per AJAX parallel zur Seite laden wollen. Sollte es Ihnen hierbei um das Vorladen für die spätere Verwendung gehen, dann ja. Falls nicht sehe ich darin kein Sinn, weil CSS in der Regel sofort benötigt wird, um die Inhalte zu formatieren. Ohne CSS – bzw. verzögertes CSS – führt lediglich dazu, dass sich die Darstellung im Browser von Standard zu Formatiert ändert, was dem Joy-of-Use nicht besonders zuträglich ist. Es macht eigentlich nur Sinn, Inhalte die nicht sofort benötigt werden per AJAX zu laden, z. B. JavaScript-Bibliotheken, -Plugins etc.
Peter,
Hallo,
ich habe eine Frage zu “Nr. 3: Vorhersagen von Inhalten”
Ich laß dass das vorladen per prefetching nur der Firefox unterstützt und Chrome sein eigenes Süppchen mit prerender kocht.
Inwieweit ist das vorladen in der Praxis umsetzbar?
Manuel Brückmann,
Hallo Peter,
der einfachste und praktikabelste Weg ist tatsächlich “zu Fuß”. Eine Möglichkeit ist z. B. nach dem fertigen Laden der Seite (window.load) im Fall eines Leerlaufs (es wird aktuell nichts anderes geladen) bereits Inhalte (z. B. Assets der Folgeseite(n) ) in einem Cue vorzuladen. So was lässt sich per AJAX relativ einfach realisieren. Der Browser cached entsprechend (Caching- und Expire-Header vorausgesetzt) die Dateien, so dass diese auf den Folgeseiten bereits verfügbar sind.
Marc H.,
Hallo,
danke für die technische, aber gut verständliche Erklärung von asynchronem Laden. Mir ist beim Surfen auf diversen Websites aufgefallen (insbesondere auf Mobilgeräten), dass Content, wie Text etc. bereits geladen ist und ich anfangen kann zu lesen, obwohl die Seite weiter lädt.
Leider verschiebt sich anschließend der Inhalt, da andere Elemente mit Verzögerung sich “einschieben”. Ist das ein Beispiel des “unruhigen Verhaltens”, wie du es genannt hast? Oder vermeidet die Abhandlung über AJAX solche eher nicht wünschenswerten Verhaltensweisen.
Viele Grüsse!
Manuel Brückmann,
Hallo Marc,
danke für dein Feedback. Was du beschreibst ist in der Regel FOUC (Flash Of Unstyled Content). In diesem Fall ist das CSS (die Formatierung der Website) und die Grafiken noch nicht geladen. Während du die Seite lädst, kommen diese sukzessive dazu. Der Browser kennt – sofern man das nicht aktiv beeinflusst – die Größen, Abstände etc. nicht und kann deshalb nicht im Voraus mit entsprechenden “Platzhaltern” den Raum für die Inhalte freihalten. Durch diesen Umstand verschiebt sich dann alles sobald die Inhalte geladen sind.
Um deine Frage konkret zu beantworten:
Jein 😉 Das ist zwar unruhiges Verhalten, aber eher in Richtung “unkontrolliertes” Verhalten. Mit AJAX kann man kontrolliert Inhalte nachladen und den Vorgang aktiv steuern. Kleines Beispiel-Szenario:
Große Inhalte wie Bilder werden nicht direkt im Quellcode der Seite geladen, sondern deren Platz lediglich per CSS “freigehalten”. Sobald der Nutzer z. B. zur entsprechenden Stelle scrollt (oder automatisch) werden diese an die entsprechende Stelle per AJAX nachgeladen (und idealerweise eingeblendet). Dadurch ist das verhalten kontrolliert und wirkt subjektiv schneller.