5 Maßnahmen, die Ihre Online-Plattform oder Webanwendung zu einem Top-Performer machen

Der Motor der digitalen Wirtschaft

Online-Plattformen und Webanwendungen sind der Inbegriff für digitale Transformation. In den letzten Jahren wurden zahlreiche, konventionelle Produkte und Dienstleistungen im Web revolutioniert. Da fast täglich neue Business Cases aus den Köpfen junger Startups, als auch etablierter Unternehmen sprießen, ist die Konkurrenz oft nicht zu unterschätzen. Neben der Differenzierung durch Alleinstellungsmerkmale gibt es allerdings auch einen einflussreichen Faktor für den Erfolg einer Online-Plattform oder Webanwendung, der oft stark vernachlässigt wird.

Dieser Faktor hört auf den Namen „Performance“.

Performance im Kontext von Online-Plattformen oder Webanwendungen

Performance (z. Dt. „Leistungsfähigkeit“) ist den meisten Menschen grundlegend ein Begriff. Wir betrachten in diesem Artikel Performance aber in direktem Bezug auf das Medium „Online-Plattform“ bzw. „Webanwendung".

In diesem Kontext steht der Performance repräsentativ für die Ladezeit einer – sprich wie lange dauert es, bis der Inhalt und die Funktion Ihrer Seite vollständig auf das Endgerät des Nutzers übertragen ist. Das mag zunächst sehr marginal erscheinen, allerdings verlieren Sie durch jede Sekunde Ladezeit Nutzer im zweistelligen Prozentbereich [1]. Glauben Sie nicht? Vielleicht liefert Ihnen folgende Statistik eine Motivation über diese Thematik in der nächsten Besprechung mit Ihrem CTO oder Tech Lead zu reden.

53% der mobilen Nutzer brechen den Besuch einer Seite ab, wenn das Laden länger als 3 Sekunden dauert

Lassen Sie sich das mal auf der Zunge zergehen – wenn Ihre Online-Plattform also länger als 3 Sekunden zum Laden auf einem Smartphone benötigt, verlieren Sie automatisch die Hälfte Ihrer potenziellen Nutzer. Diese Studie stammt von Google aus dem Jahre 2016 [2] – ist also schon 3 Jahre alt. Inzwischen wird dieser Wert jenseits der 70% liegen – die Nutzer werden zunehmend anspruchsvoller.

Smartphones werden zwar schneller unsere Mobilfunknetze allerdings nicht proportional

Mobiles Netz in Deutschland - High-Speed sieht anders aus. [3]

64% aller Nutzer verwenden ein Smartphone oder Tablet als Endgerät [4]. Lediglich 36% verwenden Ihre Online-Plattform oder Webanwendung noch über einen herkömmlichen Desktop-PC oder ein Notebook - Tendenz weiterhin stagnierend. Während unsere Smartphones immer schneller werden bietet unser Mobilfunknetz allerdings noch lange keinen flächendeckenden, schnellen oder stabilen Zugang zum Internet. Hierdurch entstehen nicht selten lange Ladezeiten bei der Verwendung komplexerer Online-Plattformen oder Webanwendungen. Das sorgt für Frust beim Nutzer!

Jede Sekunde Ladezeit kostet Ihrem Unternehmen 10% Umsatz

Genug aber mit der Negativität – anstatt diesen Faktor als Risiko zu betrachten, sollten Sie es viel mehr als Chance sehen. Im Umkehrschluss bedeutet dies nämlich, dass durch Einsparung von Ladezeit mehr Reichweite und somit auch mehr Umsatz generiert wird. Unzählige Fallbeispiele bestätigen den unmittelbaren Zusammenhang zwischen kürzeren Ladezeiten und der Verbesserung von Messgrößen wie z.B.: Conversion Rates, Besucherzahlen oder SEO-Sichtbarkeit, die letztendlich in höherem Umsatz resultieren [5]:

Häufig treffe Ich auf Unternehmer, deren Online-Plattformen oder Webanwendungen vielerlei Potenziale zur massiven Verbesserung der Ladezeiten aufweisen. Für recht minimalen Aufwand lassen sich enorme Resultate in Form von Umsatzsteigerung generieren. Im Kern erreicht man eine Maximierung der Performance durch technische Maßnahmen, über die im Folgenden ein Überblick gegeben wird.

Wie kann die Performance maximiert werden?

1. Unnötigen Ballast abwerfen

Wer auf eine lange Wanderung geht, überlegt sich zweimal, ob er eine 2 Liter Flasche oder einen 5 Liter Kanister Wasser einpackt. Warum müssen dann beim Laden einer Website unmittelbar 13 Bilder, 4 Schriftarten, 3 Videos und 12.573 Zeilen Programmcode geladen werden, wenn den Nutzer zunächst einmal nur eine Information interessiert?

Die wohl einfachste, aber effektivste Möglichkeit zur Steigerung der Performance ist die Reduktion der zu übertragenden Datenmenge. Beim Besuch Ihrer Online-Plattform oder Webanwendung werden über das Internet eine Vielzahl Daten an das Endgerät des Nutzers übertragen. Diese Daten umfassen u.A.:

Auf nahezu jeder Online-Plattform oder Webanwendung, die Ich evaluiert habe, wurden Daten an den Nutzer übertragen, die nie verwendet werden. Dabei handelt es sich oft aus Relikten von vorangegangenen Versionen, die schlichtweg nie beräumt wurden. Sich hier von unnötigem Ballast zu trennen verbessert direkt die Performance und hat keine Auswirkungen auf die Qualität Ihrer bereitgestellten Inhalte und Funktionen.

2. Daten Ihrer Webanwendung bündeln

Die Übermittlung Ihrer Online-Plattform oder Webanwendung auf das Endgerät Ihres Nutzers können Sie sich vorstellen, wie wenn Sie einen Motor zusammenbauen wollen und die dafür notwendigen 10 Einzelteile bei 10 unterschiedlichen Händlern bestellen. Der Motor läuft erst, wenn alle 10 Einzelteile bei Ihnen angekommen sind – Ihre Seite wird erst dem Nutzer dargestellt, wenn alle Inhalte übertragen wurden. Die Wahrscheinlichkeit, dass es bei einer der 10 Händler zu Verzögerungen kommt ist sehr hoch. Wenn Sie die Option hätten alle Einzelteile bei einem Händler zu ordern, von dem Sie wissen, dass er zügig und verlässlich liefert, würden Sie dann immer noch bei 10 Händlern bestellen? Vermutlich nicht. Genauso können Sie aber auch die Daten Ihrer Webanwendung bündeln und in größeren Margen an das Gerät Ihres Nutzers übertragen. Eine gezielte Analyse der Architektur Ihrer Online-Plattform oder Webanwendung legt die Optimierungsmöglichkeiten schnell offen.

3. Daten erst Laden, wenn diese benötigt werden

Wenn Sie ein Buch lesen, so lesen Sie es Seite für Seite. Ihre Online-Plattform oder Webanwendung wird von Ihren Nutzern auch Schritt für Schritt exploriert und verwendet. Bestimmte Inhalte müssen dem Nutzer daher auch gar nicht geschickt werden, solange diese für den Nutzer noch relevant sind. Dies können beispielsweise Bilder sein, die sich am unteren Ende einer Seite befinden und aktuell noch nicht in dem Sichtfeld der Nutzer sind. Diese Bilder können dynamisch und im Hintergrund nachgeladen werden, wenn der Nutzer allmählich herunterscrollt. Diesen Mechanismus nennt man „Lazy Loading“ und ist in den meisten Webanwendungen bereits implementiert und Standard. Allerdings lässt sich dieses Konzept auf alle weiteren zu übertragenden Daten Ihrer Online-Plattform erweitern. Und genau an diesem Punkt endet oft der Willen und das Know-How vieler Entwickler, da solche Mechanismen ein tiefgreifendes technisches Verständnis moderner Web-Architektur benötigt, welches nicht immer gegeben ist. Auch kann diese Maßnahme mit gehörigem Entwicklungsaufwand und Investitionskosten einhergehen - belohnt wird man aber mit einer großen Performanceverbesserung, mit der man Sekunden einsparen kann.

4. Daten effizienter übertragen

Hinter dieser Maßnahme steckt das Prinzip „Das Gleiche für weniger“. Es gibt Möglichkeiten die zu übertragende Datenmenge Ihrer Online-Plattform oder Webanwendung zu verringern, ohne dass die Nutzer einen Unterschied bemerken.

Nutzer auf Smartphones brauchen beispielsweise nicht jedes Bild oder Video in Full-HD-Auflösung, sondern haben das exakt selbe Erlebnis mit geringer aufgelösten (und somit kleineren) Versionen dieser Medien. Der zugrundeliegende Programmcode kann oftmals auch hochgradig optimiert werden und die selbe Funktionalität in weniger Zeilen Code leisten. Darüber hinaus können fortschrittlichere Dateiformate oder Kompressionsverfahren angewandt werden. Allesamt mit dem Ziel die selbe Qualität mit geringerer Datenmenge zu bieten.

5. Globales Servernetz für das Hosting

Wenn Sie ein Ersatzteil schnell benötigen, würden Sie es aus einem Laden in Ihrer unmittelbaren Umgebung ordern, oder zu demselben Preis aus dem Ausland bestellen? Natürlich würden Sie erstere Option wählen, da sie so schneller an das sehnlichst erwartete Ersatzteil kommen. Dasselbe trifft auf Webanwendungen und Online-Plattformen zu. Je nachdem, wo sich Ihre Nutzer befinden, sollten die Daten von dem nächstmöglichen Server an den Nutzer übertragen werden. Wenn Sie aber nur einen Server haben, erhöht sich die Ladezeit mit der Distanz des Nutzers zu diesem Server. Insbesondere für internationale Online-Plattformen oder Webanwendungen kann dies dramatisch werden, wenn beispielsweise Nutzer aus den USA auf die Daten vom Server in Frankfurt warten müssen.

Wie wäre es also Ihre Webanwendung von tausenden Servern rund um die Welt zur Verfügung gestellt zu haben? Dieses Konzept ist nichts neues und trägt den Namen „Content Delivery Network“ (kurz: CDN). Die Verwendung eines solchen Netzwerkes erfordert nicht die Anmietung tausender Server und funktioniert vollautomatisiert gegen Entrichtung einer überschaubaren Gebühr. Anbieter für CDN’s gibt es wie Sand am Meer und hören auf Namen wie: „Cloudflare“, „Akamai“ oder „Microsoft Azure“. Für internationale Online-Plattformen oder Webanwendungen ist das ein Must-Have!

Wo starten? Testen und Evaluieren Sie Ihre Online-Plattform oder Webanwendung!

Der wohl wichtigste Punkt ist es zunächst einmal den aktuellen Stand der Performance Ihrer Webanwendung oder Online-Plattform zu prüfen. Einige der Maßnahmen sind in einem bestimmten Grad sicherlich bereits von Ihren Entwicklern realisiert. Nun gilt es zu identifizieren, wo die größten Potenziale schlummern und diese nachhaltig zu entfalten.

Google Lighthouse als Tool zum ersten Messen der Performance

Ein großer Vorteil im Kontext von Online-Plattformen und Webanwendungen ist es, dass Performance direkt und unverfälscht messbar ist. Der Erfolg einzelner Maßnahmen kann sofort ausgewertet werden. Einen schnellen Überblick erhält man beispielsweise durch Verwendung des Tools "Google Lighthouse" [6]. Hiermit lassen sich in sekundenschnelle verschiedenste Kennwerte (u.A. Ladezeit) zur Performance Ihrer Online-Plattform oder Webanwendung ermitteln. Somit haben Sie für den Beginn der Optimierungsprozesse einen Startwert und eine Orientierung. Jede Maßnahme, die Sie nun einleiten sollte zur Verbesserung dieser Werte beitragen.

Sie können diesen automatisierten Test direkt unter folgendem Link für Ihre Seite durchführen (vielen Dank an Janis von Bleichert für dieses Tool):

https://www.experte.de/pagespeed

In der Auswertung erhalten Sie aufgeschlüsselt welche Aspekte solide umgesetzt sind (grün) und wo es Potenziale gibt (orange und rot). Nehmen Sie die Ergebnisse mit in das Nächste Meeting mit Ihrem CTO oder Tech-Lead und diskutieren Sie mit Ihm, wie Zur Verbesserung dieser Kennwerte (und somit der Performance) beigetragen werden kann. Nach der Durchführung von Maßnahmen wiederholen Sie den Test und prüfen, ob diese effektiv realisiert wurde.

Natürlich gibt dieser Artikel nur einen groben Überblick über diese oftmals stark vernachlässigte Thematik. Wie in vielen Aspekten liegt der Gewinn aber im Beginn.

Quellenverzeichnis

Kennenlerngespräch vereinbaren

Wollen Sie herausfinden, welche Potenziale in Ihrer Webanwendung schlummern?

Lassen Sie Uns in Kontakt treten und Mehrwert kreieren!

Ihre Nachricht wurde erfolgreich übermittelt!

Sie haben eine Kopie per Mail erhalten - wir werden uns in Kürze bei Ihnen melden!