Anzeige
Anzeige
News
Artikel merken

Google AMP: Darum ist die Instant-Articles-Alternative so unverschämt schnell

Google hat Mitte der Woche seine Instant-Article-Alternative AMP gestartet, mit der News-Artikel raketenschnell geladen werden können. Was steckt dahinter – und ist das wirklich so schnell?

4 Min. Lesezeit
Anzeige
Anzeige

Google AMP. (Bild: Google)

AMP: Googles News-Turbo

AMP (Screenshot: Google)

Googles AMP beschleunigt das mobile Internet. (Screenshot: Google)

Project Shield, mit dem News-Websites vor DDoS-Attacken geschützt werden sollen, sollen die „Accelerated Mobile Pages“, kurz AMP, mobilen Websites einen regelrechten Turbo verpassen. Die Lösung verfolgt einen Open-Source-Ansatz, der Publishern dabei hilft, sich weniger um die technischen Hintergründe kümmern zu müssen und sich auf die Produktion von qualitativ hochwertigen Inhalten konzentrieren zu können, so Google.

Anzeige
Anzeige

Die technischen Spezifikationen hat Google auf GitHub zur Verfügung gestellt. Am Mittwoch sind erste AMP-Websites an den Start gegangen, die in der mobilen Suche in einem Karussell oberhalb der regulären Ergebnisse mit einem Blitz-Symbol angezeigt werden. Ein Klick auf eine der so ausgezeichneten Seiten lädt den gewählten Artikel in weniger als einer Sekunde.

AMP: Websites werden schon in der Suche vorgeladen

google-AMP-gif

AMP-Artikel werden in der Google-Suche in einem Karussel dargestellt. (GIF: Google)

Dass Google Websites schon lädt, bevor wir sie aufrufen, ist bekannt, ähnlich funktioniert es auch bei AMP-Artikeln. Schon während man sich die Resultate im News-Karussell der Google-Suche anguckt, werden die angezeigten News vorab im Hintergrund geladen – allerdings nur die Inhalte, die nach dem Klick auch sofort zur Verfügung stehen müssen. Quasi das Grundgerüst der Seite und natürlich der Text.

Anzeige
Anzeige

Für den Rest des Artikels wie Bilder, Videos und Werbebanner werden Anfangs nur Platzhalter geladen. Erst wenn man die Seite aufruft, werden die Platzhalter durch die echten Inhalte ersetzt.

Anzeige
Anzeige

AMP setzt auf Googles CDN

Ähnlich wie bei Facebooks Instant Articles werden die AMP-Artikel nicht direkt vom Server des jeweiligen Publishers abgerufen, sondern von Googles Servern. Das ist ein großer Unterschied zum bisherigen Ansatz Googles, aber auch von Medienunternehmen, denn bisher fungierte Google nur als Werkzeug zur Indexierung von Websites, auf denen die Inhalte zu finden waren.

Mit dem Einzug von AMP cached Google die Inhalte auch auf den eigenen CDN-Servern, und nur so können News-Artikel inklusive Skripten und Bildern auf der ganzen Welt mit dem AMP-Turbo geladen werden, denn Googles Server sind auf der ganzen Welt verteilt. Für maximale Effizienz setzt Google außerdem auf HTTP 2.0.

Anzeige
Anzeige

AMP-Websites: HTML ist auf auf das Nötigste reduziert

Doch auf Googles Cache-Servern werden die Inhalte nicht nur einfach gespeichert, sondern noch mal optimiert. Das HTML wird komprimiert, Javascript-Inhalte, sofern noch vorhanden, werden in eine Datei zusammengefügt und ebenso komprimiert. Außerdem werden Bilder für die entsprechenden Displaygrößen angepasst. Durch die Verkleinerung der Websites können Seiten nach Angaben von Google vier Mal schneller als mobiloptimierte Seiten geladen werden und verbrauchen nur ein Zehntel des Datenvolumens.

Um AMP zu nutzen, müssen Publisher eine alternative Version ihrer Website erstellen, die traditionellem HTML ähnelt, aber stark auf das Notwendigste runtergebrochen wird. Dieser alternativen Seite gibt man für gewöhnlich eine separate Adresse, die wie folgt aufgebaut ist: deinewebseite.com/deinewebseite/amp. Wenn eure Website auf WordPress basiert, könnt ihr zu Erstellung der AMP-Seite ein Plugin verwenden. Weitere Infos zu AMP-HMTL findet ihr auf GitHub, ein Tutorial steht bei Google zur Lektüre bereit. Übrigens unterstützen die Apps Nuzzle und Pinterest auch schon AMP.

Und so sieht eine simple AMP-Seite aus:

Anzeige
Anzeige
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>

AMP-Websites sind überwiegend Javascript-frei

Ein weiterer Bestandteil, um Websites zu beschleunigen, ist die Einschränkung von Javascript. Javascript ist essentiell für interaktive Webelemente, kann aber auch den Aufbau einer Seite stark ausbremsen. Google schreibt für AMP daher vor, dass nur asynchrones JS eingesetzt werden darf.

Eingesetzt werden darf es außerdem nur in sogenannten Extensions, in denen Lightboxen, Instagram, Twitter- oder Facebook-Embeds ausgeführt werden, und amp-iframes. Third-Party-Javascript muss in einer Sandbox wie iframe ausgeführt werden.

AMP: CSS, Fonts und Analytics

Das offizielle Google-AMP-Logo. (Grafik: Google)

Das offizielle Google-AMP-Logo. (Grafik: Google)

Auch beim CSS muss man sich maßregeln, denn Stylesheets blockieren das Rendering und verlangsamen die Ladezeiten einer Website. Daher sind nur Inline-Styles erlaubt, wobei das Sheet nicht größer als 50 Kilobyte sein darf.

Anzeige
Anzeige

Was Web-Fonts anbetrifft, schreibt Google vor, dass sie optimiert werden müssen, da sie zu den größten Dateien gehören, die geladen werden müssen. Da bei einer AMP-Website Javascript das Attribut „asynchron“ besitzt, können Webfonts ohne blockierende HTTP-Requests geladen werden, so Google.

Damit das Messen des Nutzerverhaltens per Google Analytics oder anderen Diensten die Seite nicht ausbremst, hat Google eine entsprechende Schnittstelle entwickelt. Normalerweise sind Tracking-Skripte relativ schwer und träge, bei der neuen Tracking-API für AMP verhält es sich anders, denn an sie können die meisten großen Anbieter wie Adobe Analytics, Parsly, Google Analytics oder Chartbeat einfach andocken. Weitere Informationen dazu findet ihr in diesem Artikel.

Paywalls, Abodienste, Werbung und AMP

Websites werden mit AMP schneller – das freut vor allem die Leser, aber für die die Publisher ist gesorgt, denn sie müssen ihre Webseiten irgendwie monetarisieren. Laut Google unterstützt AMP ein breites Spektrum an Werbeformaten, -Netzwerken und -Technologien.

Anzeige
Anzeige

Jede Seite, die AMP nutzt, kann weiterhin ihr eigenes Werbenetzwerk und jegliche Werbeformate nutzen. Mit einer Ausnahme: Werbeanzeigen dürfen die User-Experience für den Leser nicht beeinträchtigen. Darüber hinaus werden auch Abodienste und Paywalls unterstützt.

AMP: Schnelle, schlanke Website für zufriedene Leser – und Publisher

AMP: Content is King, User-Experience ist Queen. (Screenshot: Google)

AMP: „Content is King, User-Experience is Queen.“ (Screenshot: Google)

Mit AMP will Google die Leser zufriedener machen und die Inhalte in den Vordergrund holen. Das Mantra ist daher: „Content ist King, UX ist Queen.“

Dieser im Grunde einfache Ansatz soll es ermöglichen Nutzern Content schnell, leicht und übersichtlich bereitzustellen, ohne dass nervige Ladezeiten und Werbung im Weg sind. Sind News-Artikel schneller aufgebaut, so die Rechnung, können User schneller lesen und mehr konsumieren, was den Publishern nur recht sein kann.

Anzeige
Anzeige

 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Peter

Ich habe eine Frage dazu: Werden AMP-Seiten allen mobilen Nutzern angezeigt, quasi statt Responsive Design, oder nur denen, die direkt von Google auf die Seite kommen?

Antworten
Felix

Blöd nur, dass Google damit Leute zwingt ihre Infrastruktur und ihre ad-services zu nutzen. Ich hoffe daher auf ein schnelles voranschreiten von CPP: https://timkadlec.com/2016/02/a-standardized-alternative-to-amp/

Antworten
Schwertshop.de

Hi, zum Code – beim kopieren des codes kommt ter blitz nicht mit ! warum nicht ? ich arbeite mit Frontpage.

Gruß Silvio

Antworten
Manfred Sauer

Mist ist das. Belastet die Netze, macht Bookmarking kompliziert und kostet Datenvolumen.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige