Core Web Vitals PrestaShop: monitoraggio CrUX e diagnostica per modulo (dfcoreweb)

DataFirefly Core Web Vitals porta nel back office le misurazioni di performance realmente vissute dai tuoi visitatori Chrome (report CrUX di Google), separatamente per ogni tipo di pagina: home page, categoria, scheda prodotto, carrello, pagina CMS e dominio intero. Conserva lo storico, avvisa via e-mail quando una metrica peggiora, confronta il tuo negozio con i concorrenti e spiega, con una diagnostica PageSpeed Insights, quale modulo, file del tema o servizio di terze parti rallenta una pagina.

Prerequisito: la chiave API Google

Il modulo usa due API gratuite di Google con la stessa chiave: Chrome UX Report (misurazioni reali) e PageSpeed Insights (scheda Diagnostica).

1. Apri la Google Cloud Console e crea un progetto, oppure scegline uno esistente.
2. In API e servizi > Libreria, attiva Chrome UX Report API.
3. Sempre nella libreria, attiva PageSpeed Insights API.
4. In API e servizi > Credenziali, fai clic su Crea credenziali > Chiave API e copia la chiave (inizia con AIzaSy).

Installazione e aggiornamento

1. Apri Moduli > Gestione moduli e fai clic su Carica un modulo.
2. Trascina il file dfcoreweb.zip.
3. Fai clic su Configura: arrivi sulla dashboard del modulo.

L’installazione crea 5 tabelle e un menu Core Web Vitals sotto Migliora, con 5 pagine: Dashboard, Raccomandazioni, Storico, Diagnostica e Configurazione.

Aggiornamento dalla versione 1.0.0

Installa il nuovo ZIP sopra il vecchio, senza disinstallare. L’aggiornamento riorganizza il menu, corregge le misurazioni registrate dalla 1.0.0 (le metriche mancanti venivano salvate a 0), aggiunge le nuove tabelle ed elimina i vecchi file.

Configurazione

Chiave API

Incolla la chiave e fai clic su Salva e verifica. Il modulo interroga CrUX per il dominio del negozio e mostra uno di questi risultati:

• Chiave valida: CrUX restituisce dati: è tutto pronto.
• Chiave valida, CrUX non ha ancora abbastanza traffico Chrome per il dominio: la chiave funziona, alcune pagine molto visitate possono comunque restituire misurazioni e la Diagnostica resta disponibile.
• Google ha rifiutato la chiave API: verifica la chiave e che Chrome UX Report API sia attiva nel progetto.
• Il server del negozio non riesce a raggiungere i server di Google: vedi la risoluzione dei problemi in fondo alla pagina.

Dispositivi monitorati

• Mobile: attivo di default, è quello che Google usa per valutare l’esperienza sulla pagina.
• Computer: attivo di default.
• Tablet: disattivato di default, CrUX ha raramente dati sufficienti su questo segmento.

Almeno un dispositivo resta sempre attivo: se deselezioni tutto, Mobile viene riattivato.

Pagine misurate

Home page, carrello e dominio intero sono sempre misurati. Per gli altri tipi, lascia il campo vuoto per la selezione automatica oppure inserisci ID separati da virgole:

• ID prodotti: vuoto = i 3 prodotti più venduti degli ultimi 90 giorni (ordini convalidati del negozio), in mancanza i 3 prodotti più recenti.
• ID categorie: vuoto = le 3 categorie che contengono più prodotti attivi, escluse la categoria radice e la home.
• ID pagine CMS: vuoto = nessuna pagina CMS misurata.

Concorrenti

Inserisci fino a 5 domini, uno per riga (concorrente.it o https://www.concorrente.com). Poiché le misurazioni CrUX sono pubbliche, il modulo misura il dominio intero di ogni concorrente senza installare nulla da loro. I concorrenti non rientrano né negli avvisi né nelle raccomandazioni.

Sincronizzazione automatica

• Consenti l’URL di sincronizzazione: attiva l’attività pianificata descritta più avanti.
• Importa lo storico settimanale CrUX: recupera fino a 40 settimane di misurazioni passate per ogni pagina, poi le aggiorna una volta a settimana.
• Analisi di laboratorio automatica: l’attività pianificata analizza una pagina al giorno con PageSpeed Insights (mobile), quindi ogni pagina viene controllata circa una volta a settimana.
• Conservazione dello storico: 365 giorni di default, da 30 a 3650. Misurazioni, analisi ed eventi più vecchi vengono eliminati a ogni sincronizzazione.

Avvisi di regressione

• Invia un’e-mail quando una metrica peggiora: attiva gli avvisi.
• Destinatario: vuoto = indirizzo e-mail del negozio.
• Soglia di peggioramento: 15% di default, da 5 a 100%.

A ogni sincronizzazione, LCP, INP, CLS e TTFB di ogni pagina e dispositivo vengono confrontati con la loro media dei 7 giorni precedenti (almeno 3 misurazioni). Un avviso parte quando l’aumento supera la soglia e il valore non è più nella zona verde di Google. Tutte le regressioni di una sincronizzazione stanno in un’unica e-mail, e la stessa pagina non genera un avviso per la stessa metrica prima di 7 giorni. Il pulsante Invia un’e-mail di prova verifica l’indirizzo e la configurazione e-mail del negozio.

Dashboard di PrestaShop

L’opzione Mostra un riepilogo mobile aggiunge alla home page del back office un blocco con LCP, INP e CLS mobile per tipo di pagina e il relativo stato.

L’attività pianificata

La scheda Configurazione mostra l’URL da chiamare una volta al giorno e una riga crontab pronta da copiare:

17 6 * * * curl -fsS "https://tuo-negozio.it/module/dfcoreweb/cron?token=TUO_TOKEN" > /dev/null

Su un hosting condiviso, usa il pianificatore del tuo pannello di amministrazione o un servizio come cron-job.org. Ogni chiamata:

1. aggiorna l’elenco delle pagine monitorate (prodotti più venduti, categorie);
2. interroga CrUX per ogni pagina, dispositivo e concorrente;
3. invia l’e-mail di avviso se necessario;
4. importa lo storico settimanale quando è previsto;
5. avvia l’analisi di laboratorio del giorno;
6. elimina i dati più vecchi della durata di conservazione.

L’URL risponde in JSON con un codice 200 quando tutto è andato bene e 502 in caso di errore, così il tuo servizio cron può avvisarti. Un token errato riceve un codice 403. L’attività funziona anche con il negozio in manutenzione e non si avvia due volte contemporaneamente per lo stesso negozio (blocco di 15 minuti).

La dashboard ti avvisa se l’attività non è mai stata chiamata o se non c’è stata alcuna sincronizzazione da più di 3 giorni. Il pulsante Sincronizza ora avvia una raccolta immediata, utile subito dopo l’installazione.

La dashboard

Un riquadro per tipo di pagina mostra, per ogni dispositivo, le cinque metriche al 75° percentile su 28 giorni mobili, con i colori delle soglie di Google:

• LCP (visualizzazione del contenuto principale): buono fino a 2,5 s, scarso oltre 4 s.
• INP (reattività alle interazioni): buono fino a 200 ms, scarso oltre 500 ms.
• CLS (stabilità visiva): buono fino a 0,1, scarso oltre 0,25.
• FCP (prima visualizzazione): buono fino a 1,8 s, scarso oltre 3 s.
• TTFB (tempo di risposta del server): buono fino a 0,8 s, scarso oltre 1,8 s.

Il badge Superato o Non superato segue la regola di Google: LCP, INP e CLS nella zona verde (l’INP viene ignorato quando CrUX non lo pubblica, cosa frequente sul carrello). Sotto ogni valore, una freccia indica l’andamento rispetto a 4 settimane fa: rossa quando la metrica peggiora, verde quando migliora. Quando un tipo di pagina raggruppa più URL, il riquadro mostra la loro media.

Più in basso, il Confronto con i tuoi concorrenti classifica il tuo dominio e quelli dei concorrenti per LCP, per ogni dispositivo. La tabella URL monitorati dettaglia ogni pagina con le sue misurazioni, l’ultimo punteggio PageSpeed (colonna Lab) e due scorciatoie: il suo storico e la sua diagnostica.

Raccomandazioni

Ogni metrica fuori dalla zona verde genera una raccomandazione. Le raccomandazioni con la stessa causa sono raggruppate in un’unica scheda, che elenca le pagine interessate con il loro valore (ad esempio il TTFB su home page, categorie e schede prodotto). Ogni scheda indica:

• la gravità: Critica (zona rossa), Da correggere (zona arancione) o Consiglio;
• la causa probabile su quel tipo di pagina PrestaShop e i passaggi per correggerla;
• un ordine di grandezza dell’impatto, tratto da studi pubblici, presentato come stima;
• i link alle schermate interessate (Prestazioni, Impostazioni immagini, Posizioni dei moduli, Regole carrello) e alla Diagnostica.

Ignora per 30 giorni nasconde la scheda per tutte le sue pagine. Ricompare se viene coinvolta una nuova pagina, e un link in cima alla pagina mostra le raccomandazioni ignorate per poterle ripristinare.

Storico

Scegli il tipo di pagina, l’URL (o la media di tutti gli URL del tipo), il dispositivo e il periodo (30, 90, 180 o 365 giorni). Compaiono sei grafici: LCP, INP, CLS, TTFB, FCP e la quota di URL che superano la valutazione, con le soglie di Google tratteggiate.

Prima della prima sincronizzazione, ogni punto corrisponde a una settimana importata dallo storico CrUX; dopo, un punto per sincronizzazione. Ogni punto copre i 28 giorni precedenti: un cambiamento impiega circa 4 settimane a comparire per intero.

Eventi

Le installazioni e disinstallazioni dei moduli vengono registrate automaticamente e compaiono tratteggiate sui grafici. Aggiungi i tuoi riferimenti con una data e una descrizione (aggiornamento del tema, cambio di hosting, campagna) per collegare una variazione alla sua causa. Passando il mouse su un punto vengono mostrati gli eventi vicini.

Il pulsante Esporta CSV scarica la selezione visualizzata, con l’origine di ogni punto (settimanale o giornaliero).

Diagnostica di una pagina

Scegli una pagina monitorata e il dispositivo (Mobile o Computer), poi fai clic su Avvia l’analisi. Google carica la pagina dai suoi server e il risultato arriva in 20-60 secondi. Resta salvato: cambiando pagina o dispositivo viene mostrata l’ultima analisi senza avviarne una nuova.

Punteggio e screenshot

Il punteggio di prestazioni (su 100), i valori LCP, TBT, CLS, FCP, Speed Index e TTFB, il peso totale, il numero di richieste e lo screenshot di ciò che Google ha visualizzato.

Elemento LCP

L’elemento che determina l’LCP (immagine, banner, titolo) con il suo codice HTML e la suddivisione del suo tempo in quattro fasi: risposta del server, attesa prima del download, download della risorsa e ritardo di rendering. Un consiglio corrisponde alla fase più lunga, ad esempio precaricare l’immagine quando viene scoperta tardi, oppure rimuovere loading="lazy" quando l’immagine LCP è caricata in differita.

Cosa appesantisce la pagina

Ogni file caricato viene attribuito alla sua origine in base al percorso:

• Modulo: file sotto /modules/nome_modulo/, mostrati con il nome del modulo;
• Tema: file sotto /themes/nome/;
• Negozio: file del core di PrestaShop, immagini del negozio e la pagina HTML con gli script scritti direttamente al suo interno;
• Terza parte: qualsiasi altro dominio, indicato per nome da Google quando lo riconosce (Google Tag Manager, Facebook, strumenti di chat…).

Per ogni origine: tempo CPU (esecuzione del JavaScript durante il caricamento, prima causa di un INP elevato), peso JS, CSS e altri file, JavaScript inutilizzato e numero di richieste. La tabella è ordinata per tempo CPU.

File bloccanti e problemi rilevati

L’elenco dei file che bloccano la visualizzazione, ciascuno con il suo modulo o la sua origine, e i problemi rilevati da Google (cache, formato delle immagini, JavaScript inutilizzato…), ordinati per guadagno stimato, con un’indicazione PrestaShop per ciascuno. I titoli di Google sono nella lingua del back office.

Analisi precedenti

La tabella delle ultime analisi della pagina (punteggio, LCP, TBT, CLS, peso, oppure l’errore riscontrato) permette di verificare l’effetto di una correzione.

Analisi automatica

Con l’opzione Analisi di laboratorio automatica, l’attività pianificata analizza ogni giorno la pagina la cui ultima analisi mobile è la più vecchia, se risale a più di 7 giorni prima. Per un negozio senza misurazioni CrUX per pagina, è l’unica misurazione che evolve nel tempo.

Lo stato “Traffico Chrome insufficiente”

CrUX pubblica una misurazione solo se un numero sufficiente di visitatori Chrome ha caricato l’URL in 28 giorni. Altrimenti il modulo registra questo stato senza errore e la sincronizzazione prosegue. In questo caso basati sul dominio intero, che raggiunge più facilmente la soglia, e sulla scheda Diagnostica per le pagine interessate.

Privacy

Solo gli URL pubblici monitorati, e i domini concorrenti che inserisci, vengono inviati a Google. Nessun dato dei clienti esce dal negozio. Tutte le misurazioni, le analisi e gli eventi restano nel tuo database PrestaShop; ogni analisi conserva un riepilogo e lo screenshot della pagina (circa 50 KB) per la stessa durata di conservazione. Chart.js è incorporato nel modulo: nessun CDN, nessuna telemetria.

Risoluzione dei problemi

• “Google ha rifiutato la chiave API”: chiave copiata male, Chrome UX Report API non attiva nel progetto, oppure restrizione per referrer HTTP sulla chiave.
• “L’API PageSpeed Insights non è attiva” (scheda Diagnostica): attiva PageSpeed Insights API nella libreria dello stesso progetto Google Cloud.
• “Il server del negozio non riesce a raggiungere i server di Google”: l’hosting blocca le connessioni in uscita. Chiedigli di consentire l’HTTPS in uscita verso googleapis.com. La sincronizzazione si interrompe dopo due errori invece di attendere su ogni pagina.
• “Quota superata”: la sincronizzazione riprenderà alla prossima esecuzione dell’attività. Per PageSpeed, riprova un minuto dopo.
• “È già in corso una sincronizzazione”: una sincronizzazione è già attiva per questo negozio; riprova tra qualche minuto.
• L’URL del cron risponde 403: il token non è più valido (nuovo token o aggiornamento dalla 1.0.0). Ricopia l’URL dalla scheda Configurazione.
• L’e-mail di prova non arriva: verifica l’indirizzo e Parametri avanzati > E-mail.
• La Diagnostica non mostra il dettaglio per modulo: disattiva il CCC per il tempo di un’analisi (vedi sopra).
• Il menu non compare: svuota la cache in Parametri avanzati > Prestazioni e verifica i permessi del profilo dipendente sulle schede del modulo.

Disinstallazione

La disinstallazione elimina le 5 tabelle del modulo, la sua configurazione e le sue schede dopo conferma. Lo storico va perso definitivamente: esportalo in CSV dalla scheda Storico se vuoi conservarlo.