Vorteile und Nachteile der Unterstützung von AMP in Ihrer Next.js-App
AMP ist ein Webkomponenten-Framework, das für schnelle Seitenladezeiten sorgt. Next.js bietet integrierte Unterstützung für AMP.
Themen in dieser Anleitung
In diesem Leitfaden wird zuerst kurz beschrieben, wie AMP für schnelle Seitenladezeiten sorgt. Anschließend werden die verschiedenen Möglichkeiten zur Unterstützung von AMP in einer Next.js-App erläutert. Zum Schluss wird Ihnen geholfen, die beste Methode für Sie zu finden.
Dieser Leitfaden richtet sich an Webentwickler, die sich für Next.js entschieden haben, aber noch nicht sicher sind, ob sie AMP unterstützen sollen.
So sorgt AMP für schnelle Seitenaufrufe
AMP hat zwei Hauptstrategien, um für Schnelligkeit zu sorgen:
- AMPHTML: Eine eingeschränkte Form von HTML, die bestimmte Optimierungen vorschreibt und Architekturmuster verbietet, die zu einer Verlangsamung führen. Eine allgemeine Übersicht über die Optimierungen und Einschränkungen finden Sie unter Funktionsweise von AMP.
- AMP-Cache: Ein von einigen Suchmaschinen wie Google und Bing verwendeter Content-Cache, der Pre-Rendering nutzt, um das Laden von Seiten zu beschleunigen. Weitere Informationen zu den Vorteilen und Nachteilen der Caches finden Sie unter Warum gibt es AMP-Caches?. Unter Wie wird meine AMP-Seite im Cache gespeichert? erfahren Sie, wie Ihre AMP-Seiten in die Caches gelangen.
AMP in Next.js verwenden
Es gibt zwei Möglichkeiten, AMP in Next.js zu verwenden:
- Mit dem Hybrid-AMP-Ansatz können Sie eine begleitende AMP-Version jeder Next.js-Seite erstellen.
- Mit dem Ansatz Nur AMP können Sie AMP zur einzigen Option für eine Seite machen.
Next.js wird zwar in der Regel als React-Framework betrachtet, aber es ist wichtig zu wissen, dass Sie bei der Verwendung von Next.js zum Bereitstellen von AMP-Seiten keine React-Komponenten mehr clientseitig ausführen können, 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 Hybrid-AMP- oder den reinen AMP-Ansatz verwenden möchten
Wenn dir die Ladeleistung wichtig ist, kann eine reine AMP-Seite eine gute Möglichkeit sein, dafür zu sorgen, dass deine Seite schnell geladen wird und schnell bleibt. Der Haken: Um die Geschwindigkeit zu garantieren, sind in AMP bestimmte Architekturmuster und HTML-Elemente verboten, die häufig zu langsamen Seiten führen. In AMP ist beispielsweise kein benutzerdefiniertes synchrones JavaScript zulässig, da renderblockierende Ressourcen häufig für langsame Seitenladezeiten verantwortlich sind.
Um herauszufinden, ob ein AMP-only-Ansatz für Sie geeignet ist, müssen Sie prüfen, ob Ihr gesamter Frontend-Code in AMP-HTML dargestellt werden kann:
- Lesen Sie den Artikel So funktioniert AMP, um die grundlegenden architektonischen Einschränkungen und obligatorischen Optimierungen von AMP zu verstehen.
- Unter HTML-Tags finden Sie Informationen dazu, welche HTML-Tags in AMP zulässig und welche unzulässig sind. Im AMP-Komponentenkatalog finden Sie benutzerdefinierte Komponenten, die von der AMP-Community entwickelt wurden, um häufige Anwendungsfälle zu lösen. Unter amp-script erfahren Sie, wie Sie benutzerdefiniertes JavaScript verwenden, um Funktionen zu implementieren, die von AMP derzeit nicht unterstützt werden.
Auch wenn ein reiner AMP-Ansatz für Ihre Seite nicht funktioniert, kann es trotzdem sinnvoll sein, AMP nach Möglichkeit zu verwenden, da AMP-HTML und die AMP-Caches für schnelle Ladezeiten sorgen. Der Hybrid-AMP-Ansatz in Next.js bietet eine Möglichkeit, AMP-Seiten bedingt bereitzustellen. Allerdings entstehen dadurch auch höhere Wartungskosten, da Sie zwei Versionen jeder Seite pflegen müssen.
Fazit
AMP sorgt dafür, dass Ihre Website schnell ist und bleibt. Dazu werden Muster erzwungen, die zu einer hohen Geschwindigkeit führen, und Muster verboten, die zu einer niedrigen Geschwindigkeit führen. AMP HTML und AMP-Caches sind die beiden wichtigsten Möglichkeiten, mit denen AMP für Schnelligkeit sorgt. Bevor Sie AMP einführen, sollten Sie jedoch prüfen, ob es alle Anforderungen Ihrer Website erfüllen kann.