Ottimizzazione dei Core Web Vitals

I Core Web Vitals sono parametri centrali che vengono estrapolati da Google per definire e misurare comportamenti e user experience degli utenti quando visualizzano e navigano sulle pagine di un sito web, in modo da garantirne performance e qualità.

Ormai è certo che una delle caratteristiche imprescendibili per un sito web è che deve essere veloce, ma per soddisfare a pieno un utente web la velocità non basta.
Ecco i parametri fondamentali per Google:

• tempo di risposta del server alla prima attività dell’utente
• visual stability degli elementi della pagina
• contenuto di qualità definito nella maniera più completa possibile

Questi principi sono diventati tutti elementi di ranking.

Quindi, quali sono i Core Web Vitals?

Core Web Vitals

1. LCP: Largest Contentful Paint – (loading)
2. FID: First Input Delay – (interactivity)
3. CLS: Cumlative Layout Shift – (visual stability)

Largest Contentful Paint (LCP)

Il primo punto principale a cui fare riferimento quando si parla di Core Web Vitals è certamente il Largest Contentful Paint, che tradotto sta a significare “Caricamento Elemento Principale” della pagina web.

Il valore del LCP misura il tempo e la performance di upload dell’elemento con più pixel all’interno della pagina analizzata.
È importante che il primo approccio dell’untente con il sito web e le sue pagine interne sia veloce, senza attese superflue e che i suoi contenuti spieghino in modo rapido in che modo e se possono risultargli utili.
Per fare in modo di garantire all’utente una buona navigazione e permanenza sul proprio sito web, i contenuti all’interno della prima schermata, i cosiddetti “above the fold” (la parte della pagina che viene visualizzata prima di fare scrolling), dovrebbero caricarsi entro i primi 2/2,5 secondi.
In caso contrario, i contenuti vengono automaticamente considerati lenti.

Il largest contentful paint considera la quantità di spazio che viene usata dall’oggetto nella pagina visitata dall’utente mentre il tempo di download non viene misurato.
E’ bene ricordare che, tra gli elementi esaminati, sono considerati rilevanti solo quelli renderizzati sopra al limite della pagina e non quelli sotto.

Ad esempio, un’icona di 800×800 pixel se ridotta a 50×50 pixel conta solo per 50 pixel.
Se si ingrandiscono le immagini, è rilevante solo la dimensione dell’immagine originale.
Pertanto, come regola generale, è importante non inserire “above the fold” video o immagini superiori a 250 pixel di larghezza. Immagini di 300 pixel o banner pubblicitari di 336×280 o 300×250 comportano già penalizzazione importante.

Cosa può causare, quindi, una performance scarsa in termini di LCP?

• immagini non ottimizzate
• un linguaggio HRML, CSS, Javascript e contenuti video aggiunti senza prestare attenzione
• un server di bassa qualità (lento)

First Input Delay (FID)

Il First Input Delay è il ritardo che viene registrato tra la prima interazione dell’utente nella pagina del sito e il momento esatto in cui il browser reagisce rispondendo a quell’interazione.

Il ritardo segnalato non deve superare i 100 millisecondi: se il tempo di reazione dovesse essere maggiore l’utente sarebbe portato a pensare automaticamente che all’interno del sito navigato ci sia un’anomalia oppure degli errori.

Un tempo di risposta lento è spesso causato dal fatto che il browser, mentre si esegue l’interazione che fa partire la misurazione, sta eseguendo altre attività.
Per evitare qualsiasi feedback negativo, bisogna considerare quali sono le cause di questi ritardi:

• codice JavaScript complesso che impegna troppo il browser
• librerie JavaScript troppo pesanti
• rendering della pagina bloccato da script JavaScript

Google tende a misurare il FID come il primo input importante su qualsiasi pagina web: il ritardo della prima interazione dell’utente rispecchia la qualità e l’affidabilità di un sito web.
Nel caso il ritardo di risposta del browser sia maggiore o uguale a 300 millisecondi, iniziano a sorgere problemi consistenti e si incorre in importanti penalizzazioni.

Cumlative Layout Shift (CLS)

La stabilità visiva del caricamento (CLS), è l’ultimo dei parametri che compongono il Core Web Vitals di Google e serve a misurare gli eventuali spostamenti degli elementi visibili della pagina e i cambiamenti di layout che avvengono durante o dopo il caricamento di una pagina web.
Questi spostamenti di solito provocano un fastidioso effetto di scorrimento (shift) dovuto al ridimensionamento dell’area visualizzata.

Il CLS prevede un calcolo abbastanza complicato e per misurarlo è necessario prendere in considerazione due elementi, moltiplicando la componente distanza per la componente impatto.

• la componente distanza è la distanza più grande che un elemento “mutevole” occupa nell’area durante lo spostamento, diviso per la dimensione maggiore della finestra (viene sempre calcolata in percentuale)
• la componente d’impatto, invece, misura quanto spazio viene occupato inizialmente da un oggetto nella finestra e lo spazio utilizzato dopo il suo spostamento

Se il risultato del CLS è inferiore a 0,1 allora la user experience è ottima, nel caso in cui dovesse risultare superiore o uguale a 0,25 allora un intervento di ottimizzazione immediato sarebbe necessario.

Ecco i problemi che causano una scarsa visual stability del sito web:

1. inserimento immagini senza dimensioni
2. Web Fonts caricati in modo scorretto
3. Contenuti dinamici immessi nella pagina del sito
4. Ads o IFrame senza dimensioni

Se si vogliono ottimizzare le performance di un sito web per migliorarne il posizionamento, è indispensabile che vengano ottimizzati al massimo i parametri dei Core Web Vitals, in modo da migliorare le performance della piattaforma e garantire un’ottima User Experience.

Noi di Digiposition possiamo ottimizzare con successo i Core Web Vitals di qualsiasi piattaforma, in special modo WordPress.

Se hai domande o se vuoi informazioni sulle ottimizzazioni Core Web Vitals, compila il form con i tuoi dati e ti risponderemo al più presto, senza inviare spam o posta indesiderata.