Die Progressive-Web-App als Ablöse zu Responsive Design und Native App

Bereits im ersten Teil unseres Beitrags erklärten wir, was eine Progressive-Web-App von bekannten Lösungen wie Responsive Design und Native App unterscheidet und boten eine Übersicht, was die Vor- und Nachteile einer PWA sind. In diesem Beitrag gehen wir auf die Bedeutung von PWAs für SEO ein, zeigen Ihnen Best-Practice-Anwendungen und verraten wie im Hause Magento, Shopware & Spryker mit dem Thema Progressive-Web-App umgegangen wird.

 

Wer suchet der findet: Die PWA und Ihre Bedeutung für SEO

SEO & Progressive Web App

Progressive-Web-Apps sind wie erwähnt auch ein Thema für Google und das Ranking in den gängigen Suchmaschinen. 34% machen die Besuche durch Suchmaschinen im E-Commerce aus. Keywords mit hohem Suchvolumen sind also ein wichtiger Hebel für Online-Händler. Sinkende Downloadzahlen nativer Apps, die gegen Null gehen, stellen so natürlich ein enormes Problem dar: kein Download, keine Sichtbarkeit – und umgekehrt. Das Google an PWAs interessiert ist zeigt das klare Commitment des Internetriesen auf diese Technologie.

 

 

 

Das ist nicht alles was es zur Liaison zwischen PWA und SEO zu wissen gibt. Einige Tipps haben wir bereits zusammengetragen:

    • Google steigert die Fähigkeit, Skript-Sprachen auszulesen Jahr für Jahr. Da eine PWA auf einem JavaScript basiert, wird empfohlen, eine Bibliothek oder ein Framework wie Angular, Polymer oder React heranzuziehen und die Best Practice SEO-Tipps zu befolgen, um das Crawling und Rendering von JavaScript-Seiten steuern zu können. Falls kein Framework verwendet wird, sollten bestimmte Ressourcen unter Umständen vorgerendert werden.
    • CSS und JavaScript sollten mit dem HTML inline ausgeliefert werden. Trotz höherer Netzwerkauslastung werden die wichtigsten Elemente der Website so direkt geladen.
    • Künftig sollten Webseiten-Design, Content und Interaktionspunkte clientseitig mittels API geladen werden, da die Umsetzung von PWAs darauf abzielt, dass grundlegende Funktionen immer genutzt werden können (Progressive Enhancement).

 

iOS vs. Android: Wer hat diesmal die Nase vorne?

Apple vs. Android

Die Antwort ist hier klar: Android (derzeit). Via Android werden bereits die meisten Funktionen einer PWA bereits unterstützt. iOS fordert beispielsweise derzeit noch eine permanente Internetverbindung. Android nutzt lieber eine hohe Bandbreite, solange noch eine Verbindung besteht.

 

 

 

 

Diese Online-Händler machen’s vor: Best Practice Beispiele

Forbes Magazin:

Das Wirtschaftsmagazin launchte schon Anfang 2017 die eigene Webseite als Progressive-Web-App. Dies Seite liefert in Sachen Usability und Performance beste Ergebnisse. Durch beste Ladezeiten konnte Forbes.com, die Durchschnittszeit zum rendern von Inhalten von 6,5 Sekunden auf 2,5 Sekunden reduzieren. Tests ergaben außerdem, dass sich die Sitzungsdauer der User verdoppelte und die Seitenaufrufe um 20% anstiegen.

 

Lancôme:

Die Luxus-Kosmetikmarke Lancôme erzielte nach dem Launch einer PWA eine Steigerung der Conversion-Rate um 17%. Außerdem stiegen die mobilen Sessions unter iOS um 53% an. Mittels Push-Benachrichtigungen konnten 8% der User zurück in den Shop gewonnen und konvertiert werden. So stieg die Conversion auf mobilen Endgeräten auf einen höheren Wert als über die Desktop-Webseite erreicht werden konnte.


Bildquelle: www.mobify.com

 

AliExpress:

Der international bekannte Online-Marktplatz AliExpress verzeichnet im Mobile Commerce ein dreimal höheres Wachstum als im E-Commerce. Zunächst sollte aufgrund dieser Zahlen die Downloadrate der eigenen Native App gesteigert werden. Das führte jedoch nicht zum gewünschten Erfolg und so entschied man sich für eine Progressive-Web-App-Lösung. Man generierte 104% mehr neue User, steigerte mit der PWA sogar die Conversion-Rate unter iOS um 82%. Außerdem verdoppelten sich die besuchten Seiten pro Session, was auch die durchschnittliche Dauer der Sessions um 74% anhob.


Bildquelle: blog.prisync.com

 

Mit System: So stehen Magento, Shopware und Spryker zu Progressive-Web-Apps

Als Partner-Agentur der drei genannten Systeme ist deren Position zum Thema selbstverständlich essentiell. Wir haben die wichtigsten Informationen für Sie zusammengefasst.

Magento: Mit Magento 2.3 kommt das PWA-Studio

Bereits im Recap zur Magento Imagine berichteten wir über die Neuerung innerhalb der Version 2.3 von Magento und natürlich über das PWA-Studio. Es ist ein echter Meilenstein: Das PWA-Studio liefert Entwicklern ein umfangreiches Tool-Set, um Frontends künftig auch als Progressive Web Apps zu entwickeln. Progressive Web Apps sind dabei als alternative Frontend-Technologie im Vergleich zu dem Standard Responisve Design Template zu verstehen. Mit dem PWA Studio wird auch ein auf Conversion und Performance optimiertes PWA Standard Theme (Venia Theme) zur Verfügung stellen.

Spryker: Optimale Anbindung durch modulare Struktur

Spryker ermöglicht seinen Kunden ein Höchstmaß an Agilität und Geschwindigkeit, um kundenzentrierte digitale Geschäftsmodelle ohne lange Vorlaufzeiten zu realisieren. Die stetig wachsende Anzahl an Kunden-Touchpoints und die daraus resultierenden Komplexität der Customer Journey erfordert die Flexibilität, Kunden-Zugang über sämtliche aktuellen und zukünftigen digitalen Touchpoints zu schaffen. Das modulare Betriebssystem Spryker Commerce OS bietet optimale Voraussetzungen für die Entwicklung einer Progressive-Web-App.

Shopware: Der Playground kommt

Wie schon erläutert benötigt eine Progressive-Web-App eine JavaScript basierte Lösung, um zu funktionieren. Da Shopware diese Vorrausetzung nicht erfüllt, ist die Umsetzung hier kompliziert. Das System hat allerdings eine PHP-Code-Basis, was die Umsetzung derzeit nur über ein eigenes gebaute API ermöglicht. Mit dem neuen Shopware Playground und dem damit verbundenen API-basierten System hat Showare auf dem SCD 2018 in Duisburg bereits gezeigt, dass auch solche Themen auf der Roadmap vermerkt sind.