Core Web Vitals: come utilizzare DevTools per migliorare il tuo sito

Che cosa sono i Core Web Vitals

I Core web vitals, segnali web essenziali, sono un set di metriche di riferimento utili ad identificare le sfide più comuni che si trovano sul web.

Procediamo con ordine. 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 implica anche che la User Experience (UX) sia 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.

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.

Chrome DevTools: che cos’è e a cosa serve

Chrome DevTools  è un insieme di strumenti integrati nel browser google chrome importanti per il debugging. Per debug si intende la ricerca e la correzione degli errori all’interno di un programma.

Il set di funzionalità, progettato per supportare gli sviluppatori web, è ad oggi disponibile gratuitamente.

Consente di:

• creare migliori siti web grazie ai tools che danno completo accesso ai processi interni di Chrome;
• avere il pieno controllo delle applicazioni Web;
• migliorare i Core Web Vitals;
• creare e misurare i dati utilizzando i dispositivi quotidiani;
• identificare e analizzare i problemi riscontrati;
• velocizzare il lavoro di risoluzione.

Grazie al suo utilizzo è possibile in modo semplice e tempi brevi, individuare eventuali problemi all’interno delle pagine web e risolverli.Il set di strumenti a disposizione è infatti in grado di influenzare i parametri di qualità di una pagina e consentire prove e modifiche.

È inoltre possibile:

• visualizzare il tempo di reattività a pagina del pannello Performance, nel momento in cui si stanno misurando le prestazioni della pagina web;
• ottenere numerose informazioni utili a migliorare l’esperienza dell’utente;
• ottimizzare il proprio sito e scoprire come viene visto da un determinato dispositivo simulando uno specifico device;
• valutarne la stabilità visiva.

Chrome DevTools: funzionamento passo per passo

Il primo passo è quello di utilizzare Lighthouse per fotografare la situazione ed ottenere una prima analisi del sito.

Tramite tale funzionalità è possibile:

• ottenere informazioni riguardanti performance, accessibilità, SEO;
• avere suggerimenti per apportare miglioramenti;
• scoprire come viene visualizzato il proprio sito web su un dispositivo diverso dal computer, ad esempio tablet o lo smartphone.
• ottenere una prima impressione dello status quo del nostro sito.

L’utilizzo di Lighthouse è molto semplice:

• aprire la pagina da analizzare;
• cliccare sulla scheda Chrome e su Ispeziona, per poi cercare la tab “Lighthouse” tra quelle presenti;
• ascoltare l’audit sintetico con le prestazioni della pagina, che serve come punto di partenza per le successive valutazioni.

Proseguendo con lo step numero due procediamo sul pannello Prestazioni dei DevTools che:

• mostra una serie di informazioni quando si carica una pagina e si avvia la registrazione del controllo di gestione;
• consente di ottenere insights molto utili;
• presenta una panoramica di tutte le attività nella scheda del browser e di tutte le richieste di rete;
• offre indicazione del momento in cui sono accadute e la sequenza temporale di Core  Web Vitals
• permette di approfondire il modo in cui le richieste di rete, l’esecuzione del codice JavaScript e i Core Web Vitals lavorano insieme.

Vantaggi ed ottimizzazione

Per svolgere un adeguato lavoro di ottimizzazione, è necessario:

• lavorare con il linguaggio di programmazione JavaScript, fondamentale per rendere interattive le pagine web;
• definire il Total Blocking Time (TBT) ovvero il tempo di interattività di una pagina web. Stiamo parlando del tempo che intercorre tra il caricamento e l’interazione con il contenuto o la risorsa di interesse. Questo aspetto è molto importante perché più è basso più l’esperienza per l’utente è migliore.;
• effettuare il cumulative layout shift (CLS): analisi che permette di valutare la stabilità visiva della pagina web. Permette all’utente che visita il sito abbia una buona esperienza durante la fruizione dei contenuti;
• migliorare la performance del sito ed ottenere numerose informazioni utili a migliorare l’esperienza dell’utente;
• ottimizzare il proprio sito e scoprire come viene visto da un determinato dispositivo.

Come abbiamo visto insieme grazie a Chrome DevTools è possibile:

• identificare i problemi in modo semplice e man mano che si presentano;
• fare il debug direttamente durante lo sviluppo;
• evitare di intervenire dopo che qualcosa si è rotto e cercare un rimedio.

Ora non resta altro se non provarlo personalmente e valutare come funziona per il proprio business!