Core Web Vitals per chi gestisce uno store Magento: quanto incide ogni metrica sulle vendite

Core Web Vitals è un nome poco efficace per un’idea valida. Le metriche misurano tre aspetti che l’utente percepisce direttamente: quanto tempo serve perché la pagina sembri pronta, quanto impiega a rispondere a un tocco e se si sposta sotto il dito. Google le riporta in millisecondi, l’unità meno adatta a ottenere budget per un progetto.

Ecco la traduzione: tre metriche, quanto costano e la causa tipica su Magento.

LCP: quanto manca prima che la pagina sembri pronta

Largest Contentful Paint misura quando l’elemento visibile più grande — di solito un’immagine hero o una foto prodotto — termina il rendering. La soglia di Google è 2,5 secondi per una buona esperienza, 4 secondi oltre i quali è valutata negativa.

In termini commerciali, LCP determina se un visitatore da una campagna a pagamento vede davvero il Suo prodotto. Chi clicca su un annuncio Shopping da mobile ha poca pazienza; un negozio che impiega quattro secondi a mostrare un’immagine prodotto paga click che non converte. Se investe in acquisizione, LCP è prima di tutto una metrica di efficienza media, non solo tecnica.

Le cause tipiche di Magento

• Tempo-to-first-byte lento. Cache di pagina non efficace, database sottodimensionato o configurazione Varnish non più allineata alla struttura URL. Nessun intervento sul front end può mascherare una risposta server lenta.
• Immagini di catalogo non ottimizzate. Foto prodotto caricate in risoluzione da stampa e ridimensionate dal browser. L’elaborazione immagini di Magento aiuta, ma non risolve un file sorgente da 4MB.
• CSS e JavaScript che bloccano il rendering. Il bundle predefinito di Luma blocca il primo paint; lo stesso vale per quasi tutti gli script di terze parti inseriti nell’head.
• Web font senza font-display: swap. Il testo è pronto, ma invisibile, in attesa del file font.

L’ordine conta. Ottimizzare le immagini mentre il server risponde in 1,8 secondi significa agire sulla superficie sbagliata. Misuri prima il tempo-to-first-byte; se supera i 600ms, quello è il progetto da affrontare.

INP: quanto manca prima che la pagina risponda

Interaction to Next Paint misura il ritardo tra il tocco dell’utente e la reazione visibile della pagina. Sotto i 200 millisecondi è buono; oltre i 500ms è valutato negativo e, per il cliente, il sito sembra non funzionare.

INP è la metrica che costa carrelli più che sessioni. È critica nei punti più sensibili: selezione varianti su prodotti configurabili, cambio quantità nel mini-carrello, filtri nelle categorie, scelta spedizione nel checkout. Se un utente tocca due volte una taglia perché non vede risposta, aggiunge una riga doppia al carrello o, più spesso, abbandona.

Le cause tipiche di Magento

• Knockout.js che ri-renderizza su Luma. Mini-carrello e checkout sono le aree Knockout più pesanti del tema, quindi le più lente a rispondere.
• Tag manager e script di personalizzazione di terze parti che eseguono task lunghi sul Main Thread mentre l’utente usa la pagina.
• Navigazione a livelli che ricarica l’intera pagina a ogni filtro invece di aggiornare in loco.
• Widget chat e recensioni che si inizializzano al caricamento invece che all’interazione.

CLS: se la pagina si sposta sotto il dito

Cumulative Layout Shift misura gli spostamenti imprevisti — contenuti che saltano quando immagini, banner o widget si caricano in ritardo. Il valore buono è sotto 0,1.

CLS ha due impatti: uno evidente e uno meno. Quello evidente sono i click sbagliati: l’utente tocca Aggiungi al carrello, un banner promozionale si carica sopra e il click va altrove. Quello meno visibile è la fiducia: una pagina che si muove durante il caricamento trasmette poca professionalità e, alla prima visita, danneggia il conversion rate.

Le cause tipiche di Magento

• Immagini senza attributi width e height, quindi il browser non può riservare spazio prima dell’arrivo del file.
• Blocchi CMS e banner promozionali inseriti above the fold dopo il primo paint.
• Banner cookie e consenso che spingono la pagina verso il basso invece di sovrapporsi.
• Widget di terze parti — recensioni, trust badge, chat — che si montano in contenitori senza altezza riservata. È quasi universale e quasi sempre risolvibile con poco.

CLS è la metrica più economica da correggere e la più spesso trascurata, perché non sembra un problema di prestazioni. Di solito bastano poche righe di CSS per riservare gli spazi che avrebbero dovuto esserci dall’inizio.

Come dare priorità quando tutte e tre falliscono

Le metriche non falliscono tutte allo stesso modo e non meritano la stessa attenzione. Il nostro ordine:

1. Prima CLS. Più economica da risolvere, verifica immediata, solo vantaggi — nessun compromesso.
2. Poi LCP, iniziando da tempo-to-first-byte e immagini. Qui si disperde il budget di acquisizione.
3. Infine INP, perché è la più complessa e spesso richiede di rimuovere elementi graditi agli stakeholder.

Segmenti per template prima di iniziare. La maggior parte dei negozi Magento che analizziamo presenta una homepage che supera i test e pagine categoria che li falliscono; il lavoro richiesto su ciascuna è diverso. Le medie a livello di sito nascondono il problema reale per cui si paga.

Come si presenta nella pratica

Quando abbiamo preso in carico il negozio Magento di Careshop, il problema segnalato era quello abituale — il sito risultava lento — e le cause erano distribuite su tutte e tre le metriche e sul server sottostante. La sequenza sopra non è teorica: è l’ordine che ha portato risultati senza dover ricostruire lo storefront.

Se il divario residuo dopo questi interventi resta ampio, la questione diventa di front-end. Abbiamo redatto un quadro con costi per scegliere tra Hyvä, una PWA o restare su Luma. Non inizi da lì. Si inizi dalla misurazione.

Definire un obiettivo realistico

Inseguire un punteggio perfetto su Lighthouse non è un buon impiego del budget tecnico. Il segnale di ranking di Google è una valutazione pass/fail al 75° percentile delle visite reali: serve che la maggioranza delle sessioni reali sia buona, sui template che contano. È un obiettivo raggiungibile su Magento senza ricostruire nulla.

L’obiettivo deve essere: template categoria e prodotto che superano tutte e tre le metriche nei dati di campo su mobile, mantenuto per una finestra di 28 giorni. È un target su cui il team tecnico può essere valutato e che la divisione finanziaria può comprendere. Un punteggio su 100 misurato da desktop non lo è.

Questo è il lavoro su cui si fondano i nostri interventi di ottimizzazione della velocità delle pagine e, per cataloghi retail, è spesso l’attività tecnica con il ritorno più alto nell’anno.

Scopra quanto le sta costando

Analizzeremo i dati di campo per template, individueremo quale delle tre metriche causa il problema e indicheremo cosa serve per risolverlo — considerando l’insieme delle estensioni, non ignorandolo. Contatti il nostro team; rispondiamo entro un giorno lavorativo.