Time to paint
FP, FCP, FMP, LCP
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 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.
DevOps
Senior Frontend Entwicklung
Senior Fullstack Entwicklung
UI / UX Design
Tools & Technologien
Folgende Tools und Technologien kamen in diesem Projekt zum Einsatz.
Android
Angular
App Entwicklung
Audits
Coverage
Ionic
iOS
Java
Material
Moment JS
Node Express
NodeJS
Play Framework
Progressive Web Apps (PWA)
Rehydration
Scala
ServiceWorker
TransferState
Typescript
Web-Browser
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
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.
Übernehmen Sie auch den Betrieb nach dem Go-live?
Ja, über Managed Services betreuen wir Lösungen langfristig – inklusive Support, Monitoring und Weiterentwicklung.
Bieten Sie Schulungen für unsere Mitarbeitenden an?
Ja, über unser Enablement- & Academy-Angebot – von KI-Grundlagen bis zu individuellen Workshops.