Core Web Vitals PrestaShop — Suivi CrUX par template (dfcoreweb)

DataFirefly Core Web Vitals interroge l’API Chrome UX Report (CrUX) de Google et rapatrie dans votre back-office les métriques de performance réellement mesurées chez vos visiteurs, séparément pour chaque type de page : accueil, catégorie, fiche produit, panier, page CMS et origine agrégée. Le module conserve l’historique complet, détecte les régressions et traduit chaque métrique dégradée en actions concrètes côté PrestaShop.

Prérequis : la clé API Chrome UX Report

Le module a besoin d’une clé API Google pour interroger CrUX. Elle est gratuite et s’obtient en quatre étapes :

1. Ouvrez la Google Cloud Console et créez un projet (ou sélectionnez un projet existant).
2. Dans API et services > Bibliothèque, recherchez Chrome UX Report API et cliquez sur Activer.
3. Dans API et services > Identifiants, cliquez sur Créer des identifiants puis Clé API.
4. Copiez la clé générée (elle commence par AIzaSy) et collez-la dans la configuration du module.

Installation

1. Dans votre back-office, ouvrez Modules > Gestionnaire de modules.
2. Cliquez sur Installer un module et déposez le fichier dfcoreweb.zip.
3. Cliquez sur Configurer une fois l’installation terminée.

L’installation crée trois tables (URLs suivies, snapshots historiques, journal des recommandations masquées) et ajoute un menu DataFirefly Core Web Vitals sous Améliorer, avec quatre onglets : Dashboard, Configuration, Historique et Recommandations.

Configuration

Clé API

Collez votre clé Chrome UX Report dans le champ prévu et enregistrez. Tant que ce champ est vide, le tableau de bord affiche un avertissement et aucune synchronisation n’est possible.

Form factors suivis

CrUX publie ses métriques séparément par type d’appareil. Trois cases à cocher permettent de choisir ceux que vous suivez :

• Mobile — activé par défaut, c’est le form factor utilisé par Google pour l’évaluation de l’expérience de page.
• Bureau — activé par défaut, utile si votre trafic desktop est significatif.
• Tablette — désactivé par défaut, CrUX dispose rarement de données suffisantes sur ce segment.

Chaque form factor supplémentaire multiplie le nombre d’appels quotidiens, sans risque de dépassement de quota compte tenu des volumes en jeu.

URLs suivies

Par défaut, le module choisit lui-même une URL représentative par type de page : la page d’accueil, la catégorie contenant le plus de produits, le produit le plus vendu, la page panier et la première page CMS active. Il interroge également l’origine, c’est-à-dire l’agrégation de tout le domaine.

Trois champs permettent de reprendre la main en saisissant des identifiants séparés par des virgules :

• IDs produits — pour suivre une fiche précise plutôt que le best-seller courant.
• IDs catégories — pour suivre une catégorie stratégique.
• IDs pages CMS — pour suivre une landing page ou une page de contenu à fort trafic.

Rétention des données

Le champ Durée de rétention (365 jours par défaut) définit l’ancienneté au-delà de laquelle les snapshots sont purgés. La purge s’exécute à chaque synchronisation, et un bouton du tableau de bord permet de la déclencher manuellement.

Alertes de régression

• Notifier en cas de régression — active l’envoi d’e-mails.
• Adresse e-mail — destinataire des alertes ; laissez vide pour utiliser l’adresse de la boutique.
• Seuil de régression — pourcentage de dégradation déclenchant l’alerte, 15 % par défaut.

Après chaque synchronisation, la nouvelle valeur de chaque métrique est comparée à la moyenne des sept derniers jours. Si l’écart dépasse le seuil, un e-mail HTML et texte est envoyé avec le détail du delta et un lien direct vers le tableau de bord.

Synchronisation automatique

La page de configuration affiche une URL de synchronisation protégée par un jeton dérivé de la clé de sécurité de votre boutique. Appelez-la une fois par jour depuis votre planificateur de tâches :

0 6 * * * curl -s "https://votre-boutique.com/index.php?fc=module&module=dfcoreweb&controller=cron&token=VOTRE_JETON" > /dev/null

Sous Windows, utilisez le Planificateur de tâches ; sur un hébergement mutualisé, le module Crontab Manager de PrestaShop ou le planificateur de votre panneau d’administration font aussi l’affaire.

Le bouton Lancer une synchronisation du tableau de bord permet de déclencher immédiatement une collecte, utile pour valider la configuration juste après l’installation.

Lire le tableau de bord

Le tableau de bord affiche une tuile par type de page, avec la dernière valeur connue de chaque métrique et un code couleur reprenant les seuils officiels de Google :

• LCP (Largest Contentful Paint) — bon jusqu’à 2,5 s, à améliorer jusqu’à 4 s, mauvais au-delà.
• INP (Interaction to Next Paint) — bon jusqu’à 200 ms, à améliorer jusqu’à 500 ms, mauvais au-delà.
• CLS (Cumulative Layout Shift) — bon jusqu’à 0,1, à améliorer jusqu’à 0,25, mauvais au-delà.
• FCP (First Contentful Paint) — bon jusqu’à 1,8 s, à améliorer jusqu’à 3 s.
• TTFB (Time To First Byte) — bon jusqu’à 0,8 s, à améliorer jusqu’à 1,8 s.

Toutes les valeurs sont exprimées au 75e centile : elles représentent l’expérience des 25 % de visiteurs les moins bien servis, conformément à la méthodologie de Google. Une boutique est considérée comme « réussissant » l’évaluation lorsque LCP, INP et CLS sont simultanément dans le vert.

Historique

L’onglet Historique superpose l’évolution de chaque métrique sur 30, 90, 180 ou 365 jours, pour un type de page et un form factor donnés. Les graphiques affichent en pointillés les seuils de Google, ce qui rend immédiatement lisible le passage d’une zone à l’autre. Une courbe supplémentaire suit le pourcentage de visites classées « bonnes » sur les trois métriques principales.

C’est la vue à consulter après une mise en production, une migration de thème ou l’ajout d’un script tiers : une dégradation de LCP apparaît généralement dans les jours qui suivent, décalée par la fenêtre glissante de 28 jours.

Recommandations

Chaque métrique hors seuil génère une ou plusieurs recommandations rattachées au type de page concerné, triées par sévérité :

• Critique — métrique dans la zone rouge, impact direct sur le référencement et la conversion.
• Avertissement — métrique dans la zone orange, marge de progression significative.
• Information — bonne pratique applicable même en zone verte.

Les conseils sont formulés en vocabulaire PrestaShop : format et préchargement de l’image de couverture sur une fiche produit, dimensions explicites des miniatures de la grille catégorie, nombre de modules greffés sur les hooks d’en-tête, compression et cache serveur pour le TTFB, différé des scripts tiers pour l’INP. Chaque recommandation porte une estimation d’impact business calibrée sur l’étude Deloitte « Milliseconds Make Millions ».

Le bouton Masquer retire une recommandation de la liste pendant 30 jours, le temps de traiter le sujet ou d’acter qu’il n’est pas prioritaire.

Le statut « données insuffisantes »

CrUX ne publie une métrique que lorsque suffisamment de visiteurs Chrome ont chargé l’URL sur la période. En dessous de ce seuil, l’API répond que l’enregistrement n’existe pas : le module enregistre alors un statut « données insuffisantes » sans erreur ni interruption de la collecte.

Si c’est le cas de la plupart de vos pages, appuyez-vous sur la ligne Origine : l’agrégation de tout le domaine atteint le seuil bien plus facilement et reste représentative de l’expérience moyenne de votre boutique.

Vie privée et hébergement des données

Aucune donnée client n’est transmise à Google. Seules les URL publiques que vous avez choisi de suivre sont envoyées à l’API CrUX, et les métriques renvoyées sont déjà anonymisées et agrégées par Google. Tous les relevés sont stockés dans votre propre base de données PrestaShop. La bibliothèque de graphiques est embarquée dans le module : aucun appel à un CDN externe, aucune télémétrie, aucun script d’analyse côté visiteur.

Dépannage

• Erreur d’authentification à la synchronisation — la clé API est absente, mal recopiée, ou l’API Chrome UX Report n’a pas été activée sur le projet Google Cloud. Vérifiez également qu’aucune restriction d’adresse IP ou de référent HTTP n’est appliquée à la clé.
• Toutes les lignes en « données insuffisantes » — le trafic Chrome sur ces URL est trop faible. Suivez l’origine, et choisissez manuellement des pages à fort trafic.
• L’appel cron renvoie une erreur d’autorisation — le jeton de l’URL ne correspond plus. Il dépend du nom de la boutique et de la clé de sécurité de l’installation : recopiez l’URL affichée dans la configuration après tout changement de nom de boutique.
• Le menu n’apparaît pas après l’installation — videz le cache dans Paramètres avancés > Performances, puis vérifiez les permissions de votre profil employé sur les nouveaux onglets.
• Les graphiques restent vides — il faut au minimum deux synchronisations à des dates différentes pour tracer une courbe. Patientez 24 heures après la première collecte.

Désinstallation

La désinstallation supprime les trois tables du module, l’ensemble des clés de configuration et les onglets du back-office. L’historique des mesures est définitivement perdu : exportez vos données auparavant si vous souhaitez les conserver. Une confirmation explicite est demandée avant l’opération.