Core Web Vitals PrestaShop — CrUX-Tracking pro Template (dfcoreweb)

DataFirefly Core Web Vitals fragt die Chrome-UX-Report-API (CrUX) von Google ab und holt die tatsächlich bei Ihren Besuchern gemessenen Performance-Kennzahlen in Ihr Back-Office — getrennt nach Seitentyp: Startseite, Kategorie, Produktseite, Warenkorb, CMS-Seite und aggregierte Origin. Das Modul bewahrt den vollständigen Verlauf auf, erkennt Regressionen und übersetzt jede verschlechterte Kennzahl in konkrete PrestaShop-Maßnahmen.

Voraussetzung: der Chrome-UX-Report-API-Schlüssel

Das Modul benötigt einen Google-API-Schlüssel, um CrUX abzufragen. Er ist kostenlos und in vier Schritten erstellt:

1. Öffnen Sie die Google Cloud Console und legen Sie ein Projekt an (oder wählen Sie ein bestehendes aus).
2. Suchen Sie unter APIs und Dienste > Bibliothek nach Chrome UX Report API und klicken Sie auf Aktivieren.
3. Klicken Sie unter APIs und Dienste > Anmeldedaten auf Anmeldedaten erstellen und dann auf API-Schlüssel.
4. Kopieren Sie den erzeugten Schlüssel (er beginnt mit AIzaSy) und fügen Sie ihn in die Modulkonfiguration ein.

Installation

1. Öffnen Sie im Back-Office Module > Modul-Manager.
2. Klicken Sie auf Modul hochladen und legen Sie die Datei dfcoreweb.zip ab.
3. Klicken Sie nach Abschluss der Installation auf Konfigurieren.

Die Installation legt drei Tabellen an (verfolgte URLs, historische Snapshots, Protokoll ausgeblendeter Empfehlungen) und fügt unter Verbessern ein Menü DataFirefly Core Web Vitals mit vier Reitern hinzu: Dashboard, Konfiguration, Verlauf und Empfehlungen.

Konfiguration

API-Schlüssel

Fügen Sie Ihren Chrome-UX-Report-Schlüssel in das vorgesehene Feld ein und speichern Sie. Solange dieses Feld leer ist, zeigt das Dashboard einen Warnhinweis und es ist keine Synchronisation möglich.

Verfolgte Endgerätetypen

CrUX veröffentlicht seine Kennzahlen getrennt nach Gerätetyp. Drei Kontrollkästchen bestimmen, welche Sie verfolgen:

• Mobil — standardmäßig aktiviert; dies ist der Typ, den Google für die Bewertung der Seitenerfahrung heranzieht.
• Desktop — standardmäßig aktiviert, sinnvoll bei nennenswertem Desktop-Traffic.
• Tablet — standardmäßig deaktiviert; CrUX verfügt in diesem Segment selten über ausreichende Daten.

Jeder zusätzliche Gerätetyp vervielfacht die Zahl der täglichen Aufrufe — angesichts der Größenordnungen ohne jedes Risiko einer Kontingentüberschreitung.

Verfolgte URLs

Standardmäßig wählt das Modul selbst eine repräsentative URL je Seitentyp: die Startseite, die Kategorie mit den meisten Produkten, das meistverkaufte Produkt, die Warenkorbseite und die erste aktive CMS-Seite. Zusätzlich fragt es die Origin ab, also die Aggregation der gesamten Domain.

Über drei Felder übernehmen Sie die Kontrolle, indem Sie durch Kommas getrennte IDs eintragen:

• Produkt-IDs — um eine bestimmte Seite statt des aktuellen Bestsellers zu verfolgen.
• Kategorie-IDs — um eine strategisch wichtige Kategorie zu verfolgen.
• CMS-Seiten-IDs — um eine Landingpage oder eine besucherstarke Inhaltsseite zu verfolgen.

Datenaufbewahrung

Das Feld Aufbewahrungsdauer (standardmäßig 365 Tage) legt fest, ab welchem Alter Snapshots bereinigt werden. Die Bereinigung läuft bei jeder Synchronisation; eine Schaltfläche im Dashboard stößt sie manuell an.

Regressions-Warnungen

• Bei Regression benachrichtigen — aktiviert den E-Mail-Versand.
• E-Mail-Adresse — Empfänger der Warnungen; leer lassen, um die Shop-Adresse zu verwenden.
• Regressions-Schwellenwert — Verschlechterung in Prozent, ab der die Warnung ausgelöst wird, standardmäßig 15 %.

Nach jeder Synchronisation wird der neue Wert jeder Kennzahl mit dem Durchschnitt der letzten sieben Tage verglichen. Überschreitet die Abweichung den Schwellenwert, geht eine E-Mail in HTML und Klartext heraus, mit Delta-Details und einem direkten Link zum Dashboard.

Automatische Synchronisation

Die Konfigurationsseite zeigt eine Synchronisations-URL an, die durch ein aus dem Sicherheitsschlüssel Ihres Shops abgeleitetes Token geschützt ist. Rufen Sie sie einmal täglich über Ihre Aufgabenplanung auf:

0 6 * * * curl -s "https://ihr-shop.de/index.php?fc=module&module=dfcoreweb&controller=cron&token=IHR_TOKEN" > /dev/null

Unter Windows verwenden Sie die Aufgabenplanung; im Shared Hosting leisten das PrestaShop-Modul Crontab Manager oder der Planer Ihres Hosting-Panels dasselbe.

Die Schaltfläche Synchronisation starten im Dashboard stößt sofort eine Erhebung an — nützlich, um die Konfiguration direkt nach der Installation zu prüfen.

Das Dashboard lesen

Das Dashboard zeigt eine Kachel je Seitentyp, mit dem letzten bekannten Wert jeder Kennzahl und einer Farbcodierung nach den offiziellen Google-Schwellenwerten:

• LCP (Largest Contentful Paint) — gut bis 2,5 s, verbesserungswürdig bis 4 s, schlecht darüber.
• INP (Interaction to Next Paint) — gut bis 200 ms, verbesserungswürdig bis 500 ms, schlecht darüber.
• CLS (Cumulative Layout Shift) — gut bis 0,1, verbesserungswürdig bis 0,25, schlecht darüber.
• FCP (First Contentful Paint) — gut bis 1,8 s, verbesserungswürdig bis 3 s.
• TTFB (Time To First Byte) — gut bis 0,8 s, verbesserungswürdig bis 1,8 s.

Alle Werte werden im 75. Perzentil angegeben: Sie stehen für die Erfahrung der 25 % am schlechtesten bedienten Besucher, entsprechend der Methodik von Google. Ein Shop gilt als „bestanden“, wenn LCP, INP und CLS gleichzeitig im grünen Bereich liegen.

Verlauf

Der Reiter Verlauf stellt die Entwicklung jeder Kennzahl über 30, 90, 180 oder 365 Tage dar, für einen bestimmten Seitentyp und Gerätetyp. Die Diagramme zeigen die Google-Schwellenwerte als gestrichelte Linien, wodurch der Wechsel von einem Bereich in den anderen sofort erkennbar wird. Eine zusätzliche Kurve verfolgt den Anteil der über die drei Hauptkennzahlen als „gut“ eingestuften Besuche.

Diese Ansicht sollten Sie nach einem Deployment, einer Theme-Migration oder dem Hinzufügen eines Drittanbieter-Skripts prüfen: eine LCP-Verschlechterung zeigt sich meist in den Folgetagen, zeitversetzt durch das gleitende 28-Tage-Fenster.

Empfehlungen

Jede Kennzahl außerhalb des Schwellenwerts erzeugt eine oder mehrere Empfehlungen, die dem betreffenden Seitentyp zugeordnet und nach Schweregrad sortiert sind:

• Kritisch — Kennzahl im roten Bereich, unmittelbare Auswirkung auf Ranking und Conversion.
• Warnung — Kennzahl im gelben Bereich, deutliches Verbesserungspotenzial.
• Information — bewährte Praxis, auch im grünen Bereich anwendbar.

Die Hinweise sind in PrestaShop-Vokabular formuliert: Format und Preloading des Titelbilds auf einer Produktseite, explizite Abmessungen der Vorschaubilder im Kategorie-Grid, Anzahl der auf Header-Hooks eingehängten Module, Komprimierung und Server-Cache für den TTFB, verzögertes Laden von Drittanbieter-Skripten für den INP. Jede Empfehlung enthält eine Abschätzung der geschäftlichen Auswirkung, kalibriert anhand der Deloitte-Studie „Milliseconds Make Millions“.

Die Schaltfläche Ausblenden entfernt eine Empfehlung für 30 Tage aus der Liste — Zeit genug, das Thema zu bearbeiten oder es bewusst zurückzustellen.

Der Status „Nicht genügend Daten“

CrUX veröffentlicht eine Kennzahl erst, wenn im Zeitraum genügend Chrome-Besucher die URL geladen haben. Unterhalb dieser Schwelle antwortet die API, dass der Datensatz nicht existiert: Das Modul speichert dann den Status „Nicht genügend Daten“ — ohne Fehler und ohne Unterbrechung der Erhebung.

Betrifft das die meisten Ihrer Seiten, stützen Sie sich auf die Zeile Origin: Die Aggregation der gesamten Domain erreicht die Schwelle deutlich leichter und bleibt repräsentativ für die durchschnittliche Erfahrung in Ihrem Shop.

Datenschutz und Datenhaltung

Es werden keine Kundendaten an Google gesendet. Nur die öffentlichen URLs, die Sie zur Verfolgung ausgewählt haben, gehen an die CrUX-API, und die zurückgelieferten Kennzahlen sind von Google bereits anonymisiert und aggregiert. Sämtliche Messwerte liegen in Ihrer eigenen PrestaShop-Datenbank. Die Diagrammbibliothek ist im Modul eingebettet: kein Aufruf eines externen CDN, keine Telemetrie, kein Analyse-Skript auf Besucherseite.

Fehlerbehebung

• Authentifizierungsfehler bei der Synchronisation — der API-Schlüssel fehlt, wurde falsch übernommen, oder die Chrome UX Report API wurde im Google-Cloud-Projekt nicht aktiviert. Prüfen Sie außerdem, ob dem Schlüssel eine IP- oder HTTP-Referrer-Beschränkung zugewiesen ist.
• Alle Zeilen zeigen „Nicht genügend Daten“ — der Chrome-Traffic auf diesen URLs ist zu gering. Verfolgen Sie die Origin und wählen Sie besucherstarke Seiten manuell aus.
• Der Cron-Aufruf liefert einen Autorisierungsfehler — das Token der URL passt nicht mehr. Es hängt vom Shop-Namen und vom Sicherheitsschlüssel der Installation ab: Kopieren Sie die in der Konfiguration angezeigte URL nach jeder Änderung des Shop-Namens erneut.
• Das Menü erscheint nach der Installation nicht — leeren Sie den Cache unter Erweiterte Einstellungen > Leistung und prüfen Sie die Berechtigungen Ihres Mitarbeiterprofils für die neuen Reiter.
• Die Diagramme bleiben leer — für eine Kurve sind mindestens zwei Synchronisationen an verschiedenen Tagen nötig. Warten Sie nach der ersten Erhebung 24 Stunden ab.

Deinstallation

Die Deinstallation entfernt die drei Tabellen des Moduls, sämtliche Konfigurationsschlüssel und die Back-Office-Reiter. Der Messverlauf geht endgültig verloren: Exportieren Sie Ihre Daten vorher, wenn Sie sie behalten möchten. Vor dem Vorgang wird eine ausdrückliche Bestätigung verlangt.