« Zurück zum Magazine

Gefühlte vs. tatsächliche Ladezeit: So schaffst Du die Illusion einer schnellen Webseite

Zwei, maximal drei Sekunden sollte eine Webseite laden, um eine annehmbare User Experience zu erzielen. Legt man Erkenntnisse der Wahrnehmungspsychologie zugrunde, hat eine Webseite im Idealfall eine Ladezeit von unter einer Sekunde.

Doch wichtiger als die Tatsache, wie lange eine Webseite technisch zum Laden benötigt ist es, wie schnell der Nutzer die Webseite empfindet. Hier erfährst Du den Unterschied zwischen gefühlter und tatsächlicher Ladezeit, wie Menschen Zeit wahrnehmen und wie Du die subjektiv empfundene Ladezeit Deiner Webseite verbessern kannst.

Gefühlte vs. tatsächliche Ladezeit

Der Faktor Zeit kann aus objektiver und psychologischer Sicht betrachtet werden. Die Zeit, die Du mit der Stoppuhr messen kannst, ist die objektive Zeit. Die Optimierung der objektiv messbaren Ladezeit einer Webseite hat allerdings technologische und finanzielle Grenzen. Aufgabe von Entwicklern und Webdesignern ist es daher, die Seite so zu gestalten, dass sie vom Nutzer subjektiv als schneller wahrgenommen wird, als sie tatsächlich ist.

Eine Analogie aus dem Alltag hilft, den Unterschied zwischen beiden Konzepten zu veranschaulichen.

Vor vielen Jahren investierte die Firma Eurostar, die London und Paris mit ihren Schnellzügen verbindet, viele Milliarden Pfund, um die Reisezeit zwischen London und Paris um eine gute Viertelstunde zu reduzieren. Damit, so dachte man, würde man den Kunden einen Gefallen tun.

In einem TED-Talk gab Rory Sutherland damals zu bedenken, dass es vielleicht klüger gewesen wäre, die Fahrt für die Reisenden angenehmer zu gestalten, anstatt eine unvorstellbar hohe Summe für eine relativ geringe Verkürzung der Fahrtzeit auszugeben.

So hätte man beispielsweise für einen Bruchteil der Kosten die Züge mit WLAN ausstatten und damit das Fahrerlebnis, die User Experience, deutlich steigern und die gefühlte Fahrtzeit spürbar senken können. Denn die Fahrtzeitverkürzung wurde von den Reisenden kaum wahrgenommen.

Dieser Fehler, der bei Eurostar gemacht wurde, passiert auch bei Webseiten häufig. Man doktert an scheinbaren Performance-Problemen herum und verliert dabei das übergeordnete Ziel aus den Augen – die Verbesserung der User Experience.

Aber es ist nicht irgendein PageSpeed-Wert, der über die Performance einer Website entscheidet. Es ist unser Gehirn, das uns mitteilt, ob eine Webseite langsam oder schnell lädt. Laut Ilya Grigorik von Google ist die gefühlte Performance abhängig von der erwarteten Performance, der User Experience und der tatsächlichen Ladezeit.

Ob eine Seite nun nach einer Sekunde oder bereits nach 0,8 Sekunden komplett auf dem Bildschirm angezeigt wird – das macht für den Nutzer keinen großen Unterschied. Laut dem Weber-Fechner-Gesetz werden Unterschiede in der Zeitdauer erst wahrgenommen, wenn diese um mindestens 20 % gesenkt wird. Hat der Nutzer jedoch den Eindruck, lange warten zu müssen, ehe überhaupt etwas auf der Seite zu sehen ist – dieser Eindruck von der Seite bleibt (negativ) haften. Das heißt nicht, dass Du die Optimierung der technischen Ladezeit vernachlässigen solltest – ganz im Gegenteil. Idealerweise verbesserst Du beide: die tatsächliche und die subjektiv empfundene Ladezeit.

Schlechte Performance ist ein Conversion-Killer

Dass sich langsam ladende Webseiten negativ auf das Nutzerverhalten auswirken und zu erhöhten Absprungraten führen, ist nichts Neues und wird durch zahlreiche Studien belegt. Nicht jedem dürfte aber geläufig sein, dass erhöhte Ladezeiten für den Online-Handel einen Verlust von bis zu 15 Millionen Euro pro Sekunde Ladezeit bedeuten. Laut einem Beitrag von Konversionskraft aus dem Jahr 2015 steigt die Absprungrate pro Sekunde stark an und die Conversion Rate sinkt pro Sekunde um bis zu sieben Prozent.

Berücksichtigt man außerdem, dass ein Nutzer bereits nach drei Sekunden Ladezeit abspringt, so wird noch einmal deutlich, wie wichtig schnelle Ladezeiten sind. So hat Google nachgewiesen, dass eine erhöhte Ladezeit von wenigen 100 Millisekunden zu einem starken Rückgang der Suchanfragen geführt hat. Und auch Amazon verliert laut Greg Linden beispielsweise ein Prozent des Umsatzes, wenn sich die Ladezeit der Seiten um 100 Millisekunden verschlechtert.

Unser Handeln folgt einem Rhythmus

Warum reagieren Internetnutzer negativ auf lange Ladezeiten? Hierzu muss man wissen, wie der Mensch komplexe Handlungen ausführt. Diese bestehen aus einer Abfolge von Reizen und Aktionen. Schlagen wir beispielsweise einen Nagel in die Wand, haben wir unmittelbar einen Eindruck vom Erfolg unserer Handlung. Das Hämmern ist hier verzögerungsfrei. Stellen wir uns vor, wir müssten den Hammer nun virtuell schwingen. Der Nagel wird in diesem Fall erst einige Sekunden, nachdem wir unsere Bewegung beendet haben, auf dem Bildschirm tiefer in die Wand getrieben. Erst dann können wir zum nächsten Schlag ansetzen. Wie wird diese Wartezeit zwischen dem Schlag mit dem Hammer und der Reaktion des Nagels wahrgenommen?

Wir können Reize erst ab einer Länge von 100 Millisekunden unterscheiden. Das bedeutet, dass bei einem Klick auf eine Schaltfläche, die unterhalb dieser Zeitgrenze ein Feedback gibt, die ausgelöste Aktion von unserem Gehirn als "unmittelbar" wahrgenommen wird. Kurze Verzögerungen, die unter einer Sekunde liegen, werden registriert, führen jedoch zu keinem Bruch im Rhythmus von Wahrnehmung und Aktion. Längere Verzögerungen hingegen bewirken, dass unsere Gedanken zu wandern beginnen und andere Eindrücke an die Stelle der aktuellen Absicht treten – dies bedeutet Stress für den Nutzer. Um das obige Beispiel mit dem virtuellen Hammer aufzugreifen: Um das virtuelle Erlebnis aufrecht zu erhalten, muss der virtuelle Hammer innerhalb von 0,1 Sekunden auf die Schwungbewegung eine Reaktion auslösen.

Wie wir Menschen Zeit wahrnehmen

Auf der Grundlage von Erkenntnissen der Wahrnehmungspsychologie legte Usability-Guru Jakob Nielsen bereits Anfang der 1990er Jahre drei wesentliche Zeitintervalle für die Wahrnehmung von Reaktionszeiten eines Webauftritts fest.

  • bis 0,1 Sekunden: Der Nutzer nimmt keine spürbare Verzögerung wahr. Seine Handlungen haben eine unmittelbare Auswirkung.

  • bis 1 Sekunde: Die Verzögerung ist zwar spürbar, aber der Arbeitsfluss wird nicht unterbrochen.

  • bis 10 Sekunden: Der Nutzer ist zum Warten gezwungen und muss dabei aktiv seine Konzentration aufrechterhalten.

Das bedeutet, dass ab einer Wartezeit von zehn Sekunden die Aufmerksamkeit deutlich sinkt und die Wahrscheinlichkeit steigt, dass der Nutzer sich mit anderen Dingen beschäftigt. Das kann dazu führen, dass er von der Webseite abspringt und zur Konkurrenz wechselt.

Diese Zeiten sind fest vorgegeben und können nicht verändert werden. Daher wird auch als Ziel ausgegeben, wie in der Einleitung geschrieben, die Ladezeit einer Webseite unter einer Sekunde zu halten – oder noch besser unter 100 Millisekunden. Doch das ist natürlich illusorisch, wenn man sich vor Augen hält, wie viele verschiedene Dinge erledigt werden müssen, ehe eine Webseite im Browserfenster angezeigt werden kann: DNS-Lookup, TCP-Verbindung aufbauen, HTML-Parsing, Download von Stylesheets und Ausführung von JavaScript. Die aktuelle Studie von Konversionskraft zeigt, dass von den Top 100 der deutschen Online Shops – gemessen am Umsatz – bereits rund 70 Prozent eine Ladezeit von maximal drei Sekunden aufweisen. Rund 25 Online-Shops können sogar mit einer Ladezeit von nur 1,5 Sekunden überzeugen.

Die Ladezeiten technisch so zu optimieren, dass sie unter drei Sekunden liegen, ist ein Aspekt der Conversion Optimierung. Ein zweiter Aspekt ist die Reduzierung der subjektiv wahrgenommenen Ladezeit. Auch diese muss betrachtet und optimiert werden, um die Conversion Rate zu steigern. Denn so kann auch die objektive Ladezeit von drei Sekunden psychologisch noch einmal verkürzt, oder eine objektive Ladezeit von fünf Sekunden auf gefühlte drei Sekunden reduziert werden.

Mit diesen Methoden kannst Du die gefühlte Ladezeit optimieren

Nachfolgend einige Tipps, wie sich die vom Nutzer wahrgenommene Ladezeit Deiner Webseite verbessern lässt:

1. Fortschrittsanzeige integrieren
Seiten, die während des Ladens mittels eines Ladebalkens anzeigen, wie viel Prozent der Seite bereits geladen ist, reduzieren die gefühlte Ladezeit. Denn dem Nutzer wird konkret mitgeteilt, wie weit der Aufbau der Seite bereits fortgeschritten ist und wie lange er noch warten muss, ehe er mit der Seite interagieren kann. Mit sogenannten Fortschrittsindikatoren – auch Preloader genannt – arbeiten auch APPs, Facebook und Youtube.

2. "Above the fold"-Inhalte zuerst laden
Ein enorm wichtiger Faktor ist auch, den Code der Webseite so zu programmieren, dass der Bereich "Above the fold" – also der sichtbare Bereich – zuerst lädt. So bekommt der Nutzer auf der Website in kürzester Zeit ein Ergebnis angezeigt, das er sich ansehen kann. Danach kann der Website-Inhalt "Below the fold" geladen werden.

So ergab eine Eye-Tracking-Studie der Nielsen Norman Group, dass ein Nutzer, wenn die wichtigsten Inhalte auf einer Webseite zuerst geladen werden, rund 20 % seiner Zeit mit der Betrachtung dieser Inhalte verbringt. Hingegen verbringt ein Nutzer, bei dem dieser Bereich acht Sekunden lang geladen hat, nur 1 Prozent seiner Zeit für die Betrachtung dieses Bereichs.

3. Progressive JPEG nutzen
Die Ladezeit wird zudem gefühlt verkürzt, wenn Progressive JPEG zur Anwendung kommt. Das bedeutet, dass dem Nutzer, noch bevor die gesamte Bilddatei geladen ist, schnell ein grobes Vorschaubild angezeigt wird. Das basiert darauf, dass das Bild per Zeilensprungverfahren gezeichnet wird. Dieses Verfahren ist insbesondere dann nützlich, wenn das Laden eines Bildes länger als eine halbe bis ganze Sekunde dauert. Die meisten Anwendungen speichern JPEGs allerdings im Baseline-Format. Soll ein Bild im progressiven Format gespeichert werden, kann es beispielsweise mittels GIMP oder Photoshop umgewandelt werden.

4. Produkte vorladen
Ähnlich wie das fokussierte Laden des Bereichs "Above the fold" funktioniert auch das Vorladen von Inhalten. So können dem Nutzer bereits relevante Inhalte angezeigt werden und im Hintergrund lädt der Rest der Seite. So arbeitet auch Amazon: Es werden stets die ersten 3 Produkte angezeigt, während parallel dazu der Rest geladen wird. Wichtig ist hierbei, dass eine konkrete Suchanfrage gestellt wurde, um dem Nutzer auch die Ergebnisse zu zeigen, die er sucht.

5. Auto-Preloading verwenden
Auto-Preloading bedeutet automatisches Vorladen von Inhalten und basiert auf der Auswertung des Nutzerverhaltens auf einer Webseite. Entsprechend der Datenauswertung können, in der Annahme welche Inhalte vom Nutzer als nächstes betrachtet werden, diese bereits vorgeladen werden. So hat er diese ohne Verzögerung verfügbar und unnötiges Laden wird vermieden. Eine Unterseite kann so bereits vorgeladen werden, wenn vom System erkannt wird, dass sich der Mauszeiger in Richtung eines Links bewegt.

6. Benötigte Wartezeiten für den Nutzer sichtbar machen
Am Beispiel von Reiseportalen und Flugsuchmaschinen, die die Angebote tausender Anbieter durchforsten, wenn Nutzer eine Anfrage gestartet haben, sollte der wahrgenommene Wert (die lange Ladezeit) sichtbar gemacht werden. So zeigen diese Portale in der Regel einen Ladebalken, wie weit die Suche vorgeschritten ist und die konkrete Anzahl der tausenden Anbieter, die gerade für die persönliche Suchanfrage verglichen werden.

Fazit

Generell ist eine schnelle Ladezeit einer der wohl wichtigsten Faktoren für den Erfolg einer Webseite. Bereits ab einer Seitenladezeit von 3 Sekunden sinkt die Conversion Rate drastisch. Daher müssen im Bereich der objektiven Ladezeit als auch der subjektiven Wahrnehmung alle möglichen Maßnahmen getroffen werden, um die gefühlte Ladezeit möglichst kurz zu halten. Dabei sollte man nicht immer blind den Empfehlungen von Website Speed Testing-Tools folgen. Denn diese beantworten lediglich die Frage, ob alle Best-Practice-Maßnahmen implementiert wurden. Allerdings sagen sie nichts darüber aus, ob die Website für den Nutzer schnell genug ist.

Vereinfache Dein digitales Marketing mit nur einem Tool – der Ryte Software Suite.

Veröffentlicht am Apr 25, 2017 von Raphaela Kyra Bohl