Google Accelerated Mobile Pages (AMP) ausporbiert

Mit dem Accelerated Mobile Pages Project versucht Google uns das schlimmste zu nehmen, dass es gibt. Ladezeiten !
Die Idee dahinter ist ziemlich simpel. Wenn ich eine Information suche, bietet mir Google eine Vielzahl von Links an (kennt man ja) um die Seite aufzurufen muss ich aber zwei dinge tun. Erstens Die Google Suche verlassen und zweitens eine komplette Webseite laden.
Nicht unbedingt optimal.

Genau hier setzt das neue Projekt von Google an. Accelerated Mobile Pages kurz AMP . Ziel von AMP ist es dem Nutzer Webseiten in abgespeckter Form zu liefern. Der nette Nebeneffekt davon ist, dass sich die Ladezeiten um ein vielfaches verringert.

 

Konnte diese Funktion in den letzen Tagen testen und ich bin begeistert! Besonders in Momenten wo halt kein LTE in der Leiste zu sehen ist, sondern nur ein bescheidendes E merkt man die Geschwindigkeitsunterschiede extrem.

Im Regionalexpress von Singen nach Stuttgart (wer die Strecke kennt weiß wovon ich rede) kann man das mobile Internet eigentlich in die Tonne treten. Die Google Suche kann man aber noch halbwegs nutzen, HTTP2 & dem reduzierten Google Design seit Dank.

Aber alles andere kann man vergessen. Spiegel.de, Welt.de usw usw. – vergiss es.
Mit Google AMP siehts aber deutlich besser aus. Es ist immernoch langsam, aber erträglicher.

Da AMP ein offenes System ist, ist die Integration ziemlich einfach. Dadurch kann jeder Publisher und Content Provider dabei helfen das Web ein wenig schneller zu machen. AMP basiert auf dem Prinzip der reduzierten Templates. D.h. für AMP Seiten muss eine dezidierte HTML Ansicht generiert werden die folgendermaßen aussehen kann:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    
    <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>
    https://cdn.ampproject.org/v0.js
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Durch den Verzicht auf zusätzliche Libs und unnötiger Tracker etc. kann man so wirklich was aus seiner Webseite rausholen ! Zusätzlich möchte man natürlich auch die extrem prominente Darstellung in der Google Suche nicht vergessen.

Screenshot_2016-02-22-13-36-50
Da drückt man doch gerne drauf oder?

 

Details zur Integration findet ihr in den offiziellen Google Dokumenten -> hier.

Mein nächstes Projekt ist es, dies auch für meinen Blog anzubieten.
Da mein Blog mit WordPress arbeitet, und sich das WordPress Team bereits um den Support gekümmert hat gibt es natürlich auch ein Plugin hierzu.

[appbox wordpress amp]

Ich persönlich würde mich sehr darüber freuen wenn diese Technologie schnell Einzug im WWW findet.

Eure Meinung?

Source: Google Watchblog

Autor: Marco Mattes

Aus Stuttgart, 20 Jahre jung, Softwareentwickler, "Blogger" und und und =)

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s