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.

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

  • Event Management
  • Veranstaltungen
  • Hotellerie
  • Gastgewerbe

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

  • PWA

  • SSR

  • Service Worker

Projektrollen im Überblick

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

  • Senior Frontend Entwicklung

  • Senior Fullstack Entwicklung

  • UI / UX Design

  • DevOps

KONTAKT

Mehr Informationen anfordern

Wenn Sie mehr Informationen zu diesem Thema oder zur BITS erhalten möchten, dann zögern sie nicht uns unverbindlich zu kontaktieren.

Deborah Ruff steht ihnen hierbei sehr gerne für alle Themen zur Verfügung.

[email protected]

+49 (0)89 12158550
„Ich freue mich über Ihre Kontaktaufnahme.“

Sie können auch ein Termin direkt in unserem Kalender vereinbaren.

2022-08-31T16:20:10+02:00
Nach oben