Cosa sono i Core Web Vitals
I Core Web Vitals sono dei parametri centrali individuati da Google per definire, dal punto di vista dell’user experience, la qualità di una pagina pubblicata su internet. Rappresentano il tentativo di Mountain View di andare oltre il concetto di tempo necessario per caricare un documento web.
L’elenco dei consigli tecnici per migliorare i Core web Vitals
Gli interventi su Largest Contentful Paint (LCP)
Largest Contentful Paint è una metrica che rappresenta la velocità con cui il contenuto principale di una pagina web viene caricato e risulta pronto per un’interazione da parte dell’utente.
Per controllare se il nostro sito rispetta i parametri essenziali di caricamento e usabilità apprezzati da Google avete alcune possibilità:
- Google Search Console
- Page Speed Insights
- Lighthouse, un'estensione di Google Chrome
Gli interventi su Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) è una metrica di Google che misura la stabilità visiva attraverso l’analisi di un evento dell’esperienza utente, ovvero lo spostamento imprevisto degli elementi della pagina Web mentre la stessa è ancora in fase di caricamento.
Al contrario di Largest Contentful Paint la sua unità di misura di riferimento non è il tempo, ma lo spazio e per questo Google ha creato un punteggio specifico per identificare il livello delle variazioni di layout nel corso del caricamento della pagina che possono compromettere la user experience.
| Le cause del Cumulative Layout Shift
Secondo i Googler ci sono cinque motivi per cui si verifica una variazione cumulativa del layout:
- Immagini o video di dimensioni sconosciute o non impostate correttamente
- Annunci, embeds e iframe senza dimensioni
- Web font che causano FOIT (Flash of Invisible Text) o FOUT (Flash of Unstyled Text)
- Animazioni e Azioni in attesa di una risposta di rete prima di aggiornare DOM
- Contenuto Dinamico
Per calcolare il punteggio di variazione del layout, il browser esamina la dimensione della finestra e il movimento di elementi instabili nella finestra tra due frame renderizzati.
Gli interventi su First Input Delay (FID)
Ovviamente, l’ultima serie di raccomandazioni riguarda il First Input Delay (FID) o in italiano ritardo prima interazione è una metrica incentrata sull’utente che misura la reattività del caricamento e quantifica l’esperienza che gli utenti provano quando tentano di interagire con pagine che non rispondono.
Come spiegano la guida di Google, FID misura il tempo trascorso tra la prima interazione di un utente con una pagina (clic su un link, tocco di un pulsante, uso di un controllo personalizzato basato su JavaScript) e il momento in cui il browser risponde effettivamente all’interazione.
Un FID basso significa che la pagina è più facilmente utilizzabile e maggiore è il ritardo, peggiore sarà l’esperienza dell’utente.
Consigli sulla reattività
| Evitare o interrompere compiti lunghi
Quando le attività diventano attività lunghe, ovvero 50 millisecondi o più, impediscono al thread principale di rispondere rapidamente agli input dell’utente.
Il principio da rispettare è sforzarci di fare il minor lavoro possibile in JavaScript.
Un’altra opzione è prendere in considerazione l’utilizzo di API come isInputPending e Scheduler API.
| Evitare JavaScript non necessario
Un ricorso massivo a JavaScript però crea un ambiente in cui le attività competono per l’attenzione del thread principale, e ciò può sicuramente influire sulla reattività del sito Web, specialmente durante quel cruciale periodo di avvio.
| Evitare aggiornamenti di rendering di grandi dimensioni
Oltre al fatto che il rendering può essere un tipo di lavoro costoso a sé stante, gli aggiornamenti di rendering di grandi dimensioni, possono interferire con la capacità del sito Web di rispondere agli input dell’utente.