PWAs vs AMPs: Die beste Wahl für Ihr Web-Projekt

Performance und Usability für Mobilgeräte

Google möchte, dass Webentwickler bei ihren Projekten vor allem mobile Nutzer im Blick haben. Seit 2016 stellt Google sein Ranking schrittweise auf einen „Mobile-First“-Index um, der vor allem die Mobilversionen von Websites berücksichtigt. Seit November 2019 werden neue Websites nur noch mit einem mobilen Googlebot indexiert.

„Mobile First“ ist letztlich eine sinnvolle Reaktion auf die Dynamik der Webnutzung: Schon seit 2017 wird mehr mobil gesurft als mit Desktop-Rechnern; im Mai 2021 hatten Smartphones und Tablets gemeinsam einen Anteil von 57 Prozent am weltweiten Traffic (Quelle: Statcounter).

Spätestens mit dem kommenden „Page-Experience“-Update von Googles Ranking-Algorithmus (wahrscheinlich ab Mitte Juni 2021) werden daher auch Performance und Benutzerfreundlichkeit einer Webseite auf Mobilgeräten wichtig für das Ranking. Dann werden die sogenannten „Core Web Vitals“, zu denen Google Ladezeit, Reaktivität bei Interaktion sowie visuelle Stabilität zählt, offizielle Rankingfaktoren.

Um die Entwicklung von mobiloptimierten Webseiten zu unterstützen, bietet Google nicht nur eine Reihe von Anleitungen und Tools für Entwickler an, der Suchmaschinenriese treibt auch die Entwicklung neuer Technologien für das mobile Internet voran.

Für Entwickler interessant sind in diesem Zusammenhang vor allem AMPs (früher ein Akronym für „Accelerated Mobile Pages“) sowie Progressive Web Apps (PWA). Zu beiden Konzepten wird viel geschrieben und beiden wird von Google eine große Zukunft prophezeit. Nicht wenige Entwickler fragen sich daher, was das für ihre Arbeit bedeutet und welches der beiden Konzepte für ihr Projekt am geeignetsten ist.

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Performance: AMPs

AMP ist ein von Google 2016 vorgestelltes Format für mobile Webseiten, das die Ladezeiten auf Mobilgeräten beschleunigen soll. Wichtige Werkzeuge dafür sind eine deutlich abgespeckte HTML-Version namens AMP HTML, ein eigenes, asynchron arbeitendes JavaScript-Framework (sowie strenge Regeln für User- und 3rd-Party-Skripte) und insbesondere der CDN-basierte AMP-Cache. Mehr Informationen finden Sie in unserem Artikel: AMP – Googles schlankes HTML für Mobilgeräte

Nach Googles Vorstellung gelangen mobile Webnutzer auf AMP-Seiten vor allem über Googles Suchergebnisse. Dort erhalten solche Seiten auch eine hervorgehobene Darstellung mit AMP-Icon, strukturierten „Rich Results“ und eventuell einem Platz im Top-Story-Karussell. Für ihren Klick werden die Nutzer mit nahezu verzögerungsfreier Auslieferung von Googles eigenen Servern belohnt. Kritiker sehen darin einen Versuch von Google, seine Dominanz im Web weiter auszubauen. Die AMP-Entwickler betonen dagegen, dass sich neben Google auch viele andere Personen und Unternehmen an diesem Projekt beteiligen und Entscheidungen von der Entwickler-Community gefällt werden. AMP wird als Open-Source-Projekt entwickelt und arbeitet seit 2019 unter dem Dach der OpenJS Foundation, die auch hinter anderen bekannten Projekten wie Node.js und jQuery steht. Inzwischen unterstützt auch Microsoft Bing AMP-Seiten (inklusive Caching).

Usability und Funktionalität: Progressive Web Apps (PWAs)

Auch die Entwicklung von Progressive Web Apps wird vor allem von Google vorangetrieben. PWAs sollen die Vorteile von Web-Apps mit denen von installierbaren (nativen) Mobilapps verbinden: Wie traditionelle Web-Apps bieten sie ein app-ähnliches Look & Feel, aber laufen im Browser und funktionieren daher ohne vorherige Installation und unabhängig von Betriebssystem und Gerätetyp. Im Gegensatz zu nativen Apps müssen sie nicht über App Stores wie Google Play oder Apples App Store vertrieben werden. Gehostet auf dem eigenen Server, können sie selbst gewartet, aber auch verlinkt oder von Suchmaschinen indexiert werden. Gleichzeitig kommen sie ähnlich wie die nativen Apps auch mal ohne bestehende Internetverbindung aus, lassen sich installieren und können Funktionen des Betriebssystems nutzen, insbesondere Push-Benachrichtigungen.

Um das zu erreichen, nutzen PWAs wie andere moderne Websites HTML5, CSS3, JavaScript und Verschlüsselung (TLS). Dieser Website-Kern wird in eine App-Schale (App Shell) verpackt, die auf dem Gerät gespeichert werden kann. So muss nur aktueller Content vom Server geladen werden. Ebenfalls lokal installiert wird ein „Service Worker“, der als Proxy zwischen Browser und Server die Offline-Fähigkeit der PWA sicherstellt. Moderne Browser-APIs erlauben die Nutzung diverser Betriebssystemfunktionen. Mehr Infos finden Sie in unserem Blogartikel zu Progressive Web Apps.

Wo liegen die wesentlichen Unterschiede?

Diese kurzen Beschreibungen machen bereits deutlich, dass AMPs und PWAs verschiedene Zielsetzungen verfolgen. Zwar sollen beide die Nutzung mobiler Webangebote optimieren, setzen dabei aber unterschiedliche Prioritäten.

AMP-Techniken zielen vor allem auf Performance, und Google selbst propagiert AMPs als kostengünstige und einfache Methode, um die künftigen „Page-Experience“-Rankingfaktoren zu beeinflussen und entsprechende Performance-Ziele zu erreichen. Der Fokus von PWAs liegt dagegen eher auf solchen Aspekten der Nutzererfahrung, die mit der Integration der Webanwendung in die Systemumgebung des Gerätes zusammenhängen. Entscheidet sich der Nutzer für eine Installation, startet eine PWA danach ebenfalls sehr schnell. Gleichzeitig bietet sie deutlich mehr Funktionen als traditionelle Web-Apps, während AMPs prinzipbedingt noch etwas weniger können als diese. AMPs erscheinen Nutzern klar als zu besuchende Webseiten, während PWAs wie native Apps stets auf dem Endgerät präsent sind – der Jackpot für die Kundenbindung.

Auf der anderen Seite punkten AMPs derzeit noch bei SEO-Aspekten, weil Google sie bevorzugt. Doch scheint das Page-Experience-Update auch hier Veränderungen zu bringen, weil das AMP-Format nicht mehr Voraussetzung sein wird, um im Top-Story-Karussell angezeigt zu werden.

Und was bedeutet das für mein Projekt?

Betrachtet man nur die Technologie, könnte man verkürzt sagen: AMPs für (viel) Inhalt, PWAs für (regelmäßig genutzte) Funktionen. Die AMP-Vorteile kommen vor allem bei contentlastigen Seiten zum Tragen, bei denen die Rezeption und nicht die Interaktion im Vordergrund steht, beispielsweise Online-Magazine oder umfangreiche Blogs. Diverse Nachrichtenwebsites wie Spiegel Online, The Guardian oder Washington Post nutzen das Format. Aber auch kleinere Seitenbetreiber, die nicht die Ressourcen haben, um suchmaschinenoptimierte Mobilseiten schnell zu erstellen, können von AMP profitieren. Auf amp.dev gibt es eine umfangreiche Sammlung von AMP-Komponenten für zusätzliche Features, mit denen Sie beispielsweise Animationen, Anzeigen oder Autocomplete-Vorschläge einfach implementieren können.

Ob sich allerdings der Aufwand lohnt, Standard- und AMP-Versionen einer Website parallel zu pflegen, erscheint fraglich. PWAs haben ein solches Problem nicht – im Gegenteil: Sie sind angetreten, den Mehrfachaufwand für Websites und native Apps mit ähnlichem Funktionsumfang zu verringern. PWAs sind die Technologie der Wahl für Seitenbetreiber mit regelmäßigen Nutzern, denen sie nützliche Funktionen schnell und bequem auf ihrem Mobilgerät bereitstellen wollen. Das gilt zum Beispiel für E-Commerce- und Social-Media-Angebote – aber auch etwa für Anbieter, die die Kundenbindung erhöhen wollen. Unternehmen wie Twitter, Trivago, Tinder, Starbucks, Wikipedia und die Washington Post setzen auf PWAs.

Die Washington Post ist gleichzeitig ein Beispiel dafür, dass es hier kein Entweder-oder geben muss. Beispielsweise kann eine AMP-Seite als schnell ladende Einstiegsseite genutzt werden, um die bei PWAs mögliche Verzögerung bei der ersten Benutzerinteraktion zu umgehen.

Allerdings gibt es abseits der Technologie einige Argumente, die gegen AMPs sprechen. Zum einen erhöht man damit die Abhängigkeit von Google als Herr des Formats, und das nicht nur, wenn man das AMP-Caching nutzen will. Gleichzeitig ist die Zukunft von AMPs unklar – einige Beobachter interpretieren Googles Page-Experience-Update als weiteres Zeichen dafür, dass sie in Bezug auf SEO an Bedeutung verlieren werden. Und letztlich steht es ja jedem Entwickler frei, die AMP-Methoden – weniger HTTP-Anfragen, schlanker Code, asynchrones JavaScript, CDN-Caching – in Eigenregie zu verwenden.

Mehr Informationen dazu finden Sie in unserer Artikel-Reihe zur Performance-Optimierung.

Titelmotiv: Photo by Nasik Lababan on Unsplash