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?

Asynchron vs. Synchron
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?

Klassisches Modell vs. Ajax-Modell

Quelle Wikipedia.

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?

Unnötiges AJAX bei Versace

Ein Beispiel für einen unnötigen Einsatz von AJAX zeigt Versace - über Geschmack lässt sich streiten... 😉 - Die Farben und Größen werden per AJAX nachgeladen, obwohl identische Daten bereits beim Laden der Seite vorhanden sind.

 

Unnötiges AJAX bei Terra-Reisen

Auch hier wird AJAX nicht sinnvoll eingesetzt: Bei jedem Eingabefeld wird der Wert per AJAX an den Server geschickt, was unnötigen Traffic erzeugt.

  • 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.

    Beispiel für eine Lazy Loading Kategorieseite mit Infinite Scrolling bei svpply.com. Die weiteren Produkte werden recht “hart” angezeigt.

    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.

    Kategorieansicht + Ladeverhalten - Testergebnis

    Eine Paginierung durch eine Infinite Scrolling Page mit Lazy Loading auszutauschen reicht nicht.

    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.

    Bei hardgraft.com werden die Produktbilder nicht einfach nur anzeigt, sondern sukzessive geladen und soft eingeblendet.

  • 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.

    Vorhersagen bei Xing

    Bei linearen Prozessen oder eingeschränkten Folgeseiten lassen sich Inhalte vorhersagen und vorladen.

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:
Beispiele für den Einsatz von asynchronem Laden im eCommerce

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

Weiterführende Links

  • Teilen
  • Send to Kindle
  • http://kKrft.ly/Vze
Manuel Brückmann Manuel Brückmann ist als Mitglied der Geschäftsleitung bei der Web Arts AG für den Bereich Technologie verantwortlich. Er beschäftigt sich neben der Beratung im Bereich Testing mit eCommerce-Entwicklung und -Optimierung. Folgen Sie ihm auf Twitter oder verlinken Sie sich auf Google+, XING oder LinkedIn.

Frage zum Artikel? Fragen Sie den Autor!


Please leave this field empty.

, , , , ,

10 Reaktionen auf  “Endstation Ladezeit: 3 Geheimtipps für ein optimales Ladeverhalten”

Kommentare

  1. Lothar Seifert 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

  2. Online Surferin 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

  3. Manuel Brückmann 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).

  4. Manuel Brückmann 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.

  5. Peter 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?

  6. Manuel Brückmann 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.

Trackbacks/Pingbacks

  1. […] dem Zufall überlassen, wie konversionsKRAFT in dieser Woche plausibel beschrieb. Im Beitrag „Endstation Ladezeit: 3 Geheimtipps für ein optimales Ladeverhalten“ von Manuel Brückmann wird der optimale Ablauf für das Ladeverhalten von Websites nicht nur […]

  2. […] zu optimieren und die Konversionsrate zu steigern? Dieser Frage geht ein umfangreicher Artikel auf konversionskraft.de diese Woche auf den […]

  3. […] 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 beeinflussen. Weiter… […]

  4. […] sollte das optimale Ladeverhalten einer Website ablaufen? Konversionskraft.de hat zu dieser Frage einen sehr lesenswerten Beitrag verfasst, in welchem drei Vorgehensweisen […]

Hinterlassen Sie einen Kommentar