Single Page Application

Single-Page-Webanwendung

18.04.2019

Ist für den User ein Wellnessfaktor vorprogrammiert?

Die Single Page Application wird auch kurz als SPA bezeichnet.
Dabei könnte man fast meinen, dass SPA etwas mit Wellness und Entspannung zu tun haben könnte.
Eine Single Page Application ist jedoch eine webbasierte Anwendung, die nur mit einer einzigen HTML-Datei erstellt wird und deren Inhalte, wenn nötig, im Hintergrund dynamisch nachgeladen werden.

Welche Ansprüche stellen Sie an eine Webseite?

Ist es nicht eine schöne Vorstellung, problemlos durch eine Webseite scrollen, die dynamisch und leicht bedienbar ist?
Viele Unternehmen und Webseitenbetreiber haben zwar eine optisch ansprechende Webseite, viele Webseiten sind jedoch für mobile Endgeräte ungeeignet d.h. nicht mobil optimiert und müssen so hohe Absprungraten einbüßen.

Wussten Sie, dass ganze 53% der Webseitenbesucher bei einer Seitenladezeit über 3 Sekunden abspringen (Quelle: thinkwithgoogle.de)?
Gerade die Internetnutzung über das Smartphone ist im heutigen Zeitalter besonders von Bedeutung:
Laut Statista wurden im Jahr 2018 weltweit 50,82% der Seiten auf mobilen Endgeräten aufgerufen.
Google veröffentlichte im Februar 2018 eine Diagnose wie sehr die Seitenladezeit die Absprungraten beeinflussen. Infomationen dazu finden Sie hier.

Think with Google

Gibt es eine Anwendung, die dem Problem der Bedienbarkeit gewappnet ist? Die gibt es. Die sogenannte Single Page Application oder auch Single Page Webanwendung genannt!

Diese Anwendung ist plattformunabhängig und somit für Desktop-PCs und mobile Endgeräte geeignet, was einen enormen Vorteil darstellt.

Was ist eine Single Page Application und worin besteht der eigentliche Unterschied zu einer herkömmlichen Webseite?

Normalerweise bestehen Webanwendungen aus mehreren HTML- Dokumenten, welche untereinander verlinkt sind.
Durch das Zusammenspiel der einzelnen Dokumente mit internen Verlinkungen, ergeben diese die gesamte Website.
Jeder kennt es: Öffnet man innerhalb einer Website eine neue Seite, verschwindet die Aktuelle und es baut sich eine komplett neue Seite auf.
Zumindest geschieht dies auf den meisten Webseiten im World Wide Web.

Wenn auch noch mehrere User die Seite zum selben Zeitpunkt nutzen, kann es zu Komplikationen und einer höheren Ladezeit führen, da jede einzelne Interaktion eine Anfrage an den Webserver sendet.

Doch damit ist jetzt Schluss, denn durch die Single Page Application, welche webbasiert ist und genau genommen nur durch eine einzige Seite abgewickelt wird, wird nur ein einziges HTML-Dokument genutzt.
Veränderungen werden selbstständig geladen, also dynamisch und unbemerkt während der Nutzerzeit.
Dadurch ist kein klassischer "Page Reload" mehr nötig.
Das geschieht über das Konzept AJAX, welches für „Asynchronous JavaScript and XML“ steht. Die URL in der Eingabezeile des Browsers ändert sich somit nicht.
Die mit SPA erstellten Webseiten lassen klassische Layouts im Vergleich ziemlich alt aussehen.
Das reaktive Design passt sich jeder Bildschirmgröße an und stellt dadurch die Anwendung in allen gängigen Internetbrowsern, wie z.B. Google Chrome, Mozilla Firefox, objektiv einwandfrei dar.

Zwar dauert der erstmalige Aufruf der SPA gewöhnlich etwas länger, das liegt jedoch an dem vollständigen Ladevorgang des Frameworks.
Nach dem vollständigen Ladevorgang können die im Webbrowser zwischengespeicherten Daten, im Falle einer Netzwerktrennung, trotzdem verwendet werden.
Ein sehr gutes SPA-Beispiel bietet hier Google Mail: Bei einer fehlenden Internetverbindung können Sie trotzdem noch ungestört Ihre E-Mails lesen.
Am besten umsetzbar ist diese Anwendung mit Hilfe von JavaScript-Frameworks.
Beliebt sind vor allem Angular und React, aber auch Vue.js wird immer populärerer in den Entwicklerkreisen.
VueJs bietet nämlich einen einfachen Einstieg, da lediglich Kenntnisse in Javascript und HTML notwendig sind und lässt dennoch durch die hohe Skalierbarkeit vielschichtige Anwendungen optimal umsetzen.
Die folgenden JavaScript Frameworks sind auch für eine SPA geeignet: Aurelia.io, Backbone.js, Durandal.js, Knockout.js und OpenUI5.

Weitere gute Beispiele für erfolgreiche Single-Page-Applications sind Facebook, Whats App Web, Twitter, Google Maps und der derzeit beliebteste Streaming Dienst Netflix.

Durch den großen Erfolg des Social Media-Giganten Facebook, orientieren sich immer mehr Unternehmen an den Facebook-Konzepten. Dies ist wahrscheinlich auch ein Grund für den steigenden Erfolg von SPAs.

Zu Beginn waren SPAs typisch für Start-Up-Unternehmen, dies ist aber längst nicht mehr der Fall. Mittlerweile wollen beinahe ALLE eine Website dieser Art.

Die folgende Grafik von Google Trends macht den „Hype“ um SPAs ziemlich deutlich:

Der Wert 100 steht für die höchste Beliebtheit des Suchbegriffs bei Google Trends. Im März 2018 (Wert: 100) und Januar 2019 (Wert: 97) lag das Interesse am Höchsten.

Datenquelle: Google Trends (https://www.google.com/trends)

Vorteile einer SPA

  • Bessere User-Experience
  • Hohe Schnelligkeit
  • Mögliche Offline-Nutzbarkeit
  • keine lokal installierten Plug-Ins nötig – Erhöhung der Reichweite
  • Schnelle moderne Webseitenerstellung, statt aufwendige Programmierung mittels HTML, CSS und JavaScript

Single Page Applications und SEO - Können die beiden Freunde sein?

JavaScript und Suchmaschinen waren noch nie das Traum-Duo. Suchmaschinen hatten immer das Problem Inhalte von JavaScript zu finden, optimal zu laden und auszuführen.
Wie im oberen Teil des Beitrags bereits erwähnt, werden bei einer Single-Page-Webanwendung Inhalte über JavaScript nachgeladen.
Dadurch fällt es Suchmaschinen, wie Google, Bing und Co. schwer diese Webanwendungen zu durchsuchen.
Die Ursache liegt auf der Hand: Die sogenannten Crawler benötigen eindeutige URLs, um Inhalte zu erfassen und auszuwerten.
Die Webseite ist nicht existent und scheint wie unsichtbar. Wer unsichtbar ist wird natürlich auch nicht von seiner Zielgruppe gefunden.
Dass Metadaten auch nicht pro Seite anpassbar sind, macht den Fall nicht einfacher.

Aufgrund dessen ist die Suchmaschinenoptimierung (SEO) erheblich aufwendiger für Single Page Applications, als für Standardwebsites.

Eine Option für die Suchmaschinensichtbarkeit ist das Client-Side-Rendering: Ein HTML-Code wird auf einer Client-Seite gerendert und als HTML-Code gespeichert.

Bei einer hohen Anzahl an Benutzern ist diese Variante jedoch sehr mühselig, da für jeden Nutzer eine eigene HTML-Datei erstellt werden muss.

Ein Trost für alle SPAs: Google setzt sich bereits mit dem Thema auseinander, was das problemlose Indexieren von JavaScript-basierten Webseiten prophezeit.

Unter anderem gibt es für den Googlebot eine gute Lösung:

Vorausgesetzt die SPA wurde mithilfe des JavaScript-Frameworks wie beispielsweise Angular konzipiert, kann Server Side Rendering genutzt werden und der Crawler muss lediglich das fertige HTML auslesen.
Dies bedeutet weniger Rechenaufwand für den Googlebot.

Nachteile einer SPA

  • schlechte Durchsuchbarkeit für Suchmaschinen
  • schwierige Indexierung 
  • Geringere Rankingchancen: Meistens nicht bei den ersten Suchergebnissen dabei

Für wen/was ist eine Single Page Application geeignet?

Sie ist ideal für Seiten, die eine hohe Besucherzahl und/oder eine hohe Interaktion vorweisen, da Inhalte nur portionsweise auf der Webseite hochgeladen und somit Verzögerungen minimiert werden.

Gerade für Anwendungen, wie Computerspiele, eignen sie sich besonders gut, da hier eine hohe Interaktion und eine schnelle Ladezeit erforderlich sind.

Kleine Anwendungen, wie Landingpages können ebenso von SPA profitieren.

Wenn Sie sich also von modernen und einfach konzipierten Seiten angesprochen fühlen, weil Sie beispielsweise ein Produkt anbieten und den direkten Weg bevorzugen, ist die Single Page Application ideal für Sie!

Wenn Ihre Webseite hingegen stark technisch orientiert oder ihre Zielgruppe eher traditionell weborientiert ist und Sie vor allem durch ein gute Positionierung in der Trefferliste gefunden werden wollen, raten wir Ihnen von einer Single-Page-Webanwendung ab.

 

Konnten wir
Ihr Interesse wecken?

Nehmen Sie jetzt Kontakt mit uns auf

Kontakt aufnehmen

oder

089 / 201 711 - 0

rufen Sie uns einfach an