Core Web Vitals PrestaShop — Monitoraggio CrUX per template (dfcoreweb)

DataFirefly Core Web Vitals interroga l’API Chrome UX Report (CrUX) di Google e porta nel vostro back-office le metriche di performance realmente misurate sui dispositivi dei vostri visitatori, separatamente per ogni tipo di pagina: home, categoria, scheda prodotto, carrello, pagina CMS e origine aggregata. Il modulo conserva lo storico completo, rileva le regressioni e traduce ogni metrica degradata in azioni concrete lato PrestaShop.

Prerequisito: la chiave API Chrome UX Report

Il modulo necessita di una chiave API Google per interrogare CrUX. È gratuita e si ottiene in quattro passaggi:

1. Aprite la Google Cloud Console e create un progetto (oppure selezionatene uno esistente).
2. In API e servizi > Libreria, cercate Chrome UX Report API e fate clic su Abilita.
3. In API e servizi > Credenziali, fate clic su Crea credenziali e poi su Chiave API.
4. Copiate la chiave generata (inizia con AIzaSy) e incollatela nella configurazione del modulo.

Installazione

1. Nel back-office, aprite Moduli > Gestore moduli.
2. Fate clic su Carica un modulo e trascinate il file dfcoreweb.zip.
3. Fate clic su Configura al termine dell’installazione.

L’installazione crea tre tabelle (URL monitorate, snapshot storici, registro delle raccomandazioni nascoste) e aggiunge un menu DataFirefly Core Web Vitals sotto Migliora, con quattro schede: Dashboard, Configurazione, Storico e Raccomandazioni.

Configurazione

Chiave API

Incollate la vostra chiave Chrome UX Report nel campo previsto e salvate. Finché questo campo resta vuoto, la dashboard mostra un avviso e nessuna sincronizzazione è possibile.

Tipi di dispositivo monitorati

CrUX pubblica le proprie metriche separatamente per tipo di dispositivo. Tre caselle permettono di scegliere quelli che seguite:

• Mobile — attivo per impostazione predefinita, è il tipo utilizzato da Google per la valutazione dell’esperienza sulla pagina.
• Desktop — attivo per impostazione predefinita, utile se il vostro traffico desktop è significativo.
• Tablet — disattivo per impostazione predefinita, CrUX dispone raramente di dati sufficienti su questo segmento.

Ogni tipo aggiuntivo moltiplica il numero di chiamate quotidiane, senza alcun rischio di superare la quota viste le dimensioni in gioco.

URL monitorate

Per impostazione predefinita il modulo sceglie da sé una URL rappresentativa per ogni tipo di pagina: la home page, la categoria con più prodotti, il prodotto più venduto, la pagina carrello e la prima pagina CMS attiva. Interroga inoltre l’origine, ovvero l’aggregazione dell’intero dominio.

Tre campi permettono di riprendere il controllo inserendo identificativi separati da virgole:

• ID prodotti — per monitorare una scheda precisa anziché il best-seller corrente.
• ID categorie — per monitorare una categoria strategica.
• ID pagine CMS — per monitorare una landing page o una pagina di contenuto ad alto traffico.

Conservazione dei dati

Il campo Periodo di conservazione (365 giorni per impostazione predefinita) definisce l’età oltre la quale gli snapshot vengono eliminati. La pulizia viene eseguita a ogni sincronizzazione e un pulsante della dashboard permette di avviarla manualmente.

Avvisi di regressione

• Notifica in caso di regressione — attiva l’invio delle e-mail.
• Indirizzo e-mail — destinatario degli avvisi; lasciate vuoto per usare l’indirizzo del negozio.
• Soglia di regressione — percentuale di degrado che fa scattare l’avviso, 15 % per impostazione predefinita.

Dopo ogni sincronizzazione, il nuovo valore di ciascuna metrica viene confrontato con la media degli ultimi sette giorni. Se lo scarto supera la soglia, viene inviata una e-mail in HTML e testo con il dettaglio del delta e un link diretto alla dashboard.

Sincronizzazione automatica

La pagina di configurazione mostra una URL di sincronizzazione protetta da un token derivato dalla chiave di sicurezza del vostro negozio. Chiamatela una volta al giorno dal vostro pianificatore di attività:

0 6 * * * curl -s "https://vostro-negozio.it/index.php?fc=module&module=dfcoreweb&controller=cron&token=VOSTRO_TOKEN" > /dev/null

Su Windows usate l’Utilità di pianificazione; su hosting condiviso vanno bene anche il modulo Crontab Manager di PrestaShop o il pianificatore del vostro pannello di hosting.

Il pulsante Avvia una sincronizzazione della dashboard consente di lanciare immediatamente una raccolta, utile per validare la configurazione subito dopo l’installazione.

Leggere la dashboard

La dashboard mostra un riquadro per tipo di pagina, con l’ultimo valore noto di ogni metrica e un codice colore che riprende le soglie ufficiali di Google:

• LCP (Largest Contentful Paint) — buono fino a 2,5 s, da migliorare fino a 4 s, scarso oltre.
• INP (Interaction to Next Paint) — buono fino a 200 ms, da migliorare fino a 500 ms, scarso oltre.
• CLS (Cumulative Layout Shift) — buono fino a 0,1, da migliorare fino a 0,25, scarso oltre.
• FCP (First Contentful Paint) — buono fino a 1,8 s, da migliorare fino a 3 s.
• TTFB (Time To First Byte) — buono fino a 0,8 s, da migliorare fino a 1,8 s.

Tutti i valori sono espressi al 75° percentile: rappresentano l’esperienza del 25 % di visitatori serviti peggio, conformemente alla metodologia di Google. Un negozio è considerato «promosso» quando LCP, INP e CLS sono contemporaneamente in verde.

Storico

La scheda Storico sovrappone l’evoluzione di ogni metrica su 30, 90, 180 o 365 giorni, per un dato tipo di pagina e tipo di dispositivo. I grafici mostrano tratteggiate le soglie di Google, rendendo immediatamente leggibile il passaggio da una fascia all’altra. Una curva aggiuntiva segue la percentuale di visite classificate «buone» sulle tre metriche principali.

È la vista da consultare dopo una messa in produzione, una migrazione di tema o l’aggiunta di uno script di terze parti: un degrado dell’LCP appare generalmente nei giorni successivi, sfalsato dalla finestra mobile di 28 giorni.

Raccomandazioni

Ogni metrica fuori soglia genera una o più raccomandazioni collegate al tipo di pagina interessato, ordinate per gravità:

• Critica — metrica in zona rossa, impatto diretto su posizionamento e conversione.
• Avviso — metrica in zona arancione, margine di miglioramento significativo.
• Informazione — buona pratica applicabile anche in zona verde.

I consigli sono formulati nel vocabolario PrestaShop: formato e precaricamento dell’immagine di copertina su una scheda prodotto, dimensioni esplicite delle miniature nella griglia di categoria, numero di moduli agganciati agli hook di intestazione, compressione e cache server per il TTFB, differimento degli script di terze parti per l’INP. Ogni raccomandazione riporta una stima dell’impatto commerciale calibrata sullo studio Deloitte «Milliseconds Make Millions».

Il pulsante Nascondi rimuove una raccomandazione dall’elenco per 30 giorni, il tempo di affrontare l’argomento o di stabilire che non è prioritario.

Lo stato «dati insufficienti»

CrUX pubblica una metrica solo quando un numero sufficiente di visitatori Chrome ha caricato la URL nel periodo. Al di sotto di tale soglia l’API risponde che il record non esiste: il modulo registra allora uno stato «dati insufficienti», senza errore né interruzione della raccolta.

Se ciò riguarda la maggior parte delle vostre pagine, basatevi sulla riga Origine: l’aggregazione dell’intero dominio raggiunge la soglia molto più facilmente e resta rappresentativa dell’esperienza media del vostro negozio.

Privacy e archiviazione dei dati

Nessun dato dei clienti viene trasmesso a Google. Solo le URL pubbliche che avete scelto di monitorare vengono inviate all’API CrUX, e le metriche restituite sono già anonimizzate e aggregate da Google. Tutte le rilevazioni restano nel vostro database PrestaShop. La libreria dei grafici è integrata nel modulo: nessuna chiamata a un CDN esterno, nessuna telemetria, nessuno script di analytics lato visitatore.

Risoluzione dei problemi

• Errore di autenticazione durante la sincronizzazione — la chiave API manca, è stata copiata male, oppure l’API Chrome UX Report non è stata abilitata sul progetto Google Cloud. Verificate inoltre che alla chiave non siano applicate restrizioni per indirizzo IP o referrer HTTP.
• Tutte le righe in «dati insufficienti» — il traffico Chrome su queste URL è troppo basso. Monitorate l’origine e scegliete manualmente pagine ad alto traffico.
• La chiamata cron restituisce un errore di autorizzazione — il token della URL non corrisponde più. Dipende dal nome del negozio e dalla chiave di sicurezza dell’installazione: ricopiate la URL mostrata nella configurazione dopo ogni cambio di nome del negozio.
• Il menu non compare dopo l’installazione — svuotate la cache in Parametri avanzati > Prestazioni, poi verificate i permessi del vostro profilo dipendente sulle nuove schede.
• I grafici restano vuoti — servono almeno due sincronizzazioni in date diverse per tracciare una curva. Attendete 24 ore dopo la prima raccolta.

Disinstallazione

La disinstallazione elimina le tre tabelle del modulo, tutte le chiavi di configurazione e le schede del back-office. Lo storico delle misurazioni va perso definitivamente: esportate i dati prima se desiderate conservarli. Prima dell’operazione viene richiesta una conferma esplicita.