Vorteile und Nachteile der Unterstützung von AMP in Ihrer Next.js-Anwendung
AMP ist ein Webkomponenten-Framework, das für schnelles Laden von Seiten sorgt. Next.js bietet eine integrierte Unterstützung für AMP.
Themen in dieser Anleitung
In diesem Leitfaden wird zuerst kurz beschrieben, wie AMP für schnelles Laden von Seiten sorgt. Anschließend werden die verschiedenen Möglichkeiten erläutert, wie Sie AMP in einer Next.js-Anwendung unterstützen können. Außerdem erfahren Sie, welcher Ansatz für Sie am besten geeignet ist.
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 für Schnelligkeit zu sorgen:
- AMPHTML: Eine eingeschränkte Form von HTML, bei der bestimmte Optimierungen obligatorisch sind und Architekturmuster verboten sind, die zu einer Verlangsamung führen. Eine allgemeine Übersicht ü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 das Pre-Rendering nutzt, um das Laden von Seiten zu beschleunigen. Unter Warum gibt es AMP-Caches? erfahren Sie mehr über die Vorteile und Nachteile der Caches. Wie werden meine AMP-Seiten im Cache gespeichert?
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 der Option 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 wenn Sie Next.js zum Bereitstellen von AMP-Seiten verwenden, können Sie 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.
Hybrid-AMP oder reinen AMP-Ansatz verwenden
Wenn Sie die Ladeleistung Ihrer Seite verbessern möchten, ist eine reine AMP-Seite eine gute Möglichkeit, dafür zu sorgen, dass Ihre Seite schnell geladen wird und auch schnell bleibt. Aber es gibt einen Haken: Um die Geschwindigkeit zu gewährleisten, verbietet AMP bestimmte Architekturmuster und HTML-Elemente, die oft zu langsamen Seiten führen. In AMP ist beispielsweise benutzerdefiniertes synchrones JavaScript nicht zulässig, da renderblockierende Ressourcen eine häufige Ursache für langsames Laden von Seiten sind.
Um herauszufinden, ob ein reiner AMP-Ansatz für Sie geeignet ist, müssen Sie feststellen, ob Ihr gesamter Frontend-Code in AMP-HTML dargestellt werden kann:
- Lesen Sie den Artikel So funktioniert AMP, um mehr über die allgemeinen architektonischen Einschränkungen und obligatorischen Optimierungen von AMP zu erfahren.
- Unter HTML-Tags erfahren Sie, welche HTML-Tags in AMP zulässig und unzulässig sind. Im AMP-Komponentenkatalog finden Sie benutzerdefinierte Komponenten, die von der AMP-Community für gängige Anwendungsfälle entwickelt wurden. amp-script enthält Informationen dazu, wie Sie mit benutzerdefiniertem JavaScript Funktionen implementieren, die derzeit nicht von AMP unterstützt werden.
Auch wenn eine reine AMP-Lösung für Ihre Seite nicht funktioniert, kann es sinnvoll sein, AMP nach Möglichkeit zu verwenden, da AMP-HTML und AMP-Caches für eine garantiert schnelle Leistung sorgen. Der Hybrid-AMP-Ansatz in Next.js bietet eine Möglichkeit, AMP-Seiten bedingt auszuliefern. Allerdings sind auch die Wartungskosten höher, da Sie zwei Versionen jeder Seite verwalten müssen.
Fazit
AMP sorgt dafür, dass Ihre Website schnell ist und bleibt, indem Muster erzwungen und Muster verboten werden, die zu einer Verlangsamung führen. AMP-HTML und AMP-Caches sind die beiden Hauptmethoden, mit denen AMP für Schnelligkeit sorgt. Bevor Sie AMP verwenden, sollten Sie jedoch prüfen, ob es alle Anforderungen Ihrer Website erfüllen kann.