{"id":21872,"date":"2022-01-17T01:04:29","date_gmt":"2022-01-17T00:04:29","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=21872"},"modified":"2023-08-06T21:39:57","modified_gmt":"2023-08-06T19:39:57","slug":"drei-sekunden-sind-zu-lang-auswirkung-der-ladezeit-von-webseiten-auf-die-user-experience","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/01\/17\/drei-sekunden-sind-zu-lang-auswirkung-der-ladezeit-von-webseiten-auf-die-user-experience\/","title":{"rendered":"Drei Sekunden sind zu lang – Auswirkung der Ladezeit von Webseiten auf die User Experience"},"content":{"rendered":"\n

Warum ist es so wichtig, die optimale Ladezeit anzustreben?<\/h1>\n\n\n\n

Auf jemanden oder auf etwas zu waren ist uns Menschen nicht fremd. Im Schnitt verbringt jeder Mensch in seinem Leben rund ein bis zwei Jahre mit Warten. Dies kann an der Bushaltestelle, Suppermarktkasse, dem Abwarten auf die Ankunft einer Zustellung, oder die Ankunft einer geliebten Person sein. Viele Menschen erscheint das Warten auf etwas oder jemanden als l\u00e4stig. Dies kann verschiedenste Gr\u00fcnde haben wie bspw. Langeweile, die seelische Verfassung und der allgemeine Gem\u00fctszustand, sowie Zeitdruck. Ganze Gesch\u00e4ftsmodelle wie das “Priority Boarding” am Flughafen beruhen darauf, dass Menschen bereit sind mehr Geld zu bezahlen, nur um nicht anstehen zu m\u00fcssen. (D. Lenz 2018)<\/p>\n\n\n\n\n\n\n\n

Gerade Kindern f\u00e4llt es schwer einen Aufschub zu ertragen. Dies zeigt die Studienreihe des US-Psychologen Walter Mischel, die als “Marshmallow-Experiment” bekannt ist. Der Psychologe Walter Mischel wollte urspr\u00fcnglich herausfinden, welche Strategien Kinder anwenden, um ein Bed\u00fcrfnis aufzuschieben. Im Jahre 1968 f\u00fchrte er ein Experiment mit Kindern zwischen vier und sechs Jahren durch. Er gab den Kindern einen Teller mit einem Marshmallow und bot ihnen an, ihnen die doppelte Menge zu geben, schafften sie es den Marshmallow f\u00fcr 15 Minuten nicht zu essen. Ein Viertel der kleinen Probanden schlug das Angebot aus und verputzte den Leckerbissen auf der Stelle. Ein Drittel der Kinder, die sich auf den Deal einlie\u00dfen, \u00fcberstanden die Wartezeit. (Frederik J\u00f6tten 2015)<\/p>\n\n\n\n

\"\"\/
Abbildung 1: Marshmallow-Experiment (Igniter Media 2020)<\/em><\/figcaption><\/figure>\n\n\n\n

Um warten zu k\u00f6nnen braucht es neben Selbstkontrolle eine differenzierte Zeitwahrnehmung, die Kinder erst etwa ab dem dritten Lebensjahr entwickeln. Vorschulkinder handeln eher impulsiv und haben meist noch kaum hilfreiche Strategien erlernt, sich erfolgreich zur\u00fcckhalten zu k\u00f6nnen. Sie neigen dazu, sich auf das Objekt der Begierde zu konzentrieren. Mit f\u00fcnf Jahren ist das Kinder zunehmend in der Lage sich stattdessen bewusst abzulenken. In der Pubert\u00e4t reift die Willenskraft weiter.<\/p>\n\n\n\n

Doch was hat das Warten, auf beispielsweise das Verspeisen eines Marshmallows, mit einer Webapplikation zu tun?<\/p>\n\n\n\n

Unser Nutzererlebnis im Web ist oftmals ebenfalls gepr\u00e4gt vom Warten auf das Laden einer Webseite, dem Hochladen von Bildern oder dem Herunterladen von Spielen. Bei all diesen Dingen ben\u00f6tigen wir, je nach Internetanbindung und der jeweiligen Implementierung der Webseite eine Menge Geduld. Es gibt drei Gr\u00fcnde warum eine optimale Ladezeit einer Webseite von Entwicklern angestrebt werden sollte: <\/p>\n\n\n\n

    \n
  1. Schlechte Ladezeiten strapazieren die Nerven des Users und sorgen f\u00fcr eine schlechte Nutzererfahrung<\/li>\n\n\n\n
  2. Schlechte Ladezeiten beeinflussen die Conversion Rate einer Website im negativen Sinne<\/li>\n\n\n\n
  3. Schlechterer Rankingfaktor \u201eLadezeit\u201c bei der Suchmaschinindexierung<\/li>\n<\/ol>\n\n\n\n

    Webseiten, die schnell geladen werden, sind aus Sicht der Suchmaschinen von Vorteil. Im Jahre 2010 wurde von Google offiziell best\u00e4tigt, dass die Seitenladezeit einen Rankingfaktor zur Bewertung von Webseiten darstellt und somit Einfluss auf die Positionierung in den Suchergebnissen hat. Schnellere Websites sorgen durch eine bessere User Experience daf\u00fcr, dass Nutzer l\u00e4nger auf Websiten verweilen und \u00f6fter nutzen als bspw. Konkurrenzseiten mit schlechterer Performance.<\/p>\n\n\n\n

    Eine im Jahre 2010 durchgef\u00fchrte Studie an der Glasgow Caledonian University durch die Firma Foviance zeigt auf, wie sich die Ladezeit einer Website, auf den Stress-Level der Probanden auswirkt. Besucher einer nicht performanten Seite, mussten 50% mehr Konzentration aufwenden um ans Ziel zu kommen als Besucher einer performanten Seite. Am h\u00e4ufigsten wurde eine schlechte Ladezeit von den Teilnehmern kritisiert. Solche Aussagen tragen nat\u00fcrlich nicht zu einer positiven Nutzererfahrung bei. (CA. 2009)<\/p>\n\n\n\n

    Schlechte Ladezeiten haben auch einen gro\u00dfen Einfluss auf die Conversion Rate und somit auf die Verk\u00e4ufe und die allgemeine Nutzung einer Website. Wenn man von Conversion Rate (auch Konversionsrate oder Umwandlungsrate genannt) spricht, ist damit eine Messgr\u00f6\u00dfe aus dem Bereich des Online Marketing gemeint. Sie misst den prozentualen Anteil der Besucher einer Website, die eine gew\u00fcnschte Aktion ausgef\u00fchrt haben. Als Beispiel f\u00fcr gew\u00fcnschte Aktionen k\u00f6nnen sein, der Anteil der Besucher, die zu K\u00e4ufern geworden sind, Anmeldungen zum Newsletter, der Download einer Datei, das Ausf\u00fcllen eines Kontaktformulars oder das Klicken auf eine Werbeanzeige. (Lorenz Graubner 2021)<\/p>\n\n\n\n

    Wie sich die Ladezeit auf die Conversion Rate auswirkt, hat Google in einer Studie feststellen k\u00f6nnen. Bei Google verringerten sich die t\u00e4glichen Suchanfragen um 0,2%, bei einem Anstieg der Ladezeit um 100ms. (Jake Brutlag 2009)<\/p>\n\n\n\n

    Laut einer Studie von Akuma erwarten 83% der Besucher, dass eine Webseite in unter drei Sekunden l\u00e4dt. Pro Sekunde Ladezeit soll die Conversion Rate dabei um 7% abfallen.<\/p>\n\n\n\n

    Amazon spricht davon, dass eine um 100ms schlechtere Ladezeit, einen Umsatzr\u00fcckgang von 1% bedeutet. (Norisk Group 2022)<\/p>\n\n\n\n

    Die optimale Ladezeit<\/h1>\n\n\n\n

    Eine allgemeing\u00fcltige Aussage zu der Frage \u201cWas ist die optimale Ladezeit?\u201d ist eher nicht m\u00f6glich, da die empfundene Wartezeit und die Erwartungen einer Users an eine Webseite ganz individuell sein k\u00f6nnen. Als Beispiel ist jemand mit einer langsameren Internetverbindung es gew\u00f6hnt l\u00e4nger zu warten als jemand mit einer schnellen Internetverbindung. Will man zum Beispiel ein Video anschauen, rechnet man wahrscheinlich gleich mit l\u00e4ngeren Ladezeiten. M\u00f6chte man sich hingegen eine textlastige Webseiten anschauen, wird die Geduld schnell \u00fcberstrapaziert. Besucher von Webseiten tendieren h\u00e4ufig dazu Dinge nebenbei zu erledigen oder verlassen die Website gleich ganz, sind die Wartezeiten zu lang.<\/p>\n\n\n\n

    Gef\u00fchlte vs. tats\u00e4chliche Ladezeit<\/h2>\n\n\n\n

    Der Faktor Zeit kann aus objektiver und psychologischer Sicht betrachtet werden. <\/p>\n\n\n\n

    Objektive Zeit<\/em><\/strong>
    Die Zeit, die mit der Stoppuhr gemessen werden kann<\/p>\n\n\n\n

    Subjektive Zeit<\/em><\/strong>
    Die Zeit die der Nutzer wahrnimmt
    <\/p>\n\n\n\n

    Die Optimierung der objektiv messbaren Ladezeit einer Webseite hat technologische und finanzielle Grenzen. Aufgabe von Entwicklern und Webdesignern ist es daher, eine Webseite so zu gestalten, dass sie vom Nutzer subjektiv als schneller wahrgenommen wird, als sie tats\u00e4chlich ist. Stellt man sich beispielsweise ein Restaurantbesuch vor – statt mehr K\u00f6che einzustellen, k\u00f6nnte das Restaurant eine kostenlose Vorspeise in Form eines Brotaufstriches anbieten um die Wartezeit auf das bestellte Essen f\u00fcr den Kunden subjektiv zu verk\u00fcrzen.<\/p>\n\n\n\n

    Wie Menschen Zeit wahrnehmen<\/h3>\n\n\n\n

    Auf der Grundlage von Erkenntnissen der Wahrnehmungspsychologie ver\u00f6ffentlichte Jakob Nielsen 2010 eine Artikel, bei dem er unter anderem auf die drei wichtigen Grenzen der Ladezeit eingeht. Hierbei bezieht er sich auf sein Buch Usability Engineering, von 1993 und betont, dass die Reaktionszeiten so relevant wie eh und je sind.<\/p>\n\n\n\n

    Es gibt drei Hauptzeitlimits (die durch menschliche Wahrnehmungsf\u00e4higkeiten bestimmt werden), die bei der Optimierung der Web- und Anwendungsleistung zu beachten sind.<\/p>\n\n\n\n

    bis 0,1 Sekunden<\/td>Bis zu dieser Grenze hat der Besucher das Gef\u00fchl, dass das System unmittelbar auf seine Anfrage\/Aktion reagiert.<\/td><\/tr>
    bis 1 Sekunde<\/td>Der Besucher nimmt die Verz\u00f6gerung wahr. Diese bewegt sich jedoch noch in einem Rahmen, indem sich der Besucher voll und ganz auf seine Aufgabe konzentrieren kann und sein Gedankenfluss nicht gest\u00f6rt wird.<\/td><\/tr>
    bis 10 Sekunden<\/td>Ab der Grenze von zehn Sekunden wird es f\u00fcr einen Besucher sehr schwierig, seine Aufmerksamkeit auf die aktuelle T\u00e4tigkeit zu fokussieren. Der Nutzer tendiert dazu, die lange Ladezeit mit anderen Aufgaben zu \u00fcberbr\u00fccken. Je nachdem verl\u00e4sst er die Website gleich ganz.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    (Jakob Nielsen 2010)<\/p>\n\n\n\n

    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\u00e4ftigt. Das kann dazu f\u00fchren, dass er von der Webseite abspringt und zur Konkurrenz wechselt. Bereits ein paar Sekunden Verz\u00f6gerung reichen aus, um bei einem Besucher eine negative Nutzererfahrung zu schaffen.<\/p>\n\n\n\n

    Laut einer Studie von Akamei, verlassen 40% der Besucher eine Website bereits, wenn sie l\u00e4nger als drei Sekunden warten m\u00fcssten. Die Studie zeigt, dass der durchschnittliche Eink\u00e4ufer im Web erwartet, dass eine aufgerufene Webseite binnen maximal zwei Sekunden vollst\u00e4ndig in seinem Browser dargestellt wird. (Akamai Technologies GmbH 2009)<\/p>\n\n\n\n

    Tats\u00e4chliche Ladezeiten von Websites mit Standort Deutschland<\/h2>\n\n\n\n

    Die Ergebnisse der neuesten Leaderboards H1 aus 2019 zeigen, dass nur 15.000 und damit 5,4% aller deutschen Webseiten in weniger als einer Sekunde laden. Die durchschnittliche Ladezeit deutscher Websites betr\u00e4gt 2,6 Sekunden. (Rajat Trehan, Dominik W\u00f6ber (2019)<\/p>\n\n\n\n

    \"\"
    Abbildung 2: Durchschnittliche Ladezeit – Bestplatzierte L\u00e4nder im \u00dcberblick (Rajat Trehan, Dominik W\u00f6ber (2019)<\/em><\/figcaption><\/figure>\n\n\n\n

    An der Spitze der meistbesuchten mobilen Webseiten Deutschlands liegt booking.com mit 0,7 Sekunden. <\/p>\n\n\n\n

    \"\"
    Abbildung 3: 8 der deutschen Top-Websites im 1 Second Club (Rajat Trehan, Dominik W\u00f6ber (2019)<\/em><\/figcaption><\/figure>\n\n\n\n

    Methoden zur Optimierung der gef\u00fchlten Ladezeit<\/h1>\n\n\n\n

    Wie bereits im vorherigen Abschnitt \u201cGef\u00fchlte vs. tats\u00e4chliche Ladezeit\u201d beschrieben, nehmen Nutzer die Zeit k\u00fcrzer wahr, wenn die Wartezeit angenehm gestaltet ist. Nachfolgend werden einige Tipps zur Verbesserung der vom Nutzer wahrgenommenen Ladezeit einer Webseite aufgef\u00fchrt. <\/p>\n\n\n\n

    Fortschrittsanzeige integrieren<\/em><\/strong><\/p>\n\n\n\n

    Seiten, die w\u00e4hrend des Ladevorgangs einen Ladebalken anzeigen, der angibt, wie viel Prozent der Seite bereits geladen sind, verringern die wahrgenommene Ladezeit f\u00fcr den Nutzer. Sie geben gezielt Auskunft wie weit das Laden der Seite fortgeschritten ist. Auch APPs, bspw. Facebook und YouTube, arbeiten mit sogenannten Fortschrittsanzeigen welche auch Preloader genannt werden.<\/p>\n\n\n\n

    Lazy Loading<\/em><\/strong><\/p>\n\n\n\n

    Um dem Nutzer schnell Information bereitzustellen sollte erst der Bereich geladen werden der sich im sichtbaren Bereich (“Above the fold”) befindet. Mit der Methode \u201cLazy Loading\u201d kann man daf\u00fcr sorgen, dass die Bilder unterhalb des Folds erst dann geladen werden wenn sie tats\u00e4chlich auf dem Viewport erscheinen.
    (Raphaela Kyra Bohl 2017)
    <\/p>\n\n\n\n

    Auto-Preloading verwenden<\/em><\/strong><\/p>\n\n\n\n

    Bei Auto-Preloading werden auf Basis des Nutzerverhaltens Inhalte automatisch vorgeladen. twitch.tv<\/a> bspw. implementierte dies in der FireTV-App wie folgt: befindet sich der Nutzer noch in der Auswahl-Ansicht der verf\u00fcgbaren Streams, wird bereits im Hintergrund der aktuell gehighlightete Stream vorgeladen.<\/p>\n\n\n\n

    Methoden und Werkzeuge zur Messung der Ladezeit<\/h1>\n\n\n\n

    Wie wird Ladezeit gemessen?<\/h2>\n\n\n\n

    Im Allgemeinen bezeichnet man mit der Ladezeit einer Webseite den in Sekunden gemessene Zeitraum zwischen dem Aufruf und der kompletten Darstellung der Webseite im Browser. Neben der Bezeichnung \u201eLadezeit\u201c wird auch der Begriff \u201eLadegeschwindigkeit\u201c oder \u201ePageSpeed\u201c verwendet. Wie lang eine Website f\u00fcr den Seitenaufbau braucht, l\u00e4sst sich in vier Messwerte aufteilen:<\/p>\n\n\n\n

    Time to First Byte (TTFB): <\/em><\/strong><\/p>\n\n\n\n

    Es handelt sich um die Verbindungszeit zwischen dem Computer des Nutzers und dem Webserver. Der Zeitraum zwischen dem Aufruf der Website und dem ersten vom Webserver geladenen Byte. Im Vergleich mit den anderen Messwerte bildet die TTFB eine Ausnahme, da hier allein die Anfrage einer Website und nicht deren Darstellung gemessen wird. Faktoren wie hohe Latenzen im Verbindungsaufbau und langsame Webserver-Hardware und Software spielen hier eine Rolle.  <\/p>\n\n\n\n

    First Contentful Paint (FCP): <\/em><\/strong><\/p>\n\n\n\n

    Der Zeitpunkt, an dem im Browser zum ersten Mal ein Darstellungselement angezeigt wird. F\u00fcr den User ist dies der erste Zeitpunkt, an dem er eine positive R\u00fcckmeldung bekommt, dass die Webseite geladen wird. Wichtig f\u00fcr die schnelle Darstellung im Browser ist das Downloadvolumen der Website. Caching und Code- Minimierung k\u00f6nnen dazu beitragen die Zeit bis zum FCP zu verringern. <\/p>\n\n\n\n

    First Meaningful Paint (FMP): <\/em><\/strong><\/p>\n\n\n\n

    Der Zeitpunkt, an dem der Nutzer das Gef\u00fchl hat, dass die Website geladen ist. Nutzer haben dieses Gef\u00fchl, wenn alle Seiteninhalte f\u00fcr die aktuelle Position des Viewports geladen wurden. Obwohl die interaktiven Elemente noch nicht geladen sind und auch die weiteren Elemente \u201cbelow the fold\u201d noch nicht verf\u00fcgbar sein m\u00fcssen, ist der Ladevorgang f\u00fcr den Nutzer beendet. Lazy-Loading und Bildoptimierung helfen hier eine gute Zeit zu erreichen. <\/p>\n\n\n\n

    Time to Interactive (TTI): <\/em><\/strong><\/p>\n\n\n\n

    Der Zeitpunkt, an dem die Website fertig gerendert und bereit zur Benutzereingabe ist.<\/p>\n\n\n\n

    (Roland Guelle 2018)<\/p>\n\n\n\n

    \"\"\/
    Abbildung 4: Page Speed Messstationen nach Aufruf der Website (Roland Guelle 2018)<\/em><\/figcaption><\/figure>\n\n\n\n

    Wie kann Ladezeit gemessen werden?<\/h2>\n\n\n\n

    Im Folgenden werden kostenlose Tools, mit denen die Ladezeit einer Webseite gemessen werden k\u00f6nnen, vorgestellt. <\/p>\n\n\n\n

    Browser-Werkzeuge und Erweiterungen<\/h3>\n\n\n\n

    In moderne Browsern werden integrierte Entwickler-Tools mit Analysem\u00f6glichkeiten f\u00fcr die Performanceoptimierung angeboten. Mit diesen Werkzeugen lassen sich clientseitig analysen von Webseiten durchf\u00fchren. Diese Entwicklungstools werden von den Herstellern unterschiedlich bezeichnet – lassen sich in der Regal aber entweder in den Einstellungen oder mittels einer Tastenkombination aktivieren. In Google Chrome, als Beispiel, k\u00f6nnen diese Tools mittels F12 oder \u00fcber die Reiter Weitere Tools \u2192 Entwicklungstools<\/em> aufgerufen werden. Die f\u00fcr die Performanceoptimierung relevanten Informationen finden sich unter dem Reiter Network <\/em>und Lighthouse<\/em>. <\/p>\n\n\n\n

    \"\"<\/a>
    Abbildung 5: Google Chrome Entwicklertools – Wasserfalldiagramm<\/em><\/figcaption><\/figure>\n\n\n\n

    Im Reiter Network, wird ab dem Zeitpunkt des Aufrufes der Webseite ein Wasserfalldiagramm erzeugt. Dieses zeigt die heruntergeladenen Objekte, deren Ladezeit und Status. In der Fu\u00dfzeile befindet sich eine Auskunft \u00fcber die Anzahl der Anfragen, das \u00fcbertragene Datenvolumen und die ben\u00f6tigte Ladezeit. Einzelne Elemente k\u00f6nnen hierbei f\u00fcr weitere Informationen angeklickt werden. Wurden Objekte gecached wird dies ebenfalls in dieser Ansicht angezeigt. Das Cache-Verhalten kann jedoch auch deaktiviert, und eine Drosselung des Netzwerkes eingestellt werden. <\/p>\n\n\n\n

    Google Lighthouse
    <\/em><\/strong>Google Lighthouse ist ein Open-Source-Tool zur Verbesserung der Qualit\u00e4t von Webseiten und progressiven Web-Apps. Performance- und Optimierungstests laufen dabei lokal beim Entwickler. Es bietet zudem die M\u00f6glichkeit, Testbedingungen anzupassen und zu filtern, um eine m\u00f6glichst realit\u00e4tsnahe Auswertung der tats\u00e4chlichen Website-Leistungsparameter zu erhalten. Lighthouse verf\u00fcgt unter anderem \u00fcber Audits, und Suchmaschinenoptimierungsvorschl\u00e4ge. Neben der Online-Version ist Google Lighthouse ebenfalls in Chrome als Entwicklungstool integriert. <\/p>\n\n\n\n

    \"\"<\/a>
    Abbildung 6: Google Chrome Entwicklertools – Google Lighthouse<\/em><\/figcaption><\/figure>\n\n\n\n

    Synthetische Testverfahren<\/h3>\n\n\n\n

    Synthetische Testverfahren sind Web-Anwendungen, die das Testen der Performance einer Webseite von verschiedenen Standorten au\u00dferhalb der eigenen Entwicklungsumgebung erm\u00f6glichen. So kann beispielsweise \u00fcberpr\u00fcft werden, wie die Ladezeiten einer Webseite f\u00fcr Nutzer, die beispielsweise von einem anderen Kontinent Anfragen stellen, sind. 

    Viele dieser Tools verwenden Noten oder das Punktesystem nach PageSpeed Insights um einen Wert f\u00fcr die Performance festzulegen.<\/p>\n\n\n\n

    PageSpeed Insights<\/em><\/strong><\/a><\/p>\n\n\n\n

    PageSpeed Insights ist ein Tool zur Messung der Website Performance entwickelt von Google. Es ist komplett kostenlos und zeigt anhand eines Punktesystems, wo noch Optimierungsbedarf besteht. Ach hier werden ebenfalls konkrete Verbesserungsvorschl\u00e4ge angeboten. PageSpeed \u200b\u200bInsights misst nur die Leistungsmetrik, w\u00e4hrend Lighthouse auch andere Aspekte, wie die Suchmaschinenoptimierung einer Website pr\u00fcft.<\/p>\n\n\n\n

    \n
    \n

    Pro:<\/p>\n\n\n\n