Core Web Vitals: il nuovo grande fattore di ranking nel 2022

Nel giugno 2021, Google ha lanciato un importante algoritmo che ha suggerito Core Web Vitals come uno dei principali fattori di ranking. Ciò significa che l'esperienza della pagina è diventata uno dei fattori cruciali nel posizionamento delle SERP.

Quali sono i principali fattori vitali del Web che influenzano i segnali della pagina e come migliorare l'esperienza della pagina? In questo blog condivideremo tutto ciò che devi sapere sui Core Web Vitals.

Che cos'è Core Web Vitals?

I Core Web Vitals sono metriche di velocità che fanno parte dei segnali di esperienza della pagina di Google, utilizzati per valutare l'esperienza dell'utente. Le metriche valutano il carico visivo utilizzando Largest Contentful Paint (LCP), la stabilità visiva utilizzando Cumulative Layout Shift (CLS) e l'interattività utilizzando First Input Delay (FID).

Core Web Vitals considera queste metriche per migliorare l'esperienza della pagina:

• Prestazioni di caricamento della pagina
• Facilità di interazione
• Stabilità visiva di una pagina

Queste metriche offrono una prospettiva unica su vari elementi che influenzano il modo in cui gli utenti interagiscono e interagiscono con un sito web. Sebbene gli sviluppatori debbano considerare l'"esperienza dell'utente" in modo olistico, queste metriche indipendenti aiutano a scomporre queste variabili in bit e pezzi in modo che i proprietari dei siti possano identificare e risolvere i problemi tecnici nei loro siti Web.

Perché i vitali Web principali sono importanti?

Poiché i principali elementi vitali del Web sono solo uno dei segnali di esperienza della pagina di Google, non possono alterare automaticamente il posizionamento di un sito Web nelle SERP. Tuttavia, avere punteggi elevati in queste metriche può migliorare l'esperienza utente complessiva e aiutare un sito Web a posizionarsi più in alto.

Alcuni modi comuni per migliorare i principali fattori vitali del web includono:

- Aumento della velocità di caricamento dell'LCP ottimizzando le immagini e riducendo le richieste del server.

- Miglioramento della stabilità visiva.

- Migliorare l'interattività riducendo al minimo i ritardi di primo input.

È importante notare che un punteggio elevato sull'esperienza della pagina non ti spingerà automaticamente in cima a Google. Ad esempio, se il tuo sito Web ha un punteggio LCP elevato ma un design visivo e un layout scadenti, potrebbe comunque non essere facile da usare come i siti con punteggi più bassi ma un design superiore.

Metriche principali dei vitali web

L'algoritmo di Google considera tre elementi principali degli elementi vitali del web come fattore di ranking. Questi sono:

• La più grande vernice contenta (LCP)
• Ritardo primo ingresso (FID)
• Spostamento cumulativo del layout (CLS)

Tuttavia, ci sono anche alcuni fattori vitali web aggiuntivi. Questi sono "Time to First Byte (TTFB) e First Contentful Paint (FCP)." "Total Blocking Time (TBT) e Time to Interactive (TTI) aiutano a misurare l'interattività".

La più grande vernice contenta (LCP)

Il più grande Contentful Paint è la più grande operazione di disegno eseguita da un componente all'interno di una pagina web. Questa metrica misura la quantità di lavoro necessaria per eseguire il rendering di tutto il contenuto di una pagina Web.

Le pagine più grandi richiedono più risorse dal browser per essere caricate e visualizzate correttamente.

I proprietari dei siti vogliono che le loro pagine si carichino rapidamente per offrire un'esperienza utente piacevole. Il tempo di caricamento rapido è vitale per un'esperienza utente positiva; una pagina che si carica rapidamente ha maggiori probabilità di posizionarsi più in alto su Google.

Inoltre, è stato dimostrato che i tempi di caricamento rapidi influiscono sui tassi di coinvolgimento e conversione rispetto a una pagina con tempi di caricamento lenti.

1.1 Cosa misura LCP?

LCP misura la quantità di tempo impiegata dalla pagina per caricare diversi blocchi di contenuto in un unico viewport. Questa metrica considera solo la velocità con cui le sezioni di contenuto vengono visualizzate sullo schermo visibile; non viene considerato nulla di below the fold.

L'LCP ottimale per una pagina dovrebbe essere di 2,5 secondi.

1.2 Come migliorare l'LCP?

Gli approfondimenti sulla velocità della pagina forniscono i giusti suggerimenti per ottimizzare la tua pagina per LCP. Ecco alcuni suggerimenti per migliorare LCP:

• Ottimizza le tue immagini: assicurati di fornire le tue immagini in formati più leggeri e immagini compresse. Abilita la compressione sul tuo server web configurando l'accelerazione GZIP.
• Puoi utilizzare un plug-in di compressione delle immagini che fornisce le immagini nei formati corretti e comprime le immagini.
• Quasi tutti i siti Web vengono indicizzati da Google utilizzando l'indicizzazione mobile-first. Di conseguenza, l'ottimizzazione di LCP per dispositivi mobili è più importante dell'ottimizzazione per desktop. Ogni immagine deve essere ridimensionata per adattarsi alle specifiche del layout.

• Precarica risorse critiche: assicurati che i tuoi server precaricano risorse critiche come video e caratteri in modo che siano pronte quando l'utente le richiede. Ciò ridurrà il tempo di caricamento della tua pagina richiedendo meno dalla cache del browser.

• Riduci il tempo di risposta del server: quando un server impiega molto tempo per rispondere a una richiesta, aumenta anche il tempo necessario per visualizzare la pagina sullo schermo. Di conseguenza, danneggia tutte le statistiche sulla velocità della pagina, incluso LCP. La migliore pratica è utilizzare la Content Delivery Network (CDN) o ottimizzare e analizzare i server.

• Rimuovi le risorse che bloccano il rendering: il browser analizza l'albero DOM quando riceve il documento HTML dal tuo server. Se il DOM contiene fogli di stile esterni o file JS, il browser deve arrestarsi prima di continuare ad analizzare il resto dell'albero DOM. Le risorse che bloccano il rendering sono file JS e CSS che ritardano il tempo LCP.

Spostamento cumulativo del layout (CLS)

Lo spostamento cumulativo del layout è una metrica che aiuta a identificare i collegamenti o i pulsanti che si adattano dopo il caricamento di una pagina Web e riflette il livello di difficoltà che gli utenti avranno a interagire con gli elementi del tuo sito una volta che una pagina viene visualizzata. In altre parole, controlla se gli elementi si muovono sullo schermo durante il caricamento di una pagina.

Un'esperienza utente forte richiede una buona esperienza utente e design e un utente si sentirà frustrato se una pagina Web cambia elemento mentre sta leggendo. CLS aiuta gli sviluppatori a determinare se le immagini oi collegamenti su un sito Web cambiano, consentendo ai proprietari di siti di migliorare l'accessibilità, aumentare le percentuali di clic e aumentare le vendite online.

2.1 Cosa misura il CLS?

CLS determina se gli elementi nella finestra visibile cambiano posizione tra due fotogrammi renderizzati. In parole povere, questa metrica aiuta i proprietari del sito a determinare se contenuti come testo, pulsanti e banner vengono spostati mentre un utente legge il contenuto su una determinata pagina.

Gli elementi che cambiano posizione possono confondere gli utenti e ostacolare la loro esperienza su una pagina, quindi è fondamentale assicurarsi che tutto il contenuto rimanga al suo posto dopo che la pagina è stata caricata sul dispositivo dell'utente.

I proprietari dei siti devono mantenere un CLS di 0,1 o inferiore.

2.2 Come migliorare il CLS?

Ecco le migliori pratiche per ridurre al minimo il CLS:

• Usa le dimensioni delle dimensioni impostate per qualsiasi supporto: ogni volta che utilizzi il supporto, utilizza le dimensioni e le impostazioni corrette. L'impostazione di dimensioni errate può causare lo spostamento degli elementi in una pagina, il che comporterà un aumento del punteggio CLS.
• Riduci a icona gli oggetti Flash: l'utilizzo di troppi oggetti Flash può anche aumentare il CLS perché spesso contengono codice nascosto che interagisce con il DOM. Evitando oggetti Flash non necessari, migliorerai le prestazioni complessive del tuo sito e ridurrai la possibilità che gli elementi vengano caricati lentamente.
• Aggiungi nuovi elementi dell'interfaccia utente prima di piegare: ogni volta che aggiungi nuovi elementi dell'interfaccia utente a una pagina, assicurati che vengano aggiunti prima di qualsiasi piegatura nel layout. Ciò garantirà che l'elemento appena inserito non finisca sopra un elemento esistente, il che può causarne lo spostamento e incorrere in una penalità CLS.

Ritardo primo ingresso (FID)

FID è il tempo che intercorre tra quando un utente interagisce con la tua pagina e quando la pagina risponde. Viene anche chiamata reattività.

FID misura il tempo impiegato da una pagina per rispondere dopo che un utente ha interagito con essa. L'obiettivo è ridurre i ritardi in modo che gli utenti abbiano un'esperienza piacevole, indipendentemente dal fatto che stiano sfogliando i contenuti o interagendo con domande o moduli sul tuo sito.

3.1 Cosa misura la FID?

Quando una pagina carica gli input di un elemento da un utente, il FID ne misura la reattività. FID acquisisce solo eventi come clic e pressioni di tasti in questa modalità.

Il FID dovrebbe essere mantenuto al di sotto di 100 millisecondi per garantire un'esperienza utente decente.

La FID è difficile da quantificare perché queste informazioni possono essere ottenute solo sul campo. Ciò significa che fattori al di fuori del tuo controllo, come la capacità del dispositivo dell'utente e la velocità di Internet riscontrata dal tuo pubblico, influiranno sul tuo punteggio.

3.2 Come migliorare la FID?

Non esiste una soluzione per migliorare il tuo punteggio FID. Tuttavia, seguendo alcune semplici linee guida, puoi avere un grande impatto:

• Rinvia JavaScript: molti utenti disattivano JavaScript modificando le impostazioni del browser per "bloccare Java". Ciò influisce sul tuo punteggio in FID. Se devi bloccare o rinviare gli script, fallo il prima possibile dopo aver caricato la pagina above the fold.
• Rimuovi script di terze parti non critici: rimuovi tutti gli script di terze parti che non sono essenziali per il funzionamento del tuo sito. Ciò include "plug-in di social media", annunci e script di analisi di Google. Se uno script è necessario ma può essere rinviato, assicurati di rinviarlo il prima possibile nel processo di caricamento della pagina in modo che gli utenti abbiano un'esperienza migliore. Riduci al minimo i download di immagini e Flash.
• Usa una cache del browser: ciò consente alla tua pagina di caricare materiale più rapidamente. Ciò velocizza il caricamento delle attività JS nel browser dell'utente.

Quali sono le altre metriche delle prestazioni di Web Vitals principali?

Core Web Vitals fornisce tonnellate di dati che gli sviluppatori possono utilizzare per migliorare l'esperienza utente dei loro siti Web. Gli sviluppatori possono anche scoprire in che modo il loro codice influisce sul modo in cui le persone consumano i contenuti sul loro sito e sulle principali metriche sopra descritte.

Queste metriche descrivono i tempi di ritardo o altre variabili tecniche che potrebbero influire negativamente sul modo in cui un pubblico online si connette a una pagina Web, quindi diamo un'occhiata ad alcune altre metriche che puoi utilizzare per valutare l'esperienza che i visitatori hanno sul tuo sito.

Primo Contentful Paint (FCP)

First Contentful Paint (FCP) è la quantità di tempo necessaria al browser di un utente per visualizzare gli elementi DOM (immagini, componenti canvas non bianchi e SVG).

Questa metrica è disponibile nell'intervallo di punteggi FCP come indicato:

• 0–2 secondi: verde (veloce)
• 2–4 secondi: arancione (moderato)
• 4+ secondi: rosso (lento)

Time To Interactive (TTI)

Time to Interactive è il tempo impiegato dal browser dell'utente per eseguire una prima semplice richiesta dopo aver avviato la pagina. Ciò include qualsiasi cosa, dal caricamento di script, alla raccolta di dati dal server e al rendering di HTML.

I punteggi di Time To Interactive sono i seguenti:

• 0–3,8 secondi: verde (veloce)
• 3,9–7,3 secondi: arancione (moderato)
• 7,3+ secondi: rosso (lento)

Tempo di blocco totale (TBT)

Il tempo di blocco totale (TBT) è una metrica che consente ai gestori del sito di determinare quanto tempo impiega una pagina Web per rispondere a un input specifico dell'utente. Questa metrica, che viene calcolata in millisecondi e ha una gamma di punteggi TBT, rileverà le pagine con JavaScript non necessario:

• 0–300 ms: verde (veloce)
• 300–600 ms: arancione (moderato)
• 600+ ms: rosso (lento)

Domande frequenti

D. I Core Web Vitals influiscono sulla SEO?

Ans: Sì, i Core Web Vitals sono un segnale di ranking, secondo Google. Il web.dev di Google fornisce una guida eccellente sull'ottimizzazione di LCP, FID e CLS per migliorare l'esperienza e le classifiche dei tuoi utenti.

D. Core Web Vitals è solo per dispositivi mobili?

Risposta: No, i Core Web Vitals hanno un impatto uguale sia sui siti desktop che su quelli mobili. Tuttavia, puoi ottenere l'aggiornamento dell'esperienza della pagina sia per desktop che per dispositivi mobili separatamente.

D. Quando Google ha introdotto Core Web Vitals?

Risposta: Google ha introdotto Core Web Vitals nel giugno 2021 come un modo per i gestori dei siti di misurare la velocità e le prestazioni dei loro siti web.

D. Come posso controllare i miei Core Web Vitals per un sito web?

Risposta: Chrome DevTools è uno strumento per sviluppatori preinstallato con il browser Chrome. Basta fare clic con il pulsante destro del mouse e selezionare "Ispeziona" e Chrome DevTools verrà avviato. È possibile trovare alcune metriche di Core Web Vitals utilizzando il pannello delle prestazioni di Chome DevTools. Basta tenere d'occhio Web Vitals.

D. Un cambiamento di layout cumulativo influisce sulla tua SEO?

Ris: Il Cumulative Layout Shift è un indicatore cruciale per determinare la stabilità visiva. Conta il numero di volte in cui gli utenti sono sorpresi da modifiche impreviste al layout. Di conseguenza, un punteggio CLS più basso indica che il contenuto è stabile e non si altera, mentre un CLS alto indica che il contenuto si sta spostando.

Conclusione

Alcune delle migliori pratiche che puoi incorporare nel tuo sito Web per migliorare le prestazioni sono: riduzione al minimo del codice, utilizzo del miglioramento progressivo e ottimizzazione delle immagini. Seguendo questi suggerimenti, il tuo sito Web si caricherà più velocemente per i visitatori e aiuterà anche a ottimizzare le tue classifiche sui motori di ricerca.

Puoi utilizzare strumenti come GTMetrix o Lighthouse per controllare gli approfondimenti sulla velocità della pagina in modo assolutamente gratuito.