• 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 20. Februar 2023
  • Content Automatisierung Beispiele 31. Oktober 2022
  • So erhöhen Sie die Sichtbarkeit Ihres Onlineshops mit… 4. Januar 2023

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

Primary Sidebar

Neueste Artikel im Blog

GPT oder Data-to-Text: Welche Alternative ist besser?

GPT-3 oder Data-to-Text: Welche Alternative ist besser?

13. März 2023

Awantego_E-Commerce_Expo_2023

Die E-Commerce Berlin Expo 2023 – unsere Erfahrungen

2. März 2023

Online shop

Produktbeschreibung erstellen: Tipps für Einsteiger

20. Februar 2023

AX Deutschland Tour - Stadt Banner Stuttgart

Was bringt Textautomatisierung monetär und welche Effekte hat sie auf die eigene Webseite? 

13. Februar 2023

Awantego auf der Expo E-Commerce Berlin

Awantego auf der E-Commerce Berlin Expo 2023

24. Januar 2023

Texte für Fashion Online Shops

So erzielen Sie Erfolg mit automatisiertem Content im E-Commerce

20. Januar 2023

Marketing_Personalisierung

Personalisierte Produktbeschreibungen revolutionieren die Customer Experience

13. Januar 2023

Automated Content erstellen: Ein Textkonzept ist erforderlich

Content generieren: So erstellen Sie automatisierte Texte

8. Januar 2023

Gute Texte können die Sichtbarkeit der Webseite positiv beeinflussen

So erhöhen Sie die Sichtbarkeit Ihres Onlineshops mit automatisiertem Content

4. Januar 2023

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

Content erstellen

Die besten Content Marketing-Strategien

18. Oktober 2022

Online Shop Texte erstellen

So schreiben Sie überzeugende Onlineshop Texte

7. Oktober 2022

Gute Produktseiten erhöhen den Bestellwert

Automatisierte Texterstellung: Ein Blick hinter die Kulissen eines Contentprojekts

5. Oktober 2022

Texte für alle Produkte im Online Shop erstellen

Vorteile der automatischen Texterstellung für Unternehmen

4. Oktober 2022

Kundengruppen identifizieren und erfolgreich ansprechen

Kundentypen erkennen und richtig ansprechen

30. September 2022

So bereiten Sie Ihre Produktdaten optimal vor

22. September 2022

Weihnachtssaison_2022

Weihnachtsgeschäft 2022: Prognosen und Ideen

16. September 2022

Automated Content erstellen

Mehr Power für Ihren Online Shop dank der Content Automatisierung

9. September 2022

Kundenbindung_Kundenpflege

So stärken Sie die Kundenbindung in Ihrem Online Shop

15. August 2022

positives Kundenerlebnis wirkt sich auf die Kundenbindung aus

Mit 5 Schritten zum einzigartigen Kundenerlebnis

9. August 2022

Customer Journey optimieren

So steuern Sie die Customer Journey mit dem richtigen Content

29. Juli 2022

Unsere_Workation_Ferienhaus_Ostsee

Wir hätten es nicht für möglich gehalten…

21. Juli 2022

E-Commerce Produkttexte: So punkten Sie mit exzellentem Content

8. Juli 2022

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

So erstellen Sie mehrsprachige Produktbeschreibungen kostengünstig und effizient

Automatische Textgenerierung für natürlich wirkende Texte aus Daten

Internationalisierung im E-Commerce: Wie bereitet man einen Rollout vor?

Machen Sie Ihren Online Shop bekannt: 5 wirkungsvolle Tipps für mehr Kunden

Duplicate Content entdecken und beseitigen

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

© 2023 · Awantego.com ·

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