Core Web Vitals PrestaShop: CrUX-Monitoring und Diagnose pro Modul (dfcoreweb)

DataFirefly Core Web Vitals holt die Leistungswerte, die Ihre Chrome-Besucher tatsächlich erleben (CrUX-Bericht von Google), in Ihr Back-Office, getrennt nach Seitentyp: Startseite, Kategorie, Produktseite, Warenkorb, CMS-Seite und gesamte Domain. Das Modul speichert den Verlauf, warnt per E-Mail, wenn sich eine Kennzahl verschlechtert, vergleicht Ihren Shop mit Ihren Wettbewerbern und zeigt mit einer PageSpeed-Insights-Diagnose, welches Modul, welche Theme-Datei oder welcher Drittanbieter-Dienst eine Seite bremst.

Voraussetzung: der Google-API-Schlüssel

Das Modul nutzt zwei kostenlose Google-APIs mit demselben Schlüssel: Chrome UX Report (echte Messwerte) und PageSpeed Insights (Reiter Diagnose).

1. Öffnen Sie die Google Cloud Console und legen Sie ein Projekt an (oder wählen Sie eines aus).
2. Aktivieren Sie unter APIs & Dienste > Bibliothek die Chrome UX Report API.
3. Aktivieren Sie in der Bibliothek außerdem die PageSpeed Insights API.
4. Klicken Sie unter APIs & Dienste > Anmeldedaten auf Anmeldedaten erstellen > API-Schlüssel und kopieren Sie den Schlüssel (er beginnt mit AIzaSy).

Installation und Update

1. Öffnen Sie Module > Modul-Manager und klicken Sie auf Modul hochladen.
2. Legen Sie die Datei dfcoreweb.zip ab.
3. Klicken Sie auf Konfigurieren: Sie gelangen zum Dashboard des Moduls.

Die Installation legt 5 Tabellen und unter Optimieren ein Menü Core Web Vitals mit 5 Seiten an: Dashboard, Empfehlungen, Verlauf, Diagnose und Konfiguration.

Update von Version 1.0.0

Installieren Sie die neue ZIP-Datei über die alte, ohne zu deinstallieren. Das Update ordnet das Menü neu, repariert die von 1.0.0 gespeicherten Messwerte (fehlende Kennzahlen wurden dort als 0 gespeichert), fügt die neuen Tabellen hinzu und entfernt die alten Dateien.

Konfiguration

API-Schlüssel

Fügen Sie den Schlüssel ein und klicken Sie auf Speichern und testen. Das Modul fragt CrUX für die Domain des Shops ab und zeigt eines dieser Ergebnisse:

• Gültiger Schlüssel: CrUX liefert Daten: Alles ist bereit.
• Gültiger Schlüssel, CrUX hat noch nicht genug Chrome-Traffic für die Domain: Der Schlüssel funktioniert, stark besuchte Seiten können trotzdem Messwerte liefern, und die Diagnose bleibt verfügbar.
• Google hat den API-Schlüssel abgelehnt: Prüfen Sie den Schlüssel und ob die Chrome UX Report API im Projekt aktiviert ist.
• Der Shop-Server erreicht die Google-Server nicht: siehe Fehlerbehebung am Ende der Seite.

Erfasste Geräte

• Mobil: standardmäßig aktiviert; diesen Gerätetyp verwendet Google für die Bewertung der Seitenerfahrung.
• Desktop: standardmäßig aktiviert.
• Tablet: standardmäßig deaktiviert, CrUX hat für dieses Segment selten genug Daten.

Mindestens ein Gerät bleibt immer aktiv: Wenn Sie alle Häkchen entfernen, wird Mobil wieder aktiviert.

Gemessene Seiten

Startseite, Warenkorb und die gesamte Domain werden immer gemessen. Für die anderen Typen lassen Sie das Feld für die automatische Auswahl leer oder geben kommagetrennte IDs ein:

• Produkt-IDs: leer = die 3 Bestseller der letzten 90 Tage (bestätigte Bestellungen des Shops), ersatzweise die 3 neuesten Produkte.
• Kategorie-IDs: leer = die 3 Kategorien mit den meisten aktiven Produkten, ohne Stamm- und Startseiten-Kategorie.
• CMS-Seiten-IDs: leer = keine CMS-Seite gemessen.

Wettbewerber

Geben Sie bis zu 5 Domains ein, eine pro Zeile (wettbewerber.de oder https://www.wettbewerber.com). Da CrUX-Daten öffentlich sind, misst das Modul die gesamte Domain jedes Wettbewerbers, ohne dort etwas zu installieren. Wettbewerber fließen weder in die Warnungen noch in die Empfehlungen ein.

Automatische Synchronisierung

• Die folgende Synchronisierungs-URL erlauben: aktiviert die weiter unten beschriebene geplante Aufgabe.
• Wöchentlichen CrUX-Verlauf importieren: holt für jede Seite bis zu 40 Wochen vergangener Messwerte und aktualisiert sie danach einmal pro Woche.
• Automatische Laboranalyse: Die geplante Aufgabe analysiert eine Seite pro Tag mit PageSpeed Insights (mobil), sodass jede Seite etwa einmal pro Woche geprüft wird.
• Aufbewahrung des Verlaufs: standardmäßig 365 Tage, von 30 bis 3650. Ältere Messwerte, Analysen und Ereignisse werden bei jeder Synchronisierung gelöscht.

Regressions-Warnungen

• E-Mail senden, wenn sich eine Kennzahl verschlechtert: aktiviert die Warnungen.
• Empfänger: leer = E-Mail-Adresse des Shops.
• Schwellenwert der Verschlechterung: standardmäßig 15 %, von 5 bis 100 %.

Bei jeder Synchronisierung werden LCP, INP, CLS und TTFB jeder Seite und jedes Geräts mit ihrem Durchschnitt der letzten 7 Tage verglichen (mindestens 3 Messungen). Eine Warnung wird ausgelöst, wenn der Anstieg den Schwellenwert überschreitet und der Wert nicht mehr im grünen Bereich von Google liegt. Alle Regressionen einer Synchronisierung landen in einer einzigen E-Mail, und dieselbe Seite löst für dieselbe Kennzahl innerhalb von 7 Tagen keine erneute Warnung aus. Die Schaltfläche Test-E-Mail senden prüft die Adresse und die E-Mail-Konfiguration des Shops.

PrestaShop-Dashboard

Die Option Eine mobile Übersicht anzeigen fügt auf der Startseite des Back-Office einen Block mit den mobilen Werten für LCP, INP und CLS pro Seitentyp und ihrem Status hinzu.

Die geplante Aufgabe

Der Reiter Konfiguration zeigt die einmal täglich aufzurufende URL und eine fertige Crontab-Zeile zum Kopieren:

17 6 * * * curl -fsS "https://ihr-shop.de/module/dfcoreweb/cron?token=IHR_TOKEN" > /dev/null

Im Shared Hosting verwenden Sie die Aufgabenplanung Ihres Hosting-Panels oder einen Dienst wie cron-job.org. Jeder Aufruf:

1. aktualisiert die Liste der erfassten Seiten (Bestseller, Kategorien);
2. fragt CrUX für jede Seite, jedes Gerät und jeden Wettbewerber ab;
3. sendet bei Bedarf die Warn-E-Mail;
4. importiert den wöchentlichen Verlauf, wenn er fällig ist;
5. startet die Laboranalyse des Tages;
6. löscht Daten, die älter als die Aufbewahrungsdauer sind.

Die URL antwortet mit JSON und dem Code 200, wenn alles geklappt hat, und 502 bei einem Fehler, damit Ihr Cron-Dienst Sie benachrichtigen kann. Ein falsches Token erhält den Code 403. Die Aufgabe läuft auch im Wartungsmodus und verhindert zwei gleichzeitige Läufe für denselben Shop (Sperre von 15 Minuten).

Das Dashboard warnt Sie, wenn die Aufgabe noch nie aufgerufen wurde oder seit mehr als 3 Tagen keine Synchronisierung stattgefunden hat. Die Schaltfläche Jetzt synchronisieren startet sofort eine Erhebung, nützlich direkt nach der Installation.

Das Dashboard

Eine Kachel pro Seitentyp zeigt für jedes Gerät die fünf Kennzahlen im 75. Perzentil über gleitende 28 Tage, in den Farben der Google-Schwellenwerte:

• LCP (Anzeige des Hauptinhalts): gut bis 2,5 s, schlecht über 4 s.
• INP (Reaktion auf Interaktionen): gut bis 200 ms, schlecht über 500 ms.
• CLS (visuelle Stabilität): gut bis 0,1, schlecht über 0,25.
• FCP (erste Anzeige): gut bis 1,8 s, schlecht über 3 s.
• TTFB (Antwortzeit des Servers): gut bis 0,8 s, schlecht über 1,8 s.

Das Badge Bestanden oder Nicht bestanden folgt der Regel von Google: LCP, INP und CLS im grünen Bereich (INP wird ignoriert, wenn CrUX dafür keinen Wert veröffentlicht, was im Warenkorb häufig ist). Unter jedem Wert zeigt ein Pfeil die Entwicklung gegenüber vor 4 Wochen: rot, wenn sich die Kennzahl verschlechtert, grün, wenn sie sich verbessert. Fasst ein Seitentyp mehrere URLs zusammen, zeigt die Kachel deren Durchschnitt.

Weiter unten ordnet der Vergleich mit Ihren Wettbewerbern Ihre Domain und die Ihrer Wettbewerber nach LCP, für jedes Gerät. Die Tabelle Erfasste URLs listet jede Seite mit ihren Messwerten, ihrem letzten PageSpeed-Score (Spalte Labor) und zwei Abkürzungen auf: zu ihrem Verlauf und zu ihrer Diagnose.

Empfehlungen

Jede Kennzahl außerhalb des grünen Bereichs erzeugt eine Empfehlung. Empfehlungen mit derselben Ursache werden zu einer einzigen Karte zusammengefasst, die die betroffenen Seiten mit ihrem Wert auflistet (zum Beispiel den TTFB auf Startseite, Kategorien und Produktseiten). Jede Karte zeigt:

• den Schweregrad: Kritisch (roter Bereich), Zu beheben (oranger Bereich) oder Tipp;
• die wahrscheinliche Ursache auf diesem PrestaShop-Seitentyp und die Schritte zur Behebung;
• eine Größenordnung der Wirkung aus öffentlichen Studien, als Schätzung gekennzeichnet;
• Links zu den betroffenen Seiten im Back-Office (Leistung, Bildeinstellungen, Modulpositionen, Warenkorbregeln) und zur Diagnose.

30 Tage ausblenden blendet die Karte für alle ihre Seiten aus. Sie erscheint wieder, wenn eine neue Seite betroffen ist, und ein Link oben auf der Seite zeigt die ausgeblendeten Empfehlungen an, um sie wieder einzublenden.

Verlauf

Wählen Sie den Seitentyp, die URL (oder den Durchschnitt aller URLs dieses Typs), das Gerät und den Zeitraum (30, 90, 180 oder 365 Tage). Sechs Diagramme erscheinen: LCP, INP, CLS, TTFB, FCP und der Anteil der URLs, die die Bewertung bestehen, mit den Google-Schwellenwerten als gestrichelte Linien.

Vor der ersten Synchronisierung entspricht jeder Punkt einer aus dem CrUX-Verlauf importierten Woche, danach ein Punkt pro Synchronisierung. Jeder Punkt umfasst die 28 Tage davor: Eine Änderung braucht etwa 4 Wochen, bis sie vollständig sichtbar ist.

Ereignisse

Installationen und Deinstallationen von Modulen werden automatisch erfasst und erscheinen als gepunktete Linien in den Diagrammen. Fügen Sie eigene Markierungen mit Datum und Beschreibung hinzu (Theme-Update, Hosting-Wechsel, Kampagne), um eine Veränderung ihrer Ursache zuzuordnen. Wenn Sie mit der Maus über einen Punkt fahren, sehen Sie die Ereignisse in seiner Nähe.

Die Schaltfläche CSV-Export lädt die angezeigte Auswahl herunter, mit der Quelle jedes Punkts (wöchentlich oder täglich).

Seitendiagnose

Wählen Sie eine erfasste Seite und das Gerät (Mobil oder Desktop) und klicken Sie auf Analyse starten. Google lädt die Seite von seinen Servern, und das Ergebnis liegt nach 20 bis 60 Sekunden vor. Es wird gespeichert: Wenn Sie Seite oder Gerät wechseln, sehen Sie die letzte Analyse, ohne eine neue zu starten.

Score und Screenshot

Der Performance-Score (von 100), die Werte für LCP, TBT, CLS, FCP, Speed Index und TTFB, das Gesamtgewicht, die Zahl der Anfragen und der Screenshot dessen, was Google angezeigt hat.

LCP-Element

Das Element, das den LCP bestimmt (Bild, Banner, Überschrift), mit seinem HTML-Code und der Aufteilung seiner Zeit in vier Schritte: Serverantwort, Wartezeit vor dem Download, Download der Ressource und Render-Verzögerung. Ein Hinweis bezieht sich auf den längsten Schritt, zum Beispiel das Bild vorzuladen, wenn es spät entdeckt wird, oder loading="lazy" zu entfernen, wenn das LCP-Bild verzögert geladen wird.

Was die Seite belastet

Jede geladene Datei wird anhand ihres Pfads ihrer Herkunft zugeordnet:

• Modul: Dateien unter /modules/modulname/, mit dem Namen des Moduls angezeigt;
• Theme: Dateien unter /themes/name/;
• Shop: Dateien des PrestaShop-Core, Bilder des Shops sowie die HTML-Seite mit den direkt darin geschriebenen Skripten;
• Drittanbieter: jede andere Domain, von Google benannt, wenn sie erkannt wird (Google Tag Manager, Facebook, Chat-Tools…).

Für jede Herkunft: CPU-Zeit (Ausführung von JavaScript während des Ladens, die Hauptursache eines hohen INP), Gewicht von JS, CSS und anderen Dateien, ungenutztes JavaScript und Zahl der Anfragen. Die Tabelle ist nach CPU-Zeit sortiert.

Render-blockierende Dateien und gemeldete Punkte

Die Liste der Dateien, die die Anzeige blockieren, jeweils mit ihrem Modul oder ihrer Herkunft, und die von Google gemeldeten Punkte (Cache, Bildformat, ungenutztes JavaScript…), nach geschätztem Gewinn sortiert, jeweils mit einem Lösungsansatz für PrestaShop. Die Bezeichnungen von Google erscheinen in der Sprache des Back-Office.

Frühere Analysen

Die Tabelle der letzten Analysen der Seite (Score, LCP, TBT, CLS, Gewicht oder der aufgetretene Fehler) zeigt, ob eine Korrektur gewirkt hat.

Automatische Analyse

Mit der Option Automatische Laboranalyse analysiert die geplante Aufgabe jeden Tag die Seite, deren letzte mobile Analyse am längsten zurückliegt, sofern diese älter als 7 Tage ist. Für einen Shop ohne CrUX-Messwerte pro Seite ist das die einzige Messung, die sich über die Zeit verfolgen lässt.

Der Status „Zu wenig Chrome-Traffic“

CrUX veröffentlicht einen Messwert nur, wenn genügend Chrome-Besucher die URL innerhalb von 28 Tagen geladen haben. Andernfalls speichert das Modul diesen Status ohne Fehler, und die Synchronisierung läuft weiter. Stützen Sie sich dann auf die gesamte Domain, die die Schwelle leichter erreicht, und für die betroffenen Seiten auf den Reiter Diagnose.

Datenschutz

Nur die erfassten öffentlichen URLs und die von Ihnen eingegebenen Wettbewerber-Domains werden an Google gesendet. Keine Kundendaten verlassen den Shop. Alle Messwerte, Analysen und Ereignisse bleiben in Ihrer PrestaShop-Datenbank; jede Analyse speichert eine Zusammenfassung und den Screenshot der Seite (etwa 50 KB) mit derselben Aufbewahrungsdauer. Chart.js ist im Modul eingebettet: kein CDN, keine Telemetrie.

Fehlerbehebung

• „Google hat den API-Schlüssel abgelehnt“: Schlüssel falsch kopiert, Chrome UX Report API im Projekt nicht aktiviert oder HTTP-Referrer-Beschränkung auf dem Schlüssel.
• „Die PageSpeed Insights API ist im Google-Cloud-Projekt Ihres Schlüssels nicht aktiviert“ (Reiter Diagnose): Aktivieren Sie die PageSpeed Insights API in der Bibliothek desselben Google-Cloud-Projekts.
• „Der Shop-Server erreicht die Google-Server nicht“: Der Hoster blockiert ausgehende Verbindungen. Bitten Sie ihn, ausgehende HTTPS-Verbindungen zu googleapis.com zu erlauben. Die Synchronisierung bricht nach zwei Fehlschlägen ab, statt bei jeder Seite zu warten.
• „Kontingent überschritten“: Die Synchronisierung wird beim nächsten Lauf der geplanten Aufgabe fortgesetzt. Bei PageSpeed versuchen Sie es eine Minute später erneut.
• „Für diesen Shop läuft bereits eine Synchronisierung“: Eine Synchronisierung ist für diesen Shop bereits aktiv; versuchen Sie es in einigen Minuten erneut.
• Die Cron-URL antwortet mit 403: Das Token ist nicht mehr gültig (neues Token oder Update von 1.0.0). Kopieren Sie die URL aus dem Reiter Konfiguration erneut.
• Die Test-E-Mail kommt nicht an: Prüfen Sie die Adresse und Erweiterte Einstellungen > E-Mail.
• Die Diagnose schlüsselt die Module nicht auf: Deaktivieren Sie den CCC für die Dauer einer Analyse (siehe oben).
• Das Menü erscheint nicht: Leeren Sie den Cache unter Erweiterte Einstellungen > Leistung und prüfen Sie die Berechtigungen des Mitarbeiterprofils für die Reiter des Moduls.

Deinstallation

Die Deinstallation löscht nach Bestätigung die 5 Tabellen des Moduls, seine Konfiguration und seine Reiter. Der Verlauf geht endgültig verloren: Exportieren Sie ihn vorher im Reiter Verlauf als CSV, wenn Sie ihn behalten möchten.