Un aspetto che per l’e-commerce vale più di qualsiasi strategia dei prezzi, UX o processo di acquisto. Come risolvere i problemi con i Core Web Vitals ed un caso studio che mostra come Google escluda quasi totalmente dalle ricerche importanti i siti web non ottimizzati.

1. Core Web Vitals
Prezzi? UX? Processo di vendita?
Tutto inutile se il sito ha problemi con i Core Web Vitals!
Ivano Di Biasi – CEO di SEOZoom

2. Mi presento
Ivano Di Biasi
Mi occupo di SEO tecnica e dello
studio degli algoritmi di ranking
dei motori di ricerca dal 2007.
Circa sette anni fa ho realizzato
SEOZoom, la SEO Suite più
utilizzata per il mercato italiano.

3. Oggi vi parlo di Core Web Vitals
Un aspetto incredibilmente importante per i siti e-commerce
Come è giusto che sia, quando progettiamo un e-commerce ci concentriamo in maniera maniacale su questi
aspetti fondamentali per rendere la vita facile ai nostri utenti, farli fidare di noi e vendere di più

4. Tutto questo va bene
Ma sono aspetti applicabili solo agli utenti che riescono a visitare il sito
I Core Web Vitals, se non gestiti
adeguatamente, rappresentano una vera e
propria barriera in grado di limitare
drasticamente il numero di utenti che
possono raggiungere il vostro negozio
attraverso i motori di ricerca.
Se non arrivano gli utenti, tutti gli
accorgimenti mirati alla vendita diventano
praticamente inutili.

5. Un esempio
Un sito web che supera i Core Web Vitals solo con il 22% delle pagine
Google ha praticamente annullato la presenza nei risultati di ricerca per il 78% del sito ed il 22% ‘buono’
viene mostrato in posizioni di basso rilievo, magari in decima posizione, ottenendo pochissimo traffico.

6. Introduzione ai Core Web Vitals
L’argomento è complesso e richiederebbe ore di spiegazione
Con il tempo che ho a disposizione mi limiterò a mostrarvi quanto siano
importanti questi aspetti e cosa possiate aspettarvi se li migliorerete.

7. Cosa sono i Core Web Vitals
Sono parametri per misurare la qualità dell’esperienza di navigazione degli utenti su un sito web

8. Vediamo i parametri in dettaglio
Il Time To First Byte è una
metrica fondamentale e
misura la reattività del
server su cui è ospitato il
nostro sito web.
Senza girarci troppo
intorno, se il TTFB è alto,
bisogna passare ad un
server o hosting migliore

9. Vediamo i parametri in dettaglio
FCP ed LCP sono metriche importantissime per misurare la velocità di caricamento
percepita dagli utenti, ossia il tempo necessario affinché vedano qualcosa.

10. Vediamo i parametri in dettaglio
Il CLS misura la stabilità visiva della pagina
web e nello specifico quante volte l’utente
veda elementi della pagina spostarsi di
posizione e quindi avendo una cattiva
esperienza di navigazione.
Vi è mai capitato di cliccare pubblicità per
errore perché si spostano nella pagina?

11. Vediamo i parametri in dettaglio
Misura il ritardo che avviene quando un
utente interagisce con la pagina.
Un valore alto indica che la pagina non è
in grado di reagire rapidamente all’input
dell’utente
Misura il tempo di attesa dell’utente
prima che sia in grado di interagire con
la pagina web che sta visitando.
Un valore basso sarà indice di una
buona esperienza di navigazione.
Ci sono anche altri parametri ma sono fortemente dipendenti da quelli mostrati in quanto valutazioni
generali come lo Speed Index.

12. Quanto pesa ogni singolo parametro

13. Cosa influisce sui punteggi dei Core Web Vitals
● Server inadeguati
● Codice sorgente lento
● Database lento
● Nessuna strategia di Caching
● Uso eccessivo di JavaScript
● Utilizzo di troppi Font
● Modalità di caricamento dei Font
● Dipendenze da file CSS enormi
● Librerie JavaScript esterne
● Pubblicità
● Gestione errata delle immagini
Non mi è possibile entrare nel dettaglio di ogni aspetto ma provo a spiegare cosa accade quando un
utente inizia la navigazione verso una pagina web.

14. Cosa accade quando apriamo una pagina web
Browser DNS Server
CloudFlare
Script
Database Files
Servizi esterni
Generazione
HTML
HTML in
Cache
L’HTML della pagina deve essere
fornito al browser nel minor
tempo possibile perché solo
quando lo riceverà inizierà il suo
vero lavoro!
Se gli script sono lenti abbiamo
solo due strade. O li velocizziamo
o utilizziamo una cache

15. Il Browser ha ricevuto l’HTML, le istruzioni su cosa fare
Da questo istante inizierà a:
● Scaricare Fogli di stile
● Font
● Librerie JavaScript
● Immagini
● E fare chiamate AJAX per
recuperare altri dati
Solo quando avrà tutto quello
che serve inizierà a disegnare
la pagina finale ed è qui che si
commettono la maggior parte
degli errori!

16. Quello che dobbiamo fare è fargli avere subito quello che serve
1. Fargli avere subito i font utilizzati evitando di doverli attendere
2. Fornirgli gli stili necessari a disegnare la prima parte visibile della pagina senza dover scaricare
alcun file CSS
3. Evitare che il disegno della pagina venga fatto attraverso JavaScript che dovranno essere
scaricati, in tal caso il Browser dovrà attenderli.
4. Informare il browser che alcuni script non sono di vitale importanza per il rendering e quindi
non dovrà attenderli prima di disegnare (defer)
5. Connettersi preventivamente alle risorse che poi saranno scaricate in seguito (preconnect) , in
questo modo il processo sarà più rapido.
Tutte queste piccole attenzioni possono cambiare radicalmente le performance del sito e passare i
controlli dei Core Web Vitals.
Vi lascio un link per approfondire ogni singolo aspetto
https://web.dev/vitals/

17. Ricordate il sito delle prime slide?
Sono stati necessari svariati giorni di lavoro
per identificare tutti i problemi e risolverli.
E’ stato necessario lavorare su molti aspetti
del sito web con la speranza che
veramente fosse così importante farlo…
… Fortunatamente lo era!

18. Intervenendo sui Core Web Vitals
Dopo aver risolto tutti i problemi si è passati da 30.000 impression al giorno a
quasi un milione e mezzo!

19. In termini di visite si è passati da 80k a 150k al giorno

20. Se lo applichiamo al mondo e-commerce!
Potenziali clienti
30.000 VS 1.500.000
Al giorno!
Ora UX, Checkout e Prezzi possono
fare realmente la differenza!

21. Grazie