Accelerated Mobile Pages und Jekyll
Jun 4, 2017 TWEET LINK

Ich habe meine Website jetzt komplett auf Accelerated Mobile Pages (AMP) umgestellt.

Wozu AMP?
AMP ist von Google veröffentlicht worden, um das mobile Internet zu beschleunigen (wie der Name schon sagt). Die mit AMP-Html geschriebenen Seiten laden im Vergleich zu normalem HTML viel schneller, weil man möglichst wenige Dateien (Scripts, Stylesheets) lädt und so die Seiten kompakt hält. Außerdem werden AMP-Seiten bei Google zwischengespeichert (im AMP-Cache), wodurch sie fast auf Klick geladen haben. Man sieht bei Google AMP-Seiten im News-Rondell und bei Google Shopping. Bing und Twitter unterstützen AMP, sowie Tumblr, Ebay und viele andere Firmen stellen ihre Inhalte über AMP bereit.

Da ich gerade bei Projekten mit AMP, in Verbindung mit Jekyll arbeite, wollte ich meine persönliche Webseite auch umstellen.

Damit mein Jekyll-Blog AMP unterstützt, muss das Layout angepasst werden, sowie einige HTML-Tags mit den AMP-Äquivalenten ausgetauscht werden.

Mein default-Layout (im Ordner _layouts) bei Jekyll sieht jetzt so aus:

Gist default.html

In der Konfigurationsdatei von Jekyll (_config.yml) sind mehrere Html-Tags, die durch AMP-Html-Tags ersetzt werden sollen, deklariert:

Gist: _config.yml

Im default-Layout werden dann mit dem String-Filter replace bei content die entsprechenden Html-Tags ersetzt (wie man im ersten Code-Snippet sehen kann).

Im default-Layout findet man die Zeile include head.html. Damit wird das Template für den Html-Kopf eingebunden, welches so aussieht:

Gist head.html

In dem Code-Snippet kann man sehen, dass AMP keine externen CSS-Dateien erlaubt. Stattdessen verwendet man ein inline-style-Tag mit dem Attribut amp-custom für alle CSS-Regeln. Wichtig ist zudem, die AMP-Javascript-Datei zu laden (<script async src="https://cdn.ampproject.org/v0.js"></script>).

Um noch zusätzliche AMP-Komponenten verwenden zu können, kann man in das Front-Matter der Seiten eine Variable deklarieren, in der die Script-Dateien für die Komponenten sind. Im HTML-Kopf wird dann gecheckt ob die Variable (hier custom_elements) vorhanden ist und somit in die Seite eingebunden wird.

Normalerweise verwendet man AMP nur, um bestimmte Teilbereiche der Website wie News-Artikel oder Produkte bei einem Onlineshop zu ‘beschleunigen’.

Wenn man nur AMP-Versionen der Posts bei Jekyll erstellen möchte und ohne Github-Pages arbeitet, kann man den Plugin jekyll-amp benutzen.

Wenn man nur AMP-Versionen der Posts haben will (ohne die ‘unbeschleunigten’, normalen Versionen), kann man ein ähnliches Layout, wie hier im Artikel gezeigt, nur für die Posts (also als Datei _layouts/post.html) erstellen.

update: Support für Github Gists hinzugefügt (Gists in AMP einbinden)
update2: Support für zusätzliche AMP-Komponenten

Mehr zu AMP
Bilderkarussell (amp-carousel) mit AMP und Jekyll
https://ampbyexample.com
AMP Jekyll Theme

github html open-source jekyll amp