Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Verdammt schnell: So baust du einen Blog im Google-AMP-Format mit Jekyll

    Verdammt schnell: So baust du einen Blog im Google-AMP-Format mit Jekyll
Google AMP. (Bild: Google)

Googles Accelerated Mobile Pages Project ist ein Konkurrent zu Facebooks Instant Articles. AMP sorgt dafür, dass einfache mobile Webseiten deutlich schneller geladen werden. Wer seine private Webseite im AMP-Format anbieten will, kann das jetzt mit einem Theme für den Webseiten-Generator Jekyll tun.

Facebook hat mit seinen Instant Articles den Kampf um schnelle mobile Webseiten eröffnet: Dabei spielen Instant Articles ihre Vorzüge aber nur aus, wenn die Artikel auch in der Facebook-App geöffnet werden. Google kontert diese Bemühungen mit seinem „Accelerated Mobile Pages Project“ (kurz: AMP) und geht dabei noch einen Schritt weiter. AMP-Webseiten spielen ihren Geschwindigkeitsvorteil in jedem Browser aus. Das Geheimnis ist eine Mischung aus starker Reduzierung der Inhaltstypen (nur Bilder, Text, Videos und Anzeigen – kein eigenes Javascript), Inline-CSS, Caching und Googles eigenem Content Delivery Network das mit globaler Verfügbarkeit und HTTP 2.0 überzeugt. Im Ergebnis lassen sich AMP-Webseiten um ein Vielfaches schneller laden als herkömmliche Webseiten. Das ist gerade bei schlechter Internetverbindung extrem nützlich.

Google AMP: Reduzierte Inhalte, Inline-CSS und Caching

Um eine Webseite im AMP-Format auszuliefern, muss ein spezielles HTML-Markup verwendet werden. Wer nach einer einfachen Möglichkeit sucht um kleine Webseiten wie zum Beispiel einen privaten Blog im AMP-Format auszuliefern, für den könnte das Jekyll-Theme „Amplify“ von Interesse sein.

Das Amplify-Theme erstellt Google-AMP-kompatible Webseiten mit Jekyll. (Screenshot: ageitgey.github.io)
Das Amplify-Theme erstellt Google-AMP-kompatible Webseiten mit Jekyll. (Screenshot: ageitgey.github.io)

Jekyll ist ein beliebter statischer Webseitengenerator. Der Benutzer steckt Text- oder Markdown-Dateien hinein, und Jekyll generiert daraus eine statische Webseite mit einem passenden Theme und allem was dazugehört. Mit dem Amplify-Theme generiert Jekyll dann AMP-konforme Webseiten. Das Ergebnis sieht dann zum Beispiel so aus. Beim Verfassen der Beiträge muss nur noch darauf geachtet werden, dass statt der Standard-Tags für Bilder und Videos im Fließtext das spezielle AMP-Markup verwendet wird.

Wer seine Webseite dann über das Google-eigene CDN ausliefern lassen will, also von den schnellen Google-Servern gebrauch machen möchte, der muss seine Webseite noch validieren lassen. Das geschieht über einen URL-Parameter. Ist die Validierung erfolgreich, wird die Seite automatisch von Google gecached und kann über deren CDN aufgerufen werden.

via github.com

Finde einen Job, den du liebst zum Thema TYPO3, JavaScript

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen