Die AMP Core Web Vitals LCP-Optimierung erfordert einen Fokus auf das größte Bild oder den größten Textblock, der im anfänglichen Viewport eines Mobilgeräts gerendert wird. Entwickler erreichen dies, indem sie sicherstellen, dass die AMP-Laufzeitumgebung effizient lädt, und bestimmte Hero-Elemente durch die Verwendung des data-hero-Attributs priorisieren. Da Google AMP-Seiten wie jeden anderen indexierten Inhalt behandelt, bleibt das Erreichen des Schwellenwerts von 2,5 Sekunden eine Hauptvoraussetzung für die Aufrechterhaltung einer gesunden und schnellen Benutzererfahrung.
Was ist LCP im Kontext von AMP?
Largest Contentful Paint (LCP) misst, wie lange es dauert, bis der Hauptinhalt einer Seite für den Benutzer sichtbar wird. Auf den meisten AMP-Seiten ist das LCP-Element normalerweise ein Featured Image, eine große Überschrift oder ein Video-Poster. Auch wenn das Framework auf Geschwindigkeit ausgelegt ist, können ein langsamer Server oder unoptimierte Assets das LCP dennoch über die empfohlenen 2,5 Sekunden hinaus treiben.
Google verwendet diese Metrik, um die wahrgenommene Ladegeschwindigkeit einer Seite zu messen. Wenn der Hauptinhalt zu lange braucht, um zu erscheinen, verlassen Benutzer die Website oft, bevor sie vollständig geladen ist. Für AMP ist diese Metrik besonders wichtig, da das Framework als Hochgeschwindigkeitslösung vermarktet wird. Das Verfehlen des LCP-Ziels kann die Vorteile der Verwendung dieser Technologie von vornherein zunichte machen.
Google Search indexiert AMP-Seiten genau wie andere Webseiten und wendet denselben Standard auf alle Seiten an, unabhängig von der Technologie, die zum Erstellen der Seite verwendet wurde.
Google Search Central
Wie misst Google Core Web Vitals auf AMP?
Google sammelt Daten aus dem Chrome User Experience Report (CrUX), um die Leistung Ihrer AMP-Seiten zu ermitteln. Diese Daten stammen von echten Benutzern, die Ihre Website unter verschiedenen Netzwerkbedingungen besuchen. Wenn Ihre AMP-Server von dem Google AMP Cache bereitgestellt wird, ist die Leistung oft besser, da der Cache Vorab-Rendering und globale Content Delivery Networks verwendet.
Wenn ein Benutzer jedoch direkt von Ihrem Ursprungsserver auf die AMP-Seiten zugreift, hängt die Geschwindigkeit vollständig von Ihrem Hosting und Ihrer Serverkonfiguration ab. Google betrachtet das 75. Perzentil aller Seitenladevorgänge. Das bedeutet, dass Ihre Seite die Bewertung besteht, wenn 75 % Ihrer Besucher ein LCP von unter 2,5 Sekunden erleben.
Warum verfehlen einige AMP-Seiten immer noch die LCP-Ziele?
Ein weit verbreiteter Irrglaube ist, dass die Verwendung des AMP-Frameworks automatisch einen erfolgreichen LCP-Wert garantiert. Das ist nicht immer wahr. Mehrere Faktoren können das Rendern des größten Inhaltselements verzögern. Wenn das LCP-Element beispielsweise ein Bild ist, das nicht optimiert ist, muss der Browser warten, bis die vollständige Datei heruntergeladen ist, bevor er sie anzeigen kann.
Ein weiteres Problem ist die Verzögerung, die durch die AMP-Laufzeitumgebung selbst verursacht wird. Die Laufzeitumgebung muss das Layout der Seite laden und berechnen, bevor sie bestimmte Elemente anzeigt. Wenn es viele Erweiterungen oder Skripte von Drittanbietern im Head-Bereich gibt, kann die Initialisierung der Laufzeitumgebung länger dauern, was das LCP-Timing nach hinten verschiebt.
- Langsame Serverantwortzeiten (TTFB) vom Ursprungsserver.
- Render-blockierende benutzerdefinierte CSS- oder große Schriftartdateien.
- Fehlende Breiten- und Höhenattribute bei Bildern, die zu Layout-Neuberechnungen führen.
- Bilder, die nicht mit dem data-hero-Attribut priorisiert werden.
- Zu viele AMP-Komponenten (wie Karussells oder Social Embeds) „above the fold“.
Wie können Sie das Laden von Bildern in AMP verbessern?
Bilder sind die häufigste Ursache für ein langsames LCP. Um dies zu beheben, sollten Sie das data-hero-Attribut für das Hauptbild der Seite verwenden. Dieses Attribut teilt der AMP-Laufzeitumgebung und dem AMP Cache mit, dass sie mit dem Herunterladen dieses Bildes beginnen sollen, sobald dies möglich ist, noch bevor die Laufzeitumgebung ihre Layout-Berechnungen vollständig abgeschlossen hat.
Darüber hinaus sollten Sie das srcset-Attribut für alle amp-img-Elemente verwenden. Dies ermöglicht es dem Browser, basierend auf der Bildschirmauflösung des Benutzers die geeignetste Bildgröße auszuwählen. Ein kleinerer Bildschirm benötigt kein 2000 Pixel breites Bild. Durch die Bereitstellung einer kleineren Version reduzieren Sie die Byte-Größe und beschleunigen das LCP.
Benutzer müssen in der Lage sein, auf AMP-Seiten dieselben Inhalte zu erleben und dieselben Aktionen auszuführen wie auf den entsprechenden kanonischen Seiten, wo immer dies möglich ist.
Google Search Central
Die Rolle des AMP Optimizer
Der AMP Optimizer ist ein Tool, das serverseitige Optimierungen an Ihrem AMP HTML durchführt. Er kann viele der manuellen Aufgaben automatisieren, die erforderlich sind, um LCP zu beschleunigen. Beispielsweise kann er das AMP-Layout auf dem Server vorab rendern, wodurch entfällt, dass der Browser auf den Start der AMP-Laufzeitumgebung warten muss. Diese Technik kann das LCP um mehrere hundert Millisekunden reduzieren.
Wenn Sie den Optimizer verwenden, transformiert er auch Ihre Bilder und ordnet die Elemente im Head Ihres Dokuments neu an. Dies stellt sicher, dass die kritischsten Ressourcen zuerst geladen werden. Viele moderne Content-Management-Systeme verfügen über Plugins, die den AMP Optimizer automatisch integrieren, was es Vermarktern erleichtert, eine hohe Leistung aufrechtzuerhalten.
Wie Alien Road amp core web vitals lcp anwendet
Alien Road verwaltet die AMP-Leistung, indem es mit einem detaillierten Audit des Berichts zu den Core Web Vitals der Google Search Console beginnt. Wir identifizieren, welche URLs den LCP-Schwellenwert verfehlen, und ermitteln das spezifische Element, das für die Verzögerung verantwortlich ist. In einem typischen Account ist dies oft ein Featured Image in einem Blogbeitrag oder ein Produkt-Hero-Bild auf einer E-Commerce-Seite.
Unser Prozess umfasst einige spezifische Schritte. Zunächst implementieren wir den AMP Optimizer auf der Server-Seite, um sicherzustellen, dass das Boilerplate-CSS das erste Rendern nicht blockiert. Zweitens wenden wir das data-hero-Attribut auf das primäre visuelle Element an. Auf einem Shopify-Shop für Haushaltswaren stellen wir beispielsweise sicher, dass die Hauptproduktaufnahme für das priorisierte Laden markiert ist. Wir überwachen auch die TTFB (Time to First Byte), denn wenn der Server langsam ist, wird keine Frontend-Optimierung das LCP beheben.
Nach der Implementierung verwenden wir die PageSpeed Insights API, um die Änderungen zu überprüfen. Wir suchen nach einem konsistenten Verbesserungstrend der Felddaten über einen Zeitraum von 28 Tagen. Dieser datengesteuerte Ansatz ermöglicht es uns, Kunden klare Berichte darüber zu liefern, wie sich ihre mobile Geschwindigkeit auf ihre allgemeine Suchsichtbarkeit auswirkt.
Sollten Sie AMP entfernen, um LCP zu verbessern?
Einige Entwickler erwägen, AMP zu entfernen, wenn sie die gewünschten Geschwindigkeitsziele nicht erreichen können. Zwar ist dies eine Option, sie muss jedoch sorgfältig gehandhabt werden, um den Verlust von Suchrankings zu vermeiden. Wenn Sie sich entscheiden, sich von AMP zu entfernen, müssen Sie sicherstellen, dass Ihre Nicht-AMP-Seiten genauso schnell sind und alle Web-Standardrichtlinien einhalten.
Laut Google haben Sie drei Möglichkeiten, AMP-Inhalte zu entfernen. Sie können alle Versionen einer Seite entfernen, nur die AMP-Version entfernen und die kanonische Nicht-AMP-Seite beibehalten oder ein CMS verwenden, um die Entfernung zu verwalten. Wenn die AMP-Seite die kanonische ist, müssen Sie eine neue kanonische Nicht-AMP-Seite einrichten und die alte URL korrekt umleiten, um 404-Fehler zu verhindern.
- Überprüfen Sie, ob Ihr CMS die automatisierte AMP-Optimierung unterstützt.
- Identifizieren Sie das LCP-Element für Ihre Top-10-Seiten mit den meisten Besuchen.
- Testen Sie den Unterschied zwischen gecachten und ungecachten Seitengeschwindigkeiten.
- Überprüfen Sie, ob strukturierte Daten über AMP- und Nicht-AMP-Versionen hinweg konsistent sind.
- Überwachen Sie den Core Web Vitals-Bericht in der Search Console wöchentlich.
Womit Sie diese Woche beginnen sollten
Beginnen Sie, indem Sie Ihre Google Search Console öffnen und zum Abschnitt „Core Web Vitals“ navigieren. Filtern Sie den Bericht so, dass nur mobile URLs angezeigt werden, und suchen Sie nach der Warnung „LCP-Problem: länger als 2,5 s“. Klicken Sie auf den Bericht, um die spezifischen URL-Gruppen anzuzeigen, die von dieser Verzögerung betroffen sind.
Sobald Sie die Liste haben, wählen Sie eine Beispiel-URL aus und führen Sie diese durch das PageSpeed Insights-Tool. Identifizieren Sie das LCP-Element im Abschnitt „Diagnose“. Wenn es sich um ein Bild handelt, prüfen Sie, ob es das data-hero-Attribut besitzt. Wenn es sich um einen Textblock handelt, prüfen Sie auf Verzögerungen beim Laden von Schriftarten. Diese kleinen Anpassungen an Ihren beliebtesten Seiten können zu einer signifikanten Verbesserung Ihrer gesamten Website-Leistung und der Nutzerbindung führen.