• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Awantego

  • Unique Content
  • Blog
  • Kontakt
You are here: Home / Webdesign / Hier kommt der Blitz: AMP HTML mischt das Mobile Web auf

21. März 2016 by Janina Winkler

Hier kommt der Blitz: AMP HTML mischt das Mobile Web auf

Accelerated Mobile Pages

Schnell wie der Blitz – das ist das Versprechen, mit dem das Open-Source-Projekt AMP sich im Technologiedschungel platziert. Zunehmend verwenden wir mobile Geräte zur Internetnutzung, der steigende Anteil des mobile Traffics ist unaufhaltsam. Schließlich ist es ungemein praktisch im Supermarkt nochmal kurz nachzuschauen welche Zutat jetzt noch für das geplante Abendessen fehlt oder kurz die Abfahrtszeiten der Bahn zu prüfen. Wir haben uns daran gewöhnt, dass das Internet unser ständiger Begleiter in allen Lebenslagen ist.

Doch lange Ladezeiten auf mobilen Geräten sind den Nutzern immer wieder ein Dorn im Auge. Kurz morgens in der Bahn die neuesten Meldungen des Tages überfliegen? Fehlanzeige, mobile Nutzer werden viel zu oft vom fast unerträglich langsamen Aufbau der Websites gebremst. AMP HTML soll hier Abhilfe schaffen. Frei nach dem Motto schnell, schneller, AMP.

Inhalt

  • Was sind Accelerated Mobile Pages?
  • Wie funktioniert AMP?
  • Wie nutze ich AMP für meine Seite?

Was sind Accelerated Mobile Pages?

amp-html (2)„AMP“ ist die Abkürzung für Accelerated Mobile Pages, ein Open-Source-Projekt von Google, das sich zum Ziel gesetzt hat, die Ladezeit von Inhalten auf mobilen Geräten stark zu verkürzen – bis zu 85% schnellere Ladezeiten sind möglich. Hierfür wurde ein Framework entwickelt, bei dem alle Interessenten auf der Technologieplattform GitHub sich beteiligen können. Anstatt des regulären HTML-Tags <html> wird eine AMP-HTML-Seite mit dem bezeichnenden kleinen Blitz in <html ⚡> ausgezeichnet.

Da das Projekt von Google kommt, werden Websites die AMP verwenden in der mobilen Suche bevorzugt behandelt und gesondert angezeigt. Auch hat Google namhafte Partner für das Projekt gewonnen, der Contentgigant WordPress hat bereits letztes Jahr ein Plugin entwickelt, mit dem WordPress-Seiten sich um die AMP-Technologie erweitern lassen.

Websitebetreiber sollten also möglichst schnell in die neue Technologie einsteigen um nicht in den Rankings abgehängt zu werden. Es ist absehbar dass der Anteil des mobilen Traffics weiterhin wachsen wird, deswegen ist es sinnvoll die eigenen Websites nicht nur in Hinsicht auf responsive Design auf die Bedürfnisse der mobilen Nutzer anzupassen. Doch wie funktioniert die Technologie hinter AMP und wie kann man sie verwenden?

Wie funktioniert AMP?

amp-html (1)Mit AMP werden durch verschiedene technische Vereinheitlichungen schnellere Ladezeiten erzielt. Dazu gehört die Einschränkung bestimmter Funktionen von JavaScript. „Erlaubt“ sind bei AMP nur asynchrone Scripte, bei denen Inhalte parallel geladen werden können. Dadurch werden Verzögerungen bei der Ladezeit vermieden da die Inhalte gleichzeitig und nicht hintereinander geladen werden.

Ein weiterer Kniff den sich AMP zunutze macht ist, dass die Größe aller Elemente vorab angekündigt werden. Sie kennen sicher den ärgerlichen Moment in dem sie auf einen Button auf einer mobilen Seite drücken wollen und der Button unter Ihrem Finger verschwindet weil ein nachgeladenes Bild die Länge der Seite verändert hat. Bei AMP müssen alle externen Ressourcen wie Bilder, Werbung und andere Elemente Ihre Größe bereits vor dem Laden ankündigen, AMP platziert dann Platzhalter auf der Seite. Dieses Vorgehen hat auch den Vorteil, dass die Ladezeit nicht mehr durch das Warten auf Elemente mit unbekannter Größe herausgezögert wird.

Durch die Optimierung der Darstellung werden ebenfalls weitere Verkürzungen der Ladezeit erzielt. Bei der Verwendung von AMP HTML werden nur zwei Arten der Animation zugelassen: Transparenz und Vergrößerung. Diese Animationen können komplett an den Prozessor des verwendeten Gerätes übergeben werden und der Browser wird entlastet. Dadurch werden keine Ressourcen des Browsers für Animationen abgezogen und die Seite schneller gerendert. Außerdem wird von Google ein eigener Cache speziell für AMP zur Verfügung gestellt, wodurch die Inhalte ebenfalls schneller übertragen werden. Einen Einblick in weitere technische Details erhalten Sie auf der offiziellen Seite des Projekts.

Wie nutze ich AMP für meine Seite?

Die einfachste Möglichkeit AMP für den eigenen Internetauftritt zu nutzen, ist die Verwendung des WordPress-Plugins. Falls Sie Ihre Seite nicht mit WordPress erstellt haben ist das Vorgehen etwas anders. In der Dokumentation des Projektes finden Sie alle Details die Sie brauchen um mit der Optimierung Ihrer Website loszulegen, die wichtigsten Punkte sind hierbei die speziellen HTML-Tags die unter Verwendung von AMP zum Einsatz kommen und die AMP JS library. Alle Details der Spezifikation erfahren Sie hier.

Damit haben Sie alles was Sie brauchen um auch Ihre Seite blitzschnell durchstarten zu lassen! Einige Impressionen wie AMP-Seiten im Vergleich zu regulären Seiten abschneiden gibt es hier:

 

Ähnliche Artikel

  • Produktsuche im E-Commerce: So suchen Kunden nach Produkten 17. Dezember 2021
  • Produktbeschreibung erstellen: Tipps für Einsteiger 12. November 2021
  • 7 Tipps für professionelle Produktbeschreibungen 6. August 2021
  • Content Marketing - die 15 wichtigsten Trends 2022 31. Januar 2022

Filed Under: Webdesign Tagged With: accelerated mobile pages, amp, amp html, webtechnologien

Primary Sidebar

Neueste Artikel im Blog

Produktpräsnetation auf dem Handy ansehen

So gelingt Ihnen eine authentische Produktpräsentation: Tipps für Ihre Produktseiten

23. Juni 2022

automatisierte Produktbeschreibungen steigern Ihre KPIs

Automatisierte Produktbeschreibungen: Erwartungen und Realität

15. Juni 2022

Hyperpersonalisierung im Marketing: So steigern Sie Ihre Umsätze

26. Mai 2022

strukturierte Daten sind wichtig für den E-Commerce

Warum strukturierte Produktdaten für die automatisierte Textgenerierung wichtig sind

24. Mai 2022

5 Tipps, um den Warenkorbwert zu erhöhen

11. Mai 2022

Automated Content erstellen: Ein Textkonzept ist erforderlich

Content generieren: So erstellen Sie automatisierte Texte

3. Mai 2022

Kundenzufriedenheit wird durch die Kundenansprache bestimmt

Kundenansprache im E-Commerce: 9 Tipps für wirkungsvolle Texte

26. April 2022

E Commerce KPIs

E-Commerce KPIs: Welche sind die wichtigsten für Ihr Online Shop?

22. April 2022

Kategorietexte für Onlineshops

Kategorietexte für Onlineshops: Pflicht oder nice-to-have?

8. April 2022

Kontakt zur Agentur

Agentur Awantego
Tel.: +49(0)711/48890-50
E-Mail: info@awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Traumjob bei Awantego:

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Downloads / Tutorials

  • Downloads
  • Tutorials

Weitere Anleitungen und Tutorials finden Sie im Blog von Awantego.com

Am meisten gelesen

  • Unique Content – Die Technik dahinter
  • Marketing Lexikon
  • Marketing Automation
  • Mehr Kunden mit Newsletter-Marketing

Weitere Beiträge im Blog

Kundengruppen identifizieren und erfolgreich ansprechen

Kundentypen erkennen und richtig ansprechen

26. November 2021

Online shop

Produktbeschreibung erstellen: Tipps für Einsteiger

12. November 2021

Marketing Weihnachten_Weihnachtsgeschäft

Weihnachtgeschäft 2021 im E-Commerce: Content-Tipps für Online Händler

22. Oktober 2021

Marketing_Personalisierung

Personalisierte Produktbeschreibungen revolutionieren die Customer Experience

8. Oktober 2021

Remote Working

Remote Work bei Awantego: Wir fühlen uns wohl dort, wo wir arbeiten!

15. September 2021

Personalisierte Produktbeschreibungen stärken die Kundenbindung

Konkurrenzfähig im E-Commerce mit personalisierten Produktseiten

13. September 2021

Kundenexperience_Customer_Experience

So können Sie die Customer Experience mit Hilfe von Produktbeschreibungen verbessern

23. August 2021

7 Tipps für professionelle Produktbeschreibungen

6. August 2021

Produktpräsentation im Online Shop

Produktpräsentation für E-Commerce: So erstellen Sie ansprechende Produktseiten

2. August 2021

So setzen Sie ein mehrsprachiges Projekt um ohne ein Sprachtalent zu sein

22. Juli 2021

Analyse_Geld_Sparen_mit _Automatischen_Produktbeschreibungen

So sparen unsere Kunden Millionen mit automatisierten Produktbeschreibungen

1. Juli 2021

Produktvorteile

So bringen Sie Produktvorteile in Ihren Produktbeschreibungen auf den Punkt

25. Juni 2021

Was sind Produktkategorien im Marketing, wie werden diese erstellt und zu welchem Zweck?

8. Oktober 2020

Footer

Kontakt

Digital-Agentur Awantego
Tel.: +49 (0)711/48890-50

E-Mail: info@awantego.com
Web: www.awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Jobs bei Awantego

Offene Stellen bei Awantego

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Jetzt bewerben

E-Mail: jobs@awantego.com
Tel.: 0711-4889050

Online Marketing Lexikon

Im Marketing-Lexikon von Awantego erläutern wir alle wichtigen Begriffe zum Thema Online-Marketing kompakt und verständlich.


Die wichtigsten Themen:

Automated Unique Content

Online Marketing Downloads

Downloads & Anleitungen

Im Download-Bereich von Awantego.com finden Sie Anleitungen, Tutorials und eBooks rund um das Thema Content und Marketing.


Gastautoren

Informationen für Gastautoren

Neueste Beiträge im Blog

Kundennutzen Beispiele: So kommunizieren Sie richtig

Produktbeschreibung Beispiele für Fashion Onlineshops

SEO Tools für Online Händler: Unterschätzte Werkzeuge, die Ihren Umsatz steigern

21 Wege zur Verbesserung der Customer Experience für Online-Händler

User Generated Content für Online Händler: Wie Sie den Content Ihrer Kunden effektiv nutzen

Darum geht’s im Blog

4.7.4A+ Amazon ContentAbfolgeAbfrageAbgrenzungAbonnenten für den NewsletterAbonnenten gewinnenAbrechnungAbsenderAbsicherungaccelerated mobile pagesAccountActiveCampaignAdobeAdresseAdvertisingAdwordsAffiliateAgenturAhrefs
  • Jobs
  • Blog
  • Datenschutz
  • Disclaimer
  • Impressum
  • Awantego.com in English

© 2022 · Awantego.com ·

Diese Website benutzt Cookies. Wenn Sie die Website weiter nutzen, gehen wir von Ihrem Einverständnis aus.OK