Lange Wartezeiten beim Surfen sind ein absolutes K.O.-Kriterium. Sie stören die User Experience und sorgen für eine höhere Absprungrate. Das kann für Sie als Betreiber sogar wirtschaftliche Folgen haben. Deshalb ist die Performance Optimierung für Ihre Website ein absolutes Muss. Wie das funktioniert, erfahren Sie in diesem Artikel.
Was ist gute Performance?
Was gilt überhaupt als gute Performance? Eine klare Ansage ist nahezu unmöglich, denn die objektive Ladezeit gibt keinen Aufschluss: Jeder Besucher empfindet sie anders. Dabei spielt auch der Inhalt der Webseite eine grosse Rolle. Während wir manche Sites «on the go» möglichst schnell sehen wollen, besuchen wir andere eher in einem ruhigen Moment mit mehr Geduld. Und bei einer Seite mit viel Bildern erwartet und duldet der User per se längere Wartezeiten, als wenn er eine textlastige Seite besucht.
Im Internet kursieren verschiedene Meinungen zur optimalen Ladezeit. Klar ist: Je kürzer, desto besser. Aktuell ist oft die Rede von einer optimalen Ladezeit von unter zwei bis drei Sekunden. Dabei gilt es allerdings zu bedenken, dass selbst diese objektive Ladezeit stark variieren kann, denn sie hängt von vielen Faktoren ab, die Sie als Betreiber gar nicht beeinflussen können, zum Beispiel vom eingesetzten Gerät oder den Netzwerkbedingungen.
Ladezeit als Conversion Killer oder Maker
Die Ladezeit beeinflusst direkt die erreichte Conversion. Amazon zum Beispiel hat bereits im Jahr 2007 einen Zusammenhang von Ladezeit und Umsatz festgestellt. Bereits bei 100 Millisekunden längerer Ladezeit büsst Amazon 1% Umsatz ein. Ein anderes Beispiel ist eine der umsatzstärksten Handelsketten der Welt: Walmart konnte mit jeder Sekunde Ladezeit-Optimierung eine Umsatzsteigerung von 2% verzeichnen.
Performance-Messung und -Optimierung
Für die Performance-Messung gibt es Tools wie Google Analytics, Google Page Speed oder Pingdom. Diese Messungen sind aber nur bedingt aussagekräftig, da eben viele verschiedene Faktoren eine Rolle spielen. Nicht alle davon können Sie beeinflussen. Von wo aus die Seite aufgerufen wird zum Beispiel, mit welchem Gerät, wie die aktuelle Auslastung des Servers ist und so weiter. Logischerweise wird die Performance zum Beispiel schlechter abschneiden, wenn eine Seite in Europa gehostet ist und von Amerika aus getestet wird.
Die wichtigsten technischen Parameter, die Auswirkungen auf die Performance haben, sind:
-
Webentwicklung
Bereits in der Umsetzung können an diversen Stellen Optimierungen vorgenommen werden. Sei es bei Datenbankabfragen oder mittels Ausspielen von unterschiedlichen Bildgrössen je nach Device.
-
Serverumgebung
Mit einem falschen Server-Setup können die Server, auf welchen die Website betrieben wird, möglicherweise der Last nicht standhalten. Das verlangsamt die Ladezeiten drastisch. Es lohnt sich, vor einem geplanten Release einer Website Lasttests auf dem Server durchzuführen, um mögliche Probleme frühzeitig zu erkennen.
-
Netzwerkbedingungen
Gerade im Zeitalter von Mobile Devices ist eine schnelle Netzabdeckung noch nicht flächendeckend gewährleistet. Mit Responsive Design, das sich dem eingesetzten Gerät optimal anpasst, können Sie darauf bis zu einem gewissen Grad reagieren.
5 Punkte der Performance-optimierten Webentwicklung
Es gibt einige technische Möglichkeiten, die Performance einer Webseite am besten schon in der Planung und Entwicklung zu optimieren.
-
Code minimieren
Gerade in einer produktiven Umgebung können CSS und JavaScript, aber auch HTML Ressourcen minimiert werden. Nicht minimiert bieten sie keinen Mehrwert und vergrössern lediglich die Datenmenge der Website. Einen ähnlichen Ansatz der Verschlankung von HTML bezweckt das Open Source Projekt AMP (Accelerated Mobile Pages). AMP Sites werden insbesondere auf mobilen Geräten bedeutend schneller geladen. AMP ist ein zukunftsträchtiger Ansatz, der unbedingt im Auge behalten werden sollte.
-
HTTP Requests möglichst tief halten
Vermeiden sollten Sie unnötig viele HTTP Requests, da sich jede Anfrage an den Server entsprechend in der Performance auswirkt.
-
Bildausschnitte und Responsive Images verwenden
Wenn möglich sollten Bildausschnitte automatisch generiert werden. Mittels Responsive Images wird je nach Device jeweils das kleinstmögliche Bild ausgegeben, was die Ladezeit verkürzt.
-
Automatische Bildkomprimierung
Wenn immer möglich sollten Bilder unbedingt komprimiert werden, um die Datenmenge der Website zu reduzieren.
-
Caching-Mechanismen integrieren
Es können diverse Caching Mechanismen wie Static File Cache, Varnish aber auch Browsercaches genutzt werden, um die Performance einer Website noch weiter zu verbessern.
Die subjektive Wahrnehmung
der Ladezeit
Wie schnell oder langsam wir eine Website wahrnehmen, ist subjektiv.
Jakob Nielsen, ein renommierter Usability Experte, hat bereits in den 1990ern drei wesentliche Zeitintervalle festgelegt für die Wahrnehmung von Reaktionszeiten von Webseiten. Gestützt hat er diese auf Erkenntnisse aus der Wahrnehmungspsychologie. Definiert hat er die folgenden Intervalle:
Bis 0,1 Sekunden: Der Besucher hat das Gefühl, die Website reagiert sofort, er nimmt keine spürbare Verzögerung war.
Bis 1 Sekunde: Der Gedankenfluss bleibt ununterbrochen. Die Verzögerung ist leicht spürbar.
Bis 10 Sekunden: Der Gedankenfluss ist unterbrochen. Der Besucher ist zum Warten gezwungen und muss dabei aktiv seine Konzentration aufrechterhalten – oder eben nicht.
Diese Werte zeichnen sich auch in einer Studie von Google aus dem Jahr 2017 ab. Untersucht wurde, wie stark die Absprungrate, also die Anzahl Bounces, bei längerer Ladezeit prozentual ansteigt. Wie zu erwarten war, springen bei längeren Ladezeiten immer mehr Leute ab. Ein ganz besonders steiler Anstieg im generellen Aufwärtstrend ist dabei bei einer Ladezeitverlängerung von 3 auf 5 Sekunden zu beobachten.
Subjektive Ladegeschwindigkeit verbessern
Gemäss diesen Erkenntnisse sollten Sie also auf jeden Fall eine Ladezeit unter einer Sekunde anstreben. Noch besser ist eine Ladezeit im Millisekundenbereich. Rein technisch sind den Möglichkeiten der Optimierung allerdings Grenzen gesetzt. Es lohnt sich deshalb, nicht nur die objektive, sondern vor allem auch die subjektive Ladezeitempfindung zu optimieren. Dafür gibt es ein paar clevere Kniffe, die Sie kennen sollten.
So verbessern Sie die subjektive Ladegeschwindigkeit
-
Ladeanimationen
Mit einer Statusbar kann dem Besucher der Fortschritt der Ladezeit visualisiert werden. So weiss er, wo er steht. Diese einfache Massnahme verbessert bereits die User Experience.
-
Inhalt nachladen
Als «Lazy Loading» bezeichnet man das Laden der Inhalte erst zu dem Zeitpunkt, wenn sie tatsächlich gebraucht werden. Beispielsweise müssen Bilder in einem Slider erst geladen werden, wenn diese effektiv betrachtet werden, oder Suchresultate erst beim Scrollen der Website dynamisch geladen werden. So wird verhindert, dass der Besucher auf zweitrangigen Inhalt warten muss und deshalb relevante Informationen nicht sehen kann.
-
Zuerst «above the fold» laden
Die Website sollte so entwickelt werden, dass der Bereich «above the fold» – also der Bereich, der ohne Scrolling sichtbar ist – zuerst geladen wird.
So werden dem Besucher innert kürzester Zeit Ergebnisse angezeigt, die er sich ansehen kann.
Mit solchen und weiteren Methoden kann die Illusion einer schnellen Website geschaffen und eine allfällig problematische Ladezeit überbrückt werden.
Bessere Performance von A bis Z
Um bestmögliche Resultate zu erhalten, muss in jeder Phase von der Konzeption über das Design bis hin zur Umsetzung jeweils die optimalste Lösung angestrebt werden. Nur so kann eine gute Pagespeed – objektiv und subjektiv – nachhaltig gewährleistet werden. Soll eine Webseite im Nachhinein optimiert werden, so empfiehlt sich in jedem Fall eine genaue Analyse, um das Potential richtig zu erkennen und die entsprechend passenden Massnahmen zu definieren.
Weniger Bounces, mehr Conversion? Wir helfen Ihnen gerne, die Performance Ihrer Webseite zu verbessern und so mehr Leute zu erreichen. Melden Sie sich einfach, wir freuen uns auf Sie.
