Case Study

Entwicklung von SEO optimierten PWAs

Portal-Applikationen werden von uns als hoch performante, SEO optimierte Progressive Web Applications (PWA) mit ServiceWorker-Integration und Server Side Rendering (SSR) von einem Universal Server umgesetzt. PWA ist der state-of-the-art Standard für moderne, geräteunabhängige und am Client fest installierbare Web-Applikationen die in der Nutzererfahrung gerätespezifischer nativer Applikationen gleichkommen.

Projekt

SEO-optimierte Progressive Web Apps

Einsatz

Portal-Landingpages · geräteunabhängig · offline

Kern

Server Side Rendering · ServiceWorker · native-like UX

Basis

Angular Universal · NodeJS · Ionic

Jahr

2020

SEO

Landingpage:

SEO-optimierte Portal-Landingpage.

Native-like

User Experience:

Nutzererfahrung wie eine native App.

Performant

Geräteunabhängig:

Geräteunabhängig und performant.

Portal-Applikationen mit hoher Nutzerinteraktion stehen vor einem Zielkonflikt: Sie sollen funktionsreich und dynamisch sein, gleichzeitig aber beim ersten Aufruf sofort sichtbar werden – auch auf dem Smartphone und unter realen, oft schwachen Netzwerkbedingungen. Was der Browser erst nach dem Laden zusammensetzt, sieht der Besucher spät und die Suchmaschine nur eingeschränkt.

Hinzu kommt der Anspruch, dass sich eine solche Anwendung wie eine native App anfühlt: auf dem Gerät installierbar und mit ihren Grundfunktionen auch dann nutzbar, wenn die Verbindung abbricht. Beides in einer Codebasis zu vereinen war der Ausgangspunkt für unsere PWA-Architektur.

Die Herausforderung

Eine der großen Herausforderungen bei der Entwicklung responsiver, dynamischer, Feature-mächtiger Webapplikationen mit einer hohen User-Interaktion ist die Ladezeit-Performance. Das bedeutet, die „time to paint“ und „time to interactive“ zu beschleunigen und so insbesondere Erstkontakte erfolgreich umzusetzen. Beim ersten Aufruf eines Users entscheidet jede Sekunde über den Erfolg einer Website – abhängig von Ihrer Zielgruppe verlieren jede Sekunde 10% der Besucher das Interesse an Ihrer Applikation und springen ab. Wie lange dauert es unter realen Netzwerkbedingungen bis der Besucher die Applikation im Browser sieht – und wann kann eine Interaktion erfolgen? Wiederholte Besuche sollen schließlich für eine optimale User Experience noch weiter beschleunigt und grundlegende Funktionen auch bei Netzwerkausfall oder im Funkloch, also offline, aufrechterhalten werden.

Time to paint

FP, FCP, FMP, LCP

Time to interactive

Responsive

Bundle size

Performance

SEO, Indexierbarkeit

i18n & l10n, a11y

Offline Mode

Realisierung

Umgesetzt wurde die Applikation als Progressive Web Application (PWA) basierend auf den neuesten Frontend-Technologien: Angular 9 Universal mit Server Side Rendering (SSR) und ServiceWorker. Dies bedeutet, dass die Applikation vorab vom Server als statische HTML Seite gerendert und ausgeliefert und dem Besucher angezeigt wird, dabei während der folgenden Sekunden unter der Hand – unmerklich für den Besucher – rehydriert, also seamless durch die dynamische Applikation ersetzt wird. Der Erstkontakt sieht – selbst bei schlechten mobilen Netzwerkbedingungen – die komplette Website binnen ca. 2 Sekunden. Sobald der Besucher einige Sekunden später die Seite optisch erfasst hat und zur Interaktion ansetzt, ist die Applikation gestartet und bereit. Dies vermittelt einen Eindruck von Unmittelbarkeit der den User willkommen heißt und seine Aufmerksamkeit bindet. Jede weitere Navigation des Besuchers mit der Applikation wird anschließend vom ServiceWorker clientseitig bedient, bzw. es werden bei Bedarf weitere Komponenten oder Ressourcen nachgeladen. Eine Integration von Ionic 5 sowie Capacitor oder Cordova wurde erwogen, jedoch auf Basis der konkreten Projektanforderungen und der bestehenden, durch die PWA Eigenschaften gegebene nativeness, als nicht erforderlich verworfen.

PWA

SSR

Service Worker

Fazit

Projektrollen im Überblick

Die Experten/innen der BITS übernahmen folgende Rollen in diesem Projekt.

Tools & Technologien

Folgende Tools und Technologien kamen in diesem Projekt zum Einsatz.

App Entwicklung

Kontakt

Sprechen Sie mit uns.

Sie interessieren sich für unsere Projekte oder möchten mehr über vergleichbare Digitalisierungslösungen erfahren? Kontaktieren Sie uns unverbindlich. Wir zeigen Ihnen gerne, wie moderne KI und IT auch Ihr Unternehmen voranbringt.

Marc SchallehnIhr persönlicher Ansprechpartner

[email protected]
+49 89 121 585-0

FAQ

Fragen zu diesem Projekt

Verbessert eine PWA mit Server Side Rendering die Auffindbarkeit?

Portale, die bislang wenig performant oder schlecht in Suchmaschinen auffindbar sind, profitieren von einer PWA-Umsetzung. Im Projekt wurden Portal-Applikationen als hoch performante, SEO-optimierte Progressive Web Apps mit ServiceWorker-Integration und Server Side Rendering umgesetzt. Kennzahlen wie Time to Paint, Time to Interactive und die Indexierbarkeit durch Suchmaschinen standen dabei im Fokus.

Für welche Branchen eignet sich eine PWA-Lösung besonders?

Im Projekt wurden PWA-Portale unter anderem für Bereiche wie Event Management, Veranstaltungen, Hotellerie und Gastgewerbe umgesetzt. Diese Branchen profitieren von einer Anwendung, die geräteunabhängig funktioniert und sich fest auf dem Endgerät installieren lässt. Grundsätzlich eignet sich der Ansatz für Portale, bei denen Nutzerinnen und Nutzer über verschiedene Geräte zugreifen.

Was leistet der Offline-Modus der PWA für Nutzende?

Der Offline-Modus gehörte zu den technischen Anforderungen an die im Projekt entwickelten PWAs und ermöglicht eine eingeschränkte Nutzung auch ohne bestehende Internetverbindung. Dafür wurde die ServiceWorker-Integration genutzt, die zentrale Inhalte lokal bereithält. Der Umfang der Offline-Funktionen richtet sich nach den Anforderungen der jeweiligen Anwendung.

Wie werden Mehrsprachigkeit und Barrierefreiheit bei der PWA sichergestellt?

Internationalisierung und Lokalisierung (i18n & l10n) sowie Barrierefreiheit (a11y) gehörten zu den definierten Anforderungen an die im Projekt umgesetzten PWAs. Beides wurde bereits bei der technischen Konzeption der Anwendung berücksichtigt, etwa bei Struktur und Aufbau der Inhalte. Der konkrete Umfang hängt von den sprachlichen und barrierefreien Anforderungen der jeweiligen Zielgruppe ab.

Wie läuft ein KI- oder IT-Projekt ab?

Wir starten mit einem gemeinsamen Zielbild, analysieren Ausgangslage und Daten und leiten daraus konkrete Use Cases ab. Danach setzen wir iterativ um – vom Prototyp über die Integration bis zum verlässlichen Betrieb.

Was kostet ein Projekt?

Die Kosten hängen von Umfang, Komplexität und Zielsetzung ab. Kleinere Analysen und Prototypen starten im niedrigen Projektrahmen, umfangreiche Plattform- und Integrationsprojekte entsprechend höher.

Wie lange dauert die Umsetzung?

Ein erster Proof of Concept ist oft in wenigen Wochen möglich, größere Lösungen entstehen über mehrere Monate in iterativen Schritten.

Arbeiten Sie herstellerneutral?

Ja. Wir wählen Technologien und Plattformen anhand Ihrer Anforderungen aus – nicht anhand von Herstellerbindungen.

Womit beginnt die Zusammenarbeit am besten?

Meist mit einem unverbindlichen Informationsgespräch oder einer kompakten Potenzialanalyse.

Zum Einstiegsangebot

Übernehmen Sie auch den Betrieb nach dem Go-live?

Ja, über Managed Services betreuen wir Lösungen langfristig – inklusive Support, Monitoring und Weiterentwicklung.

Managed Services & Betrieb

Bieten Sie Schulungen für unsere Mitarbeitenden an?

Ja, über unser Enablement- & Academy-Angebot – von KI-Grundlagen bis zu individuellen Workshops.

Enablement & Academy