Technik erklärt: Darum sind AMP-Artikel so schnell

3 Kommentare

Seit Mitte Februar zeigt Google in seinen mobilen Suchergebnissen bei den entsprechenden Suchanfragen AMP-Artikel prominent in Form eines News-Carousel an. Das AMP-Framework, welches aus der Digital News Initiative von Google und einigen Publishern weltweit in Zusammenarbeit entstanden ist, gibt es schon seit dem 7. Oktober.

Gestern gaben Nadine Gerspacher und Sebastian Benz von Google noch ein paar Details zu AMP preis – der Head of SEO bei SPIEGEL ONLINE, Raphael Raue gewährte einen Einblick in die praktische Umsetzung von AMP und die mit dem Framework verbundenen Potenziale für Publisher. Die Key-Features von AMP zeigt dieses Slide:
Bildschirmfoto 2016-03-09 um 17.22.17

Wer in der letzten Zeit einen AMP-Artikel auf dem Smartphone geöffnet hat, der wird sich gefragt haben, warum die Inhalte derart schnell bereitstehen. Es liegt an diesen Gründen:

1. AMP erlaubt nur asynchrone Scripte
JavaScript beispielsweise erlaubt es zwar eine Website individuell zu gestalten, kann aber auch dazu führen, dass die Seite lange zum Laden aller Inhalte benötigt. Daher erlaubt AMP nur asynchrones JavaScript, wo Inhalte parallel geladen werden können.
Beispiel: Der Facebook Chat funktioniert via JavaScript. Dein Browser stellt eine Anfrage an den Facebook Server und wartet auf eine Antwort. Da es asynchron ist, kann parallel dazu auch die Timeline aktualisiert werden.

2. Die Dateigrößen aller Ressourcen werden vorab ermittelt
Alle externen Ressourcen, wie Bilder, Ads oder iFrames übermitteln ihre Größe schon vor dem Herunterladen an die AMP-Seite. So kann AMP die Inhalte optimal platzieren und muss nicht auf Elemente mit unbekannter Größe warten, welches die Gesamtladezeit erhöhen würde. Für das Laden einer AMP-Seite wird nur ein HTTP-Request benötigt. Da AMP auf eine möglichst schnelle Ladezeit optimiert wurde, wird nach dem Laden und Rendern aller Inhalte auch kein Re-Rendering mehr vorgenommen.

3. AMP lässt Erweiterungen nicht das Rendering blockieren
Wenn in eine AMP-Seite Erweiterungen, wie Tweets oder Instagram-Bilder, eingebaut werden sollen, dann muss dieses Erweiterungs-Script dies AMP im Vorfeld mitteilen. AMP baut dann ein iFrame als Platzhalter ein und dort kann dann die Erweiterung ausgeführt werden. Auch dieses Script wird asynchron ausgeführt, sodass Rendering nicht blockiert wird. Der Code sieht beispielsweise folgendermaßen aus:

Script_AMP_extensions

4. AMP verbannt Drittanbieter-JavaScript in iFrames
AMP erlaubt JavaScript von Drittanbietern. Allerdings nur in iFrames. So kann es nicht die Ladezeit des gesamten Dokuments beinflussen oder gar verzögern.

5. CSS muss inline sein & maximal 50 KB groß
In AMP-Seiten darf CSS nur inline ausgeführt werden. Im Beispiel sähe das dann folgendermaßen aus:

CSS_inline

6. AMP erlaubt nur 2 Arten von Animationen
AMP übergibt alle Animationen an den Grafikprozessor des Rechners mit dem der Nutzer die AMP-Seite aufruft. Der Browser wird also vollständig entlastet. Da die GPU aber keine Animationen am Seitenlayout umsetzen kann und diese Aufgabe an den Browser übergeben würden, ist diese Art der Animation schlichtweg bei AMP nicht möglich. Die einzig unterstützten Animationen sind Undurchsichtigkeit und Vergrößerung.

7. Priorisierung von Ressourcen
Kurz gesagt: AMP lädt nur jene Ressourcen, die gebraucht werden, also genau die, die der Nutzer sehen wird:

When AMP downloads resources, it optimizes downloads so that the currently most important resources are downloaded first. Images and ads are only downloaded if they are likely to be seen by the user, above the fold, or if the user is likely to quickly scroll to them.

8. Prerendering von AMP-Artikeln
Schon bevor ein Google-Nutzer auf einen AMP-Artikel in den Suchergebnissen klickt, wird er vorgeladen. So hat der Nutzer das Gefühl, dass der Artikel rasend schnell geladen und aufgebaut wurde. Allerdings wird Prerendering nur für Inhalte above the fold eingesetzt und nicht für Inhalte die die CPU stark beanspruchen:

When AMP documents get prerendered for instant loading, only resources above the fold are actually downloaded. When AMP documents get prerendered for instant loading, resources that might use a lot of CPU (like third-party iframes) do not get downloaded.

Alle weiteren Informationen zu AMP findet ihr auf ampproject.org und die aufgezählten Inhalte im Original hier.


Kommentare

  1. Markus Schraudolph meint:

    Euer CSS-Beispiel ist meiner Meinung nach irreführend, weil es mehr Einschränkungen suggeriert, als AMP tatsächlich macht
    Mit AMP darf man durchaus noch Stile zentral definieren, also etwa schreiben

    h1 {color: blue}

  2. Markus Schraudolph meint:

    ok, den Quelltext hat zerhauen…neuer Versuch:

    <style amp-custom >
    h1 {color: blue}
    </style>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *