20 Gennaio 2022

Web Performance e Design

SEO e GEO

Core Web Vitals: migliorare la User Experience su siti web ed eCommerce

Indice dei contenuti

LCP – Largest Contentful Paint

FID – First Inpunt Delay

CLS – Cumulative Layout Shift

Dove trovare i Core Web Vitals?

Approfondimenti tecnici sui Core Web Vitals

Condividi su

Riassumi l'articolo con ChatGPT

Nel 2020 Google ha introdotto i cosiddetti Core Web Vitals, ossia fattori di ranking che assumeranno un valore crescente nel 2021. Queste metriche risulteranno essenziali per aumentare la qualità della User Experience su siti web ed eCommerce. Si tratta di 3 parametri specifici:

Loading (LCP – Largest Contentful Paint): cioè il tempo di caricamento del contenuto principale della pagina che deve avvenire entro i 2,5 secondi
Interactivity (FID – First Input Delay): cioè il tempo entro cui la pagina diventa interattiva, la risposta all’input utente. Scorrimento e zoom non sono considerati come eventi di interazione.
Visual Stability (CLS – Cumulative Layout Shift): ossia il fatto che, una volta caricata la pagina, non ci siano spostamenti del contenuto che potrebbero ostacolare od inficiare l’azione dell’utente

Le informazioni derivati dai Core Web Vitals verranno combinate con metriche di performance preesistenti per la misurazione dell’esperienza della pagina, quali: l’ottimizzazione per i dispositivi mobili, la navigazione sicura, la sicurezza HTTPS.

Web Core Vitals 1 — Fonte: developers.google

Vediamo più nel dettaglio di cosa si tratta e come intervenire per migliorare queste metriche.

LCP – Largest Contentful Paint

Misura il tempo di caricamento dell’elemento più grande (image o blocco di testo) visibile nella viewport.

Per fornire una buona esperienza utente, i siti dovrebbero avere un LCP entro i primi 2,5 secondi dall’inizio del caricamento della pagina.

Alcuni esempi di LCP

In entrambe le immagini riportate, l’elemento più grande cambia durante il caricamento del contenuto della pagina web.

Nel primo esempio, il nuovo contenuto viene aggiunto al DOM e questo modifica l’elemento più grande. Nel secondo esempio, il layout cambia e il contenuto, che in precedenza era il più grande viene rimosso dalla visualizzazione.

Anche se spesso accade che il contenuto che si carica più lentamente sia più grande del contenuto già presente sulla pagina, non è sempre così. I due esempi successivi mostrano come il contenuto più grande compaia prima che la pagina venga caricata completamente.

Nel primo esempio, il logo di Instagram viene caricato piuttosto velocemente e rimane l’elemento più grande anche se vengono mostrati progressivamente altri contenuti.

Nell’esempio della pagina dei risultati di ricerca di Google, l’elemento più grande è un paragrafo di testo che viene visualizzato prima che qualsiasi immagine o logo termini il caricamento. Poiché tutte le singole immagini sono più piccole, questo paragrafo rimane l’elemento più grande durante il processo di caricamento.

Quali sono le principali cause di un LCP alto?

Tempo di risposta server lento e backend time elevato (superiore ai 3 secondi)
Render-blocking: quando il codice rallenta il caricamento del contenuto come nel caso di JavaScript e CSS
Tempo di caricamento delle risorse lento
Client-side Rendering (anche se meno rilevante nelle applicazioni WordPress)

Come migliorare il valore dell’LCP?

Molto spesso le immagini rappresentano il più grande elemento visibile nella viewport. Per questo, lavorare sul ridimensionamento corretto delle immagini può portare grandi miglioramenti sui tempi di caricamento del contenuto principale della pagina.

Qualità delle immagini e modalità di caricamento delle stesse possono incidere notevolmente. Quindi va posta attenzione all’ottimizzazione e al ridimensionamento dell’immagine, anche considerando la sempre maggior diffusione dei dispositivi a retina.

Il consiglio è quello di individuare la dimensione dell’immagine nella viewport e non andare oltre la dimensione di 2x rispetto al contenitore.

Inoltre JavaScript e CSS, in quanto render blocking, possono influire sulla metrica LCP. Quindi, una best practice consigliata è quella di individuare le proprietà CSS che definiscono quanto è above the fold e fare in modo che questo Critical CSS venga caricato prima. Mentre lasciare ad un caricamento successivo tutto ciò che si trova below the fold, quindi differire il caricamento di CSS non critici.

FID – First Inpunt Delay

Misura il tempo necessario prima che l’utente possa iniziare ad interagire con la pagina. Google consiglia un FID inferiore ai 100 millisecondi.

Nello specifico, indica l’intervallo di tempo che intercorre tra quando l’utente interagisce con il sito per la prima volta e quando il browser riesce effettivamente a rispondere all’interazione.

Molto importante per evitare la generazione di stress nell’utente e rendere l’esperienza di navigazione il più piacevole.

Quali sono le principali cause di un FID alto?

JS Long Tasks: task molto lunghi di Javascript
Tempo di esecuzione JS elevato
Large JavaScript Bundles
Render-blocking JavaScript

In generale, il ritardo di input (ovvero la latenza di input) si verifica perché il thread principale del browser è impegnato in qualcos’altro, quindi non può (ancora) rispondere alla richiesta all’utente.

Spesso accade perché il browser è già impegnato nell’analisi e nell’esecuzione di un file JavaScript di grandi dimensioni.

Come migliorare il valore del FID?

Per ridurre i JS Long Task si consiglia, quando possibile, di agire con meccanismi di code splitting o cercare di anticipare le librerie.

CLS – Cumulative Layout Shift

Misura la stabilità visiva del layout del sito web, quanto il sito si carica in modo lineare. Fa riferimento alla frequenza con cui gli utenti sperimentano un cambiamento inatteso nel formato del sito web.

Più questo punteggio è basso, più fluida e piacevole risulterà essere anche la navigazione del sito web da parte dell’utente.

Per fornire una buona esperienza utente, i siti dovrebbero riuscire ad ottenere un punteggio CLS inferiore allo score di 0,1.

Il Layout Shift può causare disagio e stress nell’utente.

Quali sono le principali cause di un CLS alto?

Immagine senza dimensione
Ads, Embeds, iFrames privi di dimensione
Contenuti iniettati nella pagina dinamicamente
Web Fonts che causano FOIT (Flash of Invisible Text)/FOUT (Flash of Unstyled Text)

Come migliorare lo score del CLS?

Definire sempre le dimensioni delle immagini con gli attributi “width” e “height”. Se questi attributi vengono definiti i browser intervengono in supporto andando a definire a priori lo spazio occupato dall’immagine (Image Aspect Ratio = ratio of width to height) ed evitando di conseguenza il Layout Shift.

Una seconda best practice è quella di riservare lo spazio necessario per visualizzare contenuti dinamici che arrivano in un tempo indefinito. Questo consente di evitare i salti di contenuto.

Da notare che l’impiego di pattern spesso utilizzati può avere impatto negativo sul CLS. Caricamenti attraverso Infinite Scrolling o Load More Buttons possono essere causa di un CLS score elevato. Ad esempio, in alcune tipologie di utilizzo, l’Infinite Scrolling non permette all’utente di raggiungere il footer. In questi casi si verificano “salti di contenuto” dovuti al footer che cambia la sua posizione iniziale a causa dell’injection di nuovo contenuto.

Dove trovare i Core Web Vitals?

PageSpeed Insights. Mostra tutte le informazioni in un report unico. Oltre ai dati relativi ai Core Web Vitals fornisce dettagli su molte altre metriche in gran parte correlate al miglioramento della velocità di caricamento di una pagina ed al download delle sue risorse.

Estensione per Chrome Core Web Vitals Extension. Utilizzando l’estensione Chrome è possibile accedere a core Web Vitals al caricamento della pagina. Si può interagire direttamente con la pagina per risolvere i problemi nel caso in cui si riscontrino problemi con FID e / o CLS.

Google Search Console. Dopo aver verificato la proprietà del sito web, Google Search Console fornisce dettagli sulle problematiche relative alle singole pagine. In particolare nel rapporto Segnali web essenziali vengono indicate le prestazioni delle pagine del sito. Il rapporto è basato proprio sulle tre metriche: LCP, FID e CLS.

Ma anche su Chrome Dev Tools, WebPage Test, Lighthouse versione 6.

Approfondimenti tecnici sui Core Web Vitals

Approfondimenti sul Largest Contentful Paint (LCP)
Approfondimenti sul First Input Delay (FID)
Approfondimenti sul Cumulative Layout Shift (CLS)

Ti potrebbe interessare

Introduzione alla SEO

Ottimizzazione per i motori di ricerca: nozioni base

SEO locale ed internazionale

Approfondimenti sulla Search Engine Optimization

SEO per eCommerce

Approfondimenti su Keywords, parole chiave, query di ricerca

SEO e Web Performance

Vuoi migliorare le Performance del sito web della tua Azienda?

Scopri di più sul nostro servizio di Web Performance Optimization.

Scopri come sono le performance del tuo sito con questi strumenti:

Se ti interessa conoscerci meglio, scoprire come lavoriamo in KAUKY e come potremmo contribuire al progetto della tua azienda:

chiamaci allo 0385/266133
scrivi a info@kauky.com
contattaci per fissare un appuntamento online.

Performance e design al servizio dell’esperienza digitale

Velocità, stabilità e design non sono dettagli, ma fattori chiave per il successo di un progetto digitale. KAUKY ottimizza le performance dei siti web migliorando tempi di caricamento, usabilità e accessibilità, unendo competenze tecniche e attenzione al design dell’interfaccia.

Ogni intervento è pensato per offrire un’esperienza utente fluida e coerente, capace di valorizzare il brand e supportare gli obiettivi di business.

Scopri come performance e design possono lavorare insieme per rendere il tuo sito più efficace, affidabile e competitivo.

Scopri di più