Core Web Vitals: come cambia la SEO da Maggio 2021

• Google Page Experience Update: manca poco!
• I Core Web Vitals
  • LCP – Largest Content Paint
  • FID – First Input Delay
  • CLS – Cumulative Layout Shift
• Come misurare le performance del tuo sito web

Google Page Experience Update: manca poco!

A maggio 2020 Google ha annunciato l’introduzione di una serie di metriche che valutano la user experience di un sito web e ritenute essenziali per una buona esperienza utente e un web più piacevole.
Tra questi web vitals, tre sono state definiti “core”, fondamentali, e sono legati alla velocità, al tempo di risposta e alla stabilità del layout di un sito web.

I Core Web Vitals

In attesa del Google Page Experience Update annunciato per Maggio 2021, vediamo quindi come migliorare quelli che saranno i nuovi fattori di Ranking SEO dei siti web: i Core Web Vitals.

I Core Web Vitals sono dei nuovi indicatori algoritmici che influenzeranno il ranking SEO.
Questi parametri standard misurano la qualità dell’esperienza di navigazione di un utente su un sito web.

• Largest contentful paint (LCP)
  segna il punto in cui è più probabilmente caricato il contenuto principale della pagina.
• First input delay (FID)
  misura la reattività della pagina quando gli utenti cercano di interagire per la prima volta.
• Cumulative layout shift (CLS)
  misura la stabilità visiva della pagina ed è a oggi la metrica più importante fra tutte.

Gli sviluppatori di Google hanno elencato i criteri presi in esame per la valutazione di un sito e le metriche utilizzate dall’algoritmo per capire come un utente percepisce l’usabilità di una pagina web.
Alcuni fattori di posizionamento indispensabili che Google richiede sono:

• ottimizzare per i dispositivi mobili
• minimizzare al massimo il caricamento delle pagine
• garantire la sicurezza con HTTPS
• strutturare adeguatamente gli annunci pubblicitari con gli interstitial (pagine pubblicitarie realizzate con JavaScript o Flash)

LCP – Largest Content Paint

Questa metrica è quella che viene misurata prima e che impatta maggiormente sul tempo di caricamento.

La metrica LCP indica il tempo di rendering dell’elemento più grande (Largest) visibile all’interno della schermo quando si carica il sito e misura la performance del caricamento.

Si suddivide in:

• FP – First Paint: misura quando il browser avvia per la prima volta il rendering di parti della pagina. Ciò include elementi vuoti senza alcun contenuto.
• FCP – First Contentful Paint: misura quando il contenuto, come testo o immagini, viene visualizzato per la prima volta dal browser.
  FCP = TTFB + Tempo di caricamento del contenuto + Tempo di rendering
  Il TTFB (Time To First Byte) è il tempo impiegato da un browser per ricevere il primo byte del contenuto della pagina web.
• LCP – Largest Contentful Paint: misura il momento in cui l’elemento dell’interfaccia utente più grande è stato visualizzato nella pagina.

Per questa metrica, il contenuto principale è l’oggetto più grande visibile nella finestra. Vengono quindi penalizzati contenuti invasivi come titoli molto grandi, immagini di apertura enormi, video, banner pubblicitari e pop-up.
Nei due esempi che seguono, le due immagini principali sono state individuate come l’elemento più grande:

Per fornire una buona esperienza all’utente, i siti web dovrebbero caricare il contenuto “above the fold” entro i primi 2,5 secondi e sono considerati lenti già sopra i 4 secondi.
Inoltre viene presa in considerazione la quantità di spazio che l’oggetto utilizza nella finestra dell’utente, non il tempo di download. Se gli elementi sono renderizzati sia sopra che sotto il limite della pagina, solo la parte visibile è considerata rilevante.
Lo stesso vale per gli elementi in scala: 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.

In 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à penalizzazioni importanti.

Le principali cause che possono rallentare LCP sono:

• Tempo di risposta del server lento
• Risorse CSS e Javascript che bloccano il rendering
• Tempi di caricamento delle risorse non ottimizzate
• Rendering lato cliente usando JavaScript

FID – First Input Delay

Questa metrica misura il tempo impiegato dal browser per iniziare a rispondere all’interazione dell’utente, come clic su collegamenti, pulsanti e tocchi. Altre interazioni come scorrimento o zoom non sono considerate in quanto azioni continue.

Per una buona esperienza, gli utenti dovrebbero essere in grado di interagire con la pagina entro 100 millisecondi.

Il TTI – Time to Interactive deriva dal LCP più FID ed è la metrica che misura il tempo da quando la pagina inizia a caricarsi fino a quando le sue principali sotto-risorse sono state caricate ed è in grado di rispondere in modo affidabile all’input dell’utente rapidamente.

Fonte: web.dev

I principali problemi di interattività su un sito web si verificano durante il caricamento della pagina perché il codice viene suddiviso in più caricamenti oppure viene caricato troppo JavaScript in anticipo. Di solito, le principali cause che rallentano il FID sono:

• Richieste molto lunghe
• Lunghi tempi di esecuzione di JavaScript
• Pesanti librerie Javascript
• Risorse JavaScript che bloccano il rendering

CLS – Cumulative Layout Shift

Questa metrica misura la quantità di contenuto che si sposta dopo il primo rendering.
Lo spostamento degli elementi visibili e i cambiamenti di layout che arrivano all’improvviso e si verificano durante l’intera durata della visita della pagina, possono causare uno shift dopo il caricamento dell’area del sito web dovuto al ridimensionamento, con un effetto piuttosto fastidioso.