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 […]

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

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.

    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:

    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 Lacy Loading rundet das Ergebnis ab.

    Ähnliche Artikel

    Original gefunden auf konversionskraft.de: Endstation Ladezeit: 3 Geheimtipps für ein optimales Ladeverhalten

    Advertisements

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s