Core Web Vitals: le best practices per rendere il sito performante
Da un po’ di anni a questa parte Google ha inserito le Core Web Vitals. Questi Segnali Web Essenziali sono metriche prestazionali che:
- misurano le risposte delle pagine alle interazioni degli utenti;
- utilizzano i dati sul campo;
- risolvono il problema delle esperienze negative su un sito web.
Analizziamole al meglio insieme!
Indice
Che cosa sono Core Web Vitals
Gli algoritmi di Google controllano i siti per offrire agli utenti i migliori risultati di ricerca in base alle loro richieste. Decidono quindi il posizionamento di ogni singola pagina web nella ricerca sui motori di ricerca. Ogni brand di certo punta a raggiungere la prima posizione.
Il Core Web Vitals è un progetto che dichiara la User Experience (UX) è un criterio determinante per il ranking dei siti web. Necessario quindi acquisire le basi di una buona user experience.
Affinchè un sito risulti essere ben indicizzato è necessario analizzare molti fattori. Lo scopo di Google è infatti quello di offrire la miglior esperienza possibile. Proprio per questo che l’UX ha un ruolo fondamentale nel ranking dei siti.
Ad oggi ben il 53% di persone che utilizzano smartphone lasciano una pagina se ci mette più di 3 secondi per caricarsi. Di conseguenza un sito, anche se presenta contenuti pertinenti, non sarà visitato se non è performante.
L’obiettivo dei brand è quindi migliorare la User Experience tramite:
- analisi comportamentale e test sugli utenti;
- prestazioni e tempo di caricamento;
- design;
- facilità d’uso;
- qualità dell’esperienza complessiva.
Che cos’ è la User Experience
Migliorare l’UX è fondamentale per incrementare conversioni revenue online.
Se un sito ha una navigazione difficile, anche se con delle ottime referenze, non riuscirò a convertire gli utenti.
L’UX è quindi un criterio decisivo per migliorare la SEO e conversioni. I nuovi criteri Core Web Vitals arriveranno ad inizio maggio. I brand che si stanno già aggiornando su processi di ottimizzazioe saranno i primi ad essere favoriti dagli algoritmi. La pertinenza del contenuto rimane comunque una priorità assoluta.
I quattro criteri attuali per la valutazione della User Experience sono:
- siti mobile friendly: i consumatori utilizzano sempre di più il cellulare per ottenere informazioni o acquistare online. Necessario adattarsi a questo dispositivo;
- navigazione sicura: Google garantisce che la sicurezza sia essenziale sui siti indicizzati;
- protocollo HTTPS: i siti che non sono ancora passati a HTTPS vengono penalizzati. Questo è un protocollo che garantisce la riservatezza dei dati;
- non avere pop-in invadente: l’accesso alle informazioni deve essere immediata.
Core Web Vitals : nuovi criteri per la valutazione
Nuovi criteri per la valutazione grazie ai Core Web Vitals sono in aggiunta da maggio 2023:
- caricamento delle pagine: la LPC (Largest Contentful Paint) è la velocità di caricamento di una pagina web. Ma non solo! Anche quella di visualizzare gli elementi principali (titolo, immagine, contenuto visibile all’utente) in modo veloce. Il consiglio di Google è di non superare i 2,5 secondi per il caricamento;
- interattività della pagina: il FID (First Input Delay) indica la reattività del caricamento di una pagina web;
- stabilità visiva: il CLS (Cumulative Layout Shift) misura la stabilità visiva di una pagina durante il caricamento. Lo scopo è quello di evitare ritardi degli elementi e dovrebbe essere inferiore a 0,1.
Per analizzare le prestazioni del proprio sito web è necessario inoltre utilizzare i seguenti strumenti:
- Web Vitals: estensione di Chrome che permette di visualizzare le prestazioni di LCP, FID e CLS;
- Lighthouse: audit automatizzato che individua i problemi sulla pagina;
- Page Speed Insights: sito che consente di analizzare la velocità di caricamento delle pagine;
- console di ricerca di Google: per identificare i gruppi di pagine che richiedono un’attenzione particolare;
- Chrome UX Report (CrUX): insieme di dati pubblici consente l’analisi in condizioni reali.
- Chrome DevTools: permette di rilevare modifiche impreviste al layout.
Altre possibilità di miglioramento
Migliorare è una sfida continua, che richiede la mobilitazione di più risorse: metodologia, specialisti e strumenti di ottimizzazione.
Altri tipi di miglioramenti possibili da attuare sono:
- ottimizzazione CTA e Menù: ovvero degli elementi che permettano loro di spostarsi da una pagina all’altra. Questo serve a rendere più fluida la navigazione e incoraggiare i visitatori a rimanere sul sito più a lungo;
- migliorie all’homepage: gli utenti devono poter raggiungere informazioni e prodotti cercati il più rapidamente possibile;
- ottimizzazione di schede prodotto: il percorso di navigazione deve essere fluido. Solo così l’utente arriverà ad aggiungere il prodotto al carrello. È possibile testare visualizzazione di prezzi, immagini, descrizioni e messa in evidenza di prodotti complementari;
- effettuare test e personalizzazioni: testare continuamente l’intero sito. Comportamenti e pubblico cambiano rapidamente.
Tecnicismi adottabili dagli sviluppatori
Affinchè gli sviluppatori possano migliorare le Core Web Vitals è necessario:
- decidere a cosa dare la priorità quando il tempo è limitato;
- considerare fattori tecnici, umani e organizzativi;
- raggiungere un reale impatto e quindi possibili e realistici;
- essere pertinenti ed applicabili alla maggior parte dei siti.
Innanzitutto è necessario implementare Largest Contentful Paint (LCP). Questa è una misura di prestazioni di carico. Bisogna quindi stimare il tempo necessario affinché il contenuto principale di una pagina diventi visibile agli utenti. Per farlo è necessario rendere la risorsa LCP rilevabile dall’origine HTML.
Le parti critiche dell’operazione sono:
- tempo necessario per caricare un’immagine;
- tempo prima che un’immagine inizi a caricarsi;
- attesa che i file CSS o JavaScript siano scaricati, analizzati ed elaborati.
Le soluzioni sono:
- garantire che la risorsa LCP sia rilevabile dall’origine HTML. Quest’operazione inoltre sblocca anche ulteriori opportunità per dare priorità alla risorsa;
- caricare l’immagine utilizzando un elemento IMG con l’attributo src o srcset. E quindi non utilizzando attributi non-standard;
- scegliere il rendering lato server (SSR) rispetto a quello client (CSR).
Acquisisci competenze spendibili nel mondo del lavoro
