AMP in Ihrer Next.js-App garantieren

Vorteile und Vor- und Nachteile der Unterstützung von AMP in der Next.js-App

Houssein Djirdeh

AMP ist ein Webkomponenten-Framework, das schnelle Seitenladevorgänge garantiert. Next.js bietet integrierte Unterstützung für AMP.

Themen in dieser Anleitung

In diesem Leitfaden wird zuerst beschrieben, wie AMP einen schnellen Seitenaufbau garantiert. Anschließend werden die verschiedenen Möglichkeiten erläutert, wie Sie AMP in einer Next.js-App unterstützen können. Anschließend können Sie den besten Ansatz für Ihre Zwecke auswählen.

Dieser Leitfaden richtet sich an Webentwickler, die sich für Next.js entschieden haben, sich aber nicht sicher sind, ob sie AMP unterstützen sollen.

So sorgt AMP für schnelle Seitenladevorgänge

Bei AMP gibt es zwei Hauptstrategien, um die Geschwindigkeit zu gewährleisten:

  • AMP-HTML: Eine eingeschränkte Form von HTML, die bestimmte Optimierungen vorschreibt und Architekturmuster verbietet, die zu langsamen Ladezeiten führen. Einen allgemeinen Überblick über die Optimierungen und Einschränkungen finden Sie unter Funktionsweise von AMP.
  • AMP-Cache: Ein Inhaltscache, der von einigen Suchmaschinen wie Google und Bing verwendet wird und Pre-Rendering verwendet, um das Laden von Seiten zu beschleunigen. Unter Warum gibt es AMP-Caches? erfährst du mehr über die Vor- und Nachteile von Caches und unter Wie wird meine AMP-Seite im Cache gespeichert?, um zu erfahren, wie deine AMP-Seiten in die Caches gelangen.

AMP in Next.js verwenden

Es gibt zwei Möglichkeiten, AMP in Next.js zu verwenden:

  • Beim Hybrid-AMP-Ansatz kannst du eine zugehörige AMP-Version einer beliebigen Next.js-Seite erstellen.
  • Mit der Option Nur AMP können Sie AMP zur einzigen Option für eine Seite machen.

Next.js wird normalerweise als React-Framework angesehen. Wenn du Next.js zum Bereitstellen von AMP-Seiten verwendest, kannst du React-Komponenten nicht mehr clientseitig ausführen, da React-Komponenten keine gültigen AMP-Komponenten sind. Mit anderen Worten: Next.js ist kein React-Framework mehr, sondern eine serverseitige Vorlagen-Engine zum Generieren von AMP-Seiten.

Entscheiden, ob Sie den hybriden Ansatz mit AMP oder nur AMP verwenden möchten

Wenn dir die Ladegeschwindigkeit wichtig ist, kannst du mit einer reinen AMP-Seite dafür sorgen, dass deine Seite schnell wird und bleibt. Es gibt jedoch einen Haken: Um die Geschwindigkeit zu gewährleisten, sind bei AMP bestimmte Architekturmuster und HTML-Elemente verboten, die häufig zu langsamen Seiten führen. Auf AMP-Seiten ist beispielsweise kein benutzerdefiniertes synchrones JavaScript zulässig, da Ressourcen, die das Rendering blockieren, eine häufige Ursache für langsame Seitenaufbauvorgänge sind.

Um herauszufinden, ob ein reiner AMP-Ansatz für Sie das Richtige ist, müssen Sie herausfinden, ob Ihr gesamter Front-End-Code in AMP-HTML dargestellt werden kann:

  • Im Artikel Funktionsweise von AMP erfahren Sie mehr über die allgemeinen architektonischen Einschränkungen und obligatorischen Optimierungen von AMP.
  • Unter HTML-Tags erfahren Sie, welche HTML-Tags bei AMP zulässig sind und welche nicht. Im AMP-Komponentenkatalog finden Sie die benutzerdefinierten Komponenten, die von der AMP-Community für häufige Anwendungsfälle entwickelt wurden. Unter amp-script erfahren Sie, wie Sie mithilfe von benutzerdefiniertem JavaScript Funktionen implementieren, die auf AMP-Seiten derzeit nicht unterstützt werden.

Auch wenn eine ausschließlich AMP-Seite für eure Seite nicht geeignet ist, kann es trotzdem eine gute Idee sein, nach Möglichkeit AMP zu verwenden, da der AMP-HTML-Code und die AMP-Caches garantiert schnell sind. Der hybride AMP-Ansatz in Next.js bietet eine Möglichkeit, AMP-Seiten unter bestimmten Bedingungen bereitzustellen. Allerdings sind die Wartungskosten höher, da Sie zwei Versionen jeder Seite verwalten müssen.

Fazit

AMP sorgt dafür, dass Ihre Website schnell wird und bleibt schnell. Dazu werden Muster erzwungen, die zu Geschwindigkeit führen, und keine Muster, die zu langsamen Seiten führen. AMP-HTML und AMP-Caches sind die beiden Hauptmethoden, mit denen AMP die Geschwindigkeit garantiert. Bevor du jedoch AMP einsetzt, solltest du prüfen, ob es alle Anforderungen deiner Website erfüllt.