Vor- und Nachteile der Unterstützung von AMP in Ihrer Next.js-App
AMP ist ein Webkomponenten-Framework, das schnelle Ladezeiten garantiert. Next.js bietet integrierte AMP-Unterstützung.
Themen in dieser Anleitung
In diesem Leitfaden wird zuerst kurz beschrieben, wie AMP schnelle Seitenladezeiten garantiert. Anschließend werden die verschiedenen Möglichkeiten zur Unterstützung von AMP in einer Next.js-App erläutert. Anschließend können Sie die für Sie am besten geeignete Methode ermitteln.
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 schnelles Laden von Seiten
AMP hat zwei Hauptstrategien, um die Schnelligkeit zu gewährleisten:
- AMP-HTML: Eine eingeschränkte Form von HTML, die bestimmte Optimierungen obligatorisch macht und Architekturmuster unterbindet, die zu Verzögerungen führen. Einen allgemeinen Überblick über die Optimierungen und Einschränkungen findest du unter Funktionsweise von AMP.
- AMP-Cache: Inhalts-Cache, der von einigen Suchmaschinen wie Google und Bing verwendet wird und Pre-Rendering verwendet, um den Seitenaufbau zu beschleunigen. Unter Warum es AMP-Caches gibt erfahren Sie mehr über die Vor- und Nachteile von Caches und 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:
- Bei Hybrid-AMP-Seiten können Sie von jeder Next.js-Seite eine begleitende AMP-Version erstellen.
- Bei der Option Nur AMP können Sie AMP zur einzigen Option für eine Seite machen.
Obwohl Next.js in der Regel als React-Framework gilt, ist es wichtig zu verstehen, dass Sie React-Komponenten nicht mehr clientseitig ausführen können, wenn Sie Next.js zum Bereitstellen von AMP-Seiten verwenden, 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.
Hybrid-AMP oder reine AMP-Seiten verwenden
Wenn Ihnen die Ladeleistung wichtig ist, können Sie mit einer reinen AMP-Seite dafür sorgen, dass Ihre Seite schnell geladen wird und bleibt. Der Haken ist jedoch: Um die Schnelligkeit zu gewährleisten, sind bestimmte Architekturmuster und HTML-Elemente, die häufig zu langsamen Seiten führen, auf AMP nicht zulässig. Auf AMP-Seiten ist beispielsweise kein benutzerdefiniertes synchrones JavaScript zulässig, da Ressourcen, die das Rendering blockieren, eine häufige Ursache für langsame Seitenladezeiten sind.
Um herauszufinden, ob ein reiner AMP-Ansatz für Sie geeignet ist, müssen Sie herausfinden, ob Ihr gesamter Front-End-Code in AMP-HTML dargestellt werden kann:
- Im Artikel Funktionsweise von AMP werden die grundlegenden Architekturbeschränkungen und obligatorischen Optimierungen von AMP erklärt.
- Unter HTML-Tags erfährst du, welche HTML-Tags bei AMP zulässig sind und welche nicht. Im AMP-Komponentenkatalog findest du die benutzerdefinierten Komponenten, die von der AMP-Community zur Lösung gängiger Anwendungsfälle entwickelt wurden. Unter amp-script erfährst du, wie du mit benutzerdefiniertem JavaScript Funktionen implementieren kannst, die von AMP derzeit nicht unterstützt werden.
Auch wenn ein reiner AMP-Ansatz für deine Seite nicht funktioniert, ist es dennoch eine gute Idee, nach Möglichkeit AMP zu verwenden, da AMP-HTML und die AMP-Caches garantiert schnell sind. Der hybride AMP-Ansatz in Next.js bietet eine Möglichkeit, AMP-Seiten unter bestimmten Bedingungen bereitzustellen. Dies verursacht jedoch auch höhere Wartungskosten, da Sie zwei Versionen jeder Seite verwalten müssen.
Fazit
AMP sorgt dafür, dass Ihre Website schnell bleibt und schnell bleibt. Hierzu werden Muster erzwungen, die zu einer Geschwindigkeit führen, und Muster, die die Geschwindigkeit verlangsamen, untersagen. AMP-HTML- und AMP-Caches sind die beiden wichtigsten Möglichkeiten, mit denen AMP die Schnelligkeit garantieren kann. Bevor du AMP verwendest, solltest du aber prüfen, ob es alle Anforderungen deiner Website erfüllt.