Neue AMP-Website-Bautechnologie: AMP + SSR = Schnelleres Laden

Veröffentlichungsdatum:2019-08-27

EasyStore

Aufrufe:

AMP unterstützt jetzt offiziell eine Technologie namens Server-Side Rendering (SSR), die Sie auf AMP-Seiten anwenden können, um deren Ladegeschwindigkeit zu erhöhen. Tests auf der intelligenten Website-Plattform von Eyingbao zeigen, dass die beliebte FCP-Metrik um bis zu 50% gestiegen ist. Der Google AMP Cache verwendet diese Technologie bereits seit einiger Zeit, aber jetzt können Sie sie auch in Ihrer eigenen Domain nutzen! Wenn Sie AMP für das Hauptwebsite-Erlebnis verwenden, ist die Installation dieser zusätzlichen Optimierung besonders wichtig. Selbst wenn Sie eine "Paired AMP"-Einrichtung mit AMP- und Nicht-AMP-Seiten verwenden, kann diese Technologie sicherstellen, dass Benutzer die beste Leistung erhalten, wenn kein AMP-Caching verwendet wird, wie z.B. Benutzer der Twitter-App.

SSR ist eine Technik zur Verbesserung der First Contentful Paint (FCP)-Zeit von clientseitig gerenderten Seiten, die Frameworks wie React oder Vue.js verwenden. Der Nachteil des clientseitigen Renderings besteht darin, dass zunächst das gesamte JavaScript heruntergeladen werden muss, das zum Rendern der Seite erforderlich ist. Dies verzögert die Zeit, die Benutzer benötigen, um den tatsächlichen Inhalt der Seite zu sehen. Um dies zu mildern, unterstützen sowohl React als auch Vue.js das Vorrendern des DOM auf dem Server bei Navigationsanfragen. Anschließend übernimmt das clientseitige JavaScript das Rendering, ein Prozess, der als (Re-)Hydration bezeichnet wird. Benutzer können den Inhalt schneller sehen.

Die Funktionsweise von AMP SSR besteht darin, den AMP-Boilerplate-Code zu entfernen und das Seitenlayout auf dem Server zu rendern. Der AMP-Boilerplate-Code dient dazu, Layout-Shifts beim Laden der Seite zu verhindern. Er verbirgt den Seiteninhalt, bis das AMP-Framework heruntergeladen und das Seitenlayout erstellt wurde. Daher stehen AMP-Seiten vor dem gleichen Problem wie andere Client-Frameworks: Das Rendering wird blockiert, bis das JavaScript heruntergeladen ist. Durch das Entfernen des Boilerplate-Codes kann AMP SSR die FCP-Zeit um 50% verkürzen. Hier ist ein Vergleich zwischen einer AMP-Datei und ihrer SSR-Version:

Sie können serverseitig gerenderte AMP-Seiten über das transformation-Attribut im html-Element identifizieren:

Hinweis: AMP-Caches setzen ihr eigenes Flag, z.B. fügt der Google AMP Cache hinzu:

Nach dem Setzen dieses Attributs betrachtet der Validator SSR-AMP als gültiges AMP. Die SSR-Optimierung von AMP verstößt gegen die AMP-Spezifikationsregeln, wodurch das Dokument ungültig wird. Daher ist es notwendig, dieses neue Flag zu verwenden, um diesen Fall anzuzeigen. Sobald das Flag und die Optimierung vorhanden sind, wird das Dokument als gültig betrachtet, und Sie sind glücklich.

Wie SSR AMP?

Es ist sinnlos, SSR-AMP manuell zu schreiben. Stattdessen sollten Sie Tools verwenden, die AMP-Dateien automatisch in SSR-Versionen umwandeln, ähnlich wie ein Compiler. Im Idealfall erfolgt diese Transformation, bevor ein Benutzer das Dokument anfordert. Sie können sie jedoch auch bei Bedarf ausführen (stellen Sie sicher, dass die Ergebnisse zwischengespeichert werden, um die Transformation nicht wiederholt auszuführen).

Derzeit stehen zwei Tools für AMP SSR zur Verfügung:

1. AMP Optimizer: Eine NodeJs-Bibliothek zum Generieren optimierter AMP.

2. AMP Packager: Ein Go-Kommandozeilentool, das mit einem Signaturwechsel verwendet werden kann.

Hinweis: Diese Tools führen nicht nur SSR durch, sondern auch andere Optimierungen, wie das Vorladen des AMP-Frameworks und das Neuanordnen von Headern.

Next.js-Unterstützung

Wir freuen uns sehr, dass die neueste Version von Next.js 9 AMP SSR unterstützt. Next.js 9 optimiert standardmäßig AMP für AMP-first- und Hybrid-AMP-Seiten. Dies macht Next.js zur idealen Wahl für den Aufbau von AMP-Seiten.

Was kommt als Nächstes?

Wir planen zwei große Dinge für die Zukunft:

1. Eine Option für selbstgehostete AMP-Frameworks (v0.js). Ja, Sie haben richtig gehört, Sie müssen AMP nicht mehr von cdn.ampproject.org herunterladen. Dies hat zwei Vorteile:

· Schnellere Interaktionszeit: Das Herunterladen des AMP-Frameworks erfordert keine zweite HTTPS-Verbindung zu cdn.ampproject.org.

· Einfacheres QA: Sie können steuern, wann auf eine neue AMP-Version umgestellt wird.

Beachten Sie jedoch: Aus Datenschutzgründen überschreibt der AMP-Cache die AMP-Skript-URLs, um mit dem Cache-Origin übereinzustimmen, wenn er zwischengespeicherte AMP-Seiten bereitstellt.

2. WordPress-Integration: Version 1.3 des offiziellen AMP-Plugins wird unterstützen AMP SSR out-of-the-box.

AMP SSR ist für alle geeignet

Wenn Sie AMP-Seiten veröffentlichen, sollten Sie serverseitig gerenderte AMP-Seiten veröffentlichen. Ähnlich wie bei der Minimierung von HTML oder CSS sollte das Ausführen eines AMP Optimizers oder eines Go-Transformators ein normaler Teil des Build-/Render-Prozesses sein. Die verbesserte Rendering-Leistung macht einen großen Unterschied in der FCP-Zeit, aber noch wichtiger ist die Benutzererfahrung.

Erstellen Sie ganz einfach AMP-Mobilwebsites ohne die oben genannten Einstellungen. Besuchen Sie www.eyingbao.com, die intelligente Website-Marketingplattform von Eyingbao, für eine kostenlose Erstellung und Beratung. Hotline: 4006552477 Kundenservice-Hotline: 15600002121

Vorherige Seite:42236

Nächste Seite:42216

Verwandte Artikel

Verwandte Produkte