Nach 3 Sekunden sind deine Kunden weg: Das kannst du für schnelle Ladezeiten tun

8. Oktober 2015 von Sebastian Maier

Methoden zur Reduzierung von Ladezeiten und wann das Überbrücken von längeren Ladezeiten sinnvoll ist.

Ladezeiten einer Website wichtig oder nicht? Überbrücken oder optimieren?

Bei smooster achten wir immer besonders darauf, dass die Ladezeit einer Website so gering wie möglich ausfällt. Ganz einfach weil wir der Überzeugung sind, dass bei diesem Thema schneller einfach besser ist. Denn aus unserer Sicht lautet die Erfolgskette einer Website: Sie muss gefunden werden, sie muss überzeugen und sie muss ein Ziel erfüllen.

Damit die Website überzeugt und ihr Ziel erfüllen kann, muss sie der Besucher zunächst einmal ansehen. Und das tut er wiederum nur, wenn die Seite schnell lädt. Laut einer Analyse des US-amerikanischen Software-Anbieters Radware verlassen 57 % der Besucher eine Website direkt wieder, wenn die Ladezeit länger als 3 Sekunden dauert. 21, 22, 23 – weg! Drei Sekunden sind aber doch gar nicht lange, oder? Wenn man sich im Coffeeshop einen Latte Macchiato bestellt sicherlich nicht. Für den Besucher einer Website aber schon. Vor allem, weil die Konkurrenz oftmals viel schneller ist.

Google hat das auch erkannt und experimentiert bereits damit, die Ladezeit von Websites in das Ranking mit einfließen zu lassen. Diese Entwicklung steigert weiterhin die Bedeutung der Ladezeit, da sie damit in Zukunft noch viel früher in der Erfolgskette der Website greifen wird  – an dem Punkt “Die Website muss gefunden werden.”.

Nun könnt ihr mit Sicherheit verstehen, warum wir immer wieder darauf pochen, das Thema Ladezeiten ernst zu nehmen. Doch wie kann man konkret die Ladezeit einer Website verbessern? Und gibt es auch Möglichkeiten, lange Ladezeiten so zu überbrücken, dass der Besucher nicht abspringt?


Warum sind Ladezeiten überhaupt zu lang?

Gerade voll im Trend liegen hochauflösende, großflächige Bilder, Videoclips, Zusatzfunktionen und umfangreichere Animationen – all diese Elemente müssen geladen werden und verlangsamen somit die Ladedauer der Website.

Doch verzichten sollte man auf diese Design- und Funktionselemente nicht, denn sie transportieren Emotionen und Informationen und sind daher wichtig für den dritten Punkt unserer Erfolgskette: “Die Website muss überzeugen”.


Ladezeit optimieren

Es ist fast schon eine Ironie des Schicksals, dass mit steigender Beliebtheit von Fotografien, Videos etc. gleichzeitig die Toleranz der Wartezeit beim Laden der Website immer weiter sinkt. Zum Glück gibt es jedoch viele Möglichkeiten, die Ladezeit zu optimieren. Was für das jeweilige Websiteprojekt am besten geeignet ist, besprechen wir immer im Rahmen unserer Projekt-Beratung. Solltet ihr Fragen zu den einzelnen Punkten haben, stellt sie mir gerne unten in den Kommentaren.


Load above the fold” bzw. scrollabhängiges Laden

Beim so genannten “load above the fold” beziehungsweise scrollabhängigem Laden wird zunächst nur der Inhalt geladen, den der Besucher auf den ersten Blick ohne zu scrollen sieht. Gerade bei Onepagern oder sehr langen Seiten ist diese Möglichkeit ideal, um Ladezeit einzusparen. Während der Besucher einen ersten Blick auf das wirft, was seinen Bildschirm ausfüllt, wird im Hintergrund bereits der Rest der Inhalte nachgeladen.

Am einfachsten einzurichten ist das scrollabhängige Laden, wenn nur die großen Dateien über diesen Weg nachgeladen werden, z. B. Bilder und Videos. Etwas aufwendiger wird es, wenn auch das CSS, also die für die Styles der Seite zuständigen Daten, erst bei Bedarf nachgeladen werden. Das Gesamtpaket aus HTML, Bildern, Videos, CSS etc. bei Bedarf nachzuladen bedeutet zwar den größten Aufwand, bringt aber auch die besten Resultate. Dies lohnt sich bei besonders langen Seiten wie beispielsweise dem Instagram-Feed.


Progressive JPEG

Bei einem progressive JPEG wird vereinfacht gesagt nicht ein Pixel nach dem anderen geladen, sondern es werden beim Laden immer ein paar Pixel übersprungen. So baut sich das Bild nicht langsam von oben nach unten auf, sondern es wird nach und nach “schärfer”. Die Website ist also gefühlt schneller nutzbar.


Retina-Bilder nachladen

Retina-Bilder haben eine doppelt so hohe Pixeldichte wie “normale” Bilder und sorgen daher auch für doppelt so lange Ladezeiten. Um die Situation zu verbessern, kann man die Website so einrichten, dass Retina-Bilder nur geladen werden, wenn das Endgerät Retina-fähig ist  –  und dies auch erst, wenn die Website sonst bereits komplett geladen ist, inklusive Bildern in einem kleineren Format. Durch das Nachladen der Retina-Bilder werden die Bilder für den Betrachter also schärfer, während er auf der Website unterwegs ist.


An die Endgerätegröße angepasste Bildgrößen nachladen

Ähnlich wie bei den Retina-Versionen lädt man hier zunächst standardmässig die Bilder für die kleinsten Geräte,  z. B. für das Smartphone mit einer Breite von 320px. Diese laden aufgrund ihrer geringen Größe schnell. Wenn man sie auf einem großen Gerät anschaut, wirken sie zwar leicht verpixelt, die Seite ist aber bereits nutzbar. Dann lädt man auch hier abhängig von der tatsächlichen Viewport-Breite (meist der Geräte-Breite) das passende, höher auflösende Bild nach.

Weitere Möglichkeiten zur Optimierung von Ladezeiten hatten wir euch auch in unserem Artikel Für Besucher, die bleiben: Mit diesen 6 Tipps wird deine Website schneller vorgestellt.


Ladezeit überbrücken

Oft wird die Ladezeit durch sogenannte Ladebildschirme oder Ladezustandsanzeigen überbrückt. Diese haben in erster Linie die Aufgabe, dem Nutzer zu signalisieren, dass noch etwas passiert. Auch zeigen sie in der Regel an, wie lange er noch zu warten hat. Beispielsweise durch eine Sanduhr.

Nach unserer Erfahrung sollte bei der Überbrückung eine wichtige Komponente niemals fehlen: der Unterhaltungsfaktor. Bieten wir dem Besucher eine spannende, interessante Unterhaltung während des Ladens an, können wir Abbrüche reduzieren. Dabei kann es sich beispielsweise um witzige Sprüche oder intelligente Animationen handeln. Es kommt hierbei ganz auf die Zielgruppe an und was diese fesseln könnte. Wichtig ist es, die Inhalte hin und wieder zu wechseln, um wiederkehrende Besucher nicht zu langweilen.


Fazit

Ladezeiten hatten schon immer eine große Bedeutung für den Erfolg einer Website, wurden aber oft vernachlässigt. Dies liegt vor allem daran, dass viele gar nicht wissen, wie sie eine Website wirklich effektiv beschleunigen können.

Über 30 % des Traffics von Websites kommt inzwischen über mobile Endgeräte, die oft mit schlechteren Internetverbindungen auskommen müssen. Der Besucher definiert also nicht nur durch sein Nutzungsverhalten, sondern auch durch sein Kaufverhalten die Wichtigkeit der Ladezeit einer Website.

Wir raten dazu, zunächst an allen Stellen Ladezeiten zu optimieren, wo es möglich ist. Sind die Ladezeiten nach Ausschöpfung aller Optimierungspotenziale immer noch zu lang, kann man als nächsten Schritt auf das Überbrücken setzen. Dann gilt es, mit cleveren, unterhaltsamen Mitteln die Ladezeit zu überbrücken, um den Besucher bei der Stange zu halten.



Welche Möglichkeit zur Optimierung der Ladezeit hältst du für sinnvoll? Wie gehst du das Thema normalerweise an?

Hast du Interesse daran, an einem unserer Webinare zu den kommenden Webtrends teilzunehmen? Hier geht es zu den Terminen.



(Headerbild: Foto von Allie_Caulfield, flickr.com/Creative Common Licence)

zurück
comments powered by Disqus