Velocità del sito e Core Web Vitals: cosa conta per vendere

Perché la velocità si paga in vendite

In Francia «core web vitals» viene cercato 1000 volte al mese, «temps de chargement» (tempo di caricamento) 210 volte, «vitesse site internet» 170 volte. La domanda dietro queste ricerche è sempre la stessa: il mio sito perde clienti perché è lento?

Uno studio commissionato da Google a Deloitte nel 2020 («Milliseconds Make Millions», 37 marchi europei e americani, non sottoposto a revisione paritaria) ha osservato sui siti di commercio un aumento dell’8,4% delle conversioni e del 9,2% del valore medio dell’ordine per ogni decimo di secondo guadagnato su mobile. Prendi questi numeri per quello che sono: una correlazione misurata da un soggetto interessato. La direzione, invece, non è in discussione.

Il mobile è il terreno dove tutto si gioca: sui nostri siti che vendono, il 61% delle visite misurate avviene da telefono, spesso in 4G, con un pollice e poca pazienza.

I tre Core Web Vitals, in chiaro

Google misura tre segnali su visitatori reali (dati Chrome) e considera buona una pagina quando il 75° percentile dei suoi caricamenti supera la soglia.

1. 1
   LCP (Largest Contentful Paint): il tempo di visualizzazione dell’elemento visibile più grande, spesso la foto prodotto o il titolo. Soglia buona: 2,5 s.
2. 2
   INP (Interaction to Next Paint): il ritardo tra un gesto (toccare un pulsante, aprire un menu, scegliere una taglia) e la reazione sullo schermo. Soglia buona: 200 ms.
3. 3
   CLS (Cumulative Layout Shift): lo spostamento degli elementi durante il caricamento, quello che ti fa toccare il pulsante sbagliato. Soglia buona: 0,1 o meno.

Misurare senza sbagliare

Esistono due tipi di misurazione, e confonderli fa perdere tempo.

• I dati sul campo: ciò che vivono i tuoi visitatori reali, su 28 giorni. Compaiono nel rapporto «Segnali web essenziali» di Google Search Console e in cima a PageSpeed Insights quando il sito ha abbastanza traffico. Sono quelli che usa Google.
• I dati di laboratorio: un test simulato, nel momento in cui lo lanci (il punteggio su 100 di PageSpeed Insights, Lighthouse). Utile per trovare le cause, fuorviante per giudicare: un 60 in laboratorio può nascondere dati sul campo in verde, e viceversa.
• Testa da una rete e un dispositivo realistici: uno smartphone di fascia media in 4G, non il computer dell’ufficio in fibra.
• Misura le pagine che vendono (scheda prodotto, pagina servizio, pagamento), non solo la home.

Da correggere per prime: le immagini

In un negozio online la foto prodotto è quasi sempre l’elemento dell’LCP, e spesso il più pesante della pagina. Il formato WebP fa risparmiare senza perdita visibile: secondo Google, un’immagine WebP con perdita è dal 25 al 34% più leggera di un JPEG di qualità paragonabile, e un’immagine WebP senza perdita il 26% più leggera di un PNG.

1. 1
   Il formato giusto: WebP (o AVIF) per le foto, SVG per loghi e icone.
2. 2
   La dimensione giusta: un’immagine mostrata a 600 pixel di larghezza non deve misurarne 4.000. Servi più dimensioni con srcset e lascia scegliere al browser.
3. 3
   Le dimensioni dichiarate: width e height su ogni immagine, perché la pagina riservi lo spazio e non si sposti (CLS).
4. 4
   Il caricamento differito per le immagini sotto la piega (loading=«lazy»), mai per l’immagine principale in alto, che deve invece avere la priorità (fetchpriority=«high»).

Poi: script ed estensioni

Dopo le immagini, a rallentare sono gli script di terze parti: widget di chat, pop-up, caroselli, pixel pubblicitari, estensioni del tema accumulate negli anni. Ognuno aggiunge codice da scaricare ed eseguire, e peggiora soprattutto l’INP.

1. 1
   Fare l’inventario: elenca ogni script di terze parti e cosa porta. Uno strumento che nessuno consulta si toglie.
2. 2
   Differire: carica dopo la visualizzazione tutto ciò che non serve all’acquisto (chat, video, widget di recensioni).
3. 3
   Alleggerire il tema: un tema che carica uno slider, tre font e una libreria di animazioni su ogni pagina pesa su tutto il sito.
4. 4
   Font: al massimo due famiglie, in formato WOFF2, con font-display: swap.
5. 5
   Cache e CDN: file statici in cache a lungo, serviti da una rete vicina al visitatore.

Il percorso d’acquisto, dove ogni secondo costa

La velocità della home si misura ovunque; quella del percorso d’acquisto viene spesso dimenticata. Eppure è lì che aspetta l’acquirente deciso: aggiunta al carrello, apertura del carrello, pagina di pagamento. Un pulsante che impiega un secondo a reagire fa nascere un dubbio, e un acquirente che dubita tocca due volte o se ne va.

Tre riflessi. Il pulsante d’acquisto reagisce subito, anche se l’elaborazione richiede un po’ di tempo (uno stato «in corso» visibile). Il pagamento passa da una pagina ospitata dal fornitore di pagamento, veloce e già nota agli acquirenti, invece che da un modulo fatto in casa carico di script. E nulla si mette in mezzo: nessun pop-up di iscrizione alla newsletter tra carrello e pagamento.

Il piano in una settimana

1. 1
   Giorno 1: leggi il rapporto Segnali web essenziali di Google Search Console, prima il mobile, ed elenca i gruppi di URL in arancione o in rosso.
2. 2
   Giorno 2: passa tre pagine tipo (home, scheda o servizio, pagamento) in PageSpeed Insights e annota l’elemento LCP di ciascuna.
3. 3
   Giorno 3: converti e ridimensiona le immagini di questi template, dichiarane le dimensioni.
4. 4
   Giorno 4: togli o differisci gli script di terze parti inutili.
5. 5
   Giorno 5: ritesta in laboratorio, poi aspetta che i dati sul campo si aggiornino (coprono 28 giorni) prima di giudicare.