Core Web Vitals: definizione, introduzione a LCP, FID e CLS e suggerimenti per l'ottimizzazione di Core Web Vitals

L'anno 2021 è straordinario in più di un modo. I motori di ricerca si sono evoluti e sono diventati più competitivi che mai. Google prevede di lanciare una nuova metrica rivoluzionaria per classificare i siti Web sul suo motore di ricerca. Una buona UX e un'esperienza sulla pagina diventeranno un fattore di ranking cruciale, tutto grazie ai dati vitali web di base di Google appena introdotti e di prossima uscita.

Con il lancio anticipato dei principali elementi vitali web di Google entro la fine dell'anno, è diventato sempre più fondamentale per le aziende recuperare il ritardo e ottimizzare i propri siti Web in base a questo fattore di ranking.

Se non sei a conoscenza di quali sono i principali elementi vitali del web, in cosa consiste e cosa puoi fare per ottimizzare i principali elementi vitali del tuo sito web, continua a leggere. Questo blog è per voi.

In questo blog, tratteremo dalla A alla Z dei principali elementi vitali del web e ti aiuteremo a ottimizzare la tua pagina web per lo stesso. Cominciamo.

Che cos'è Core Web Vitals?

Fonte immagine: web.dev

I principali elementi vitali per il web sono segnali di ranking o una serie di criteri e metriche che Google utilizza per valutare l'esperienza utente complessiva del tuo sito web. Google core web vitals valuta la velocità, la reattività e la stabilità visiva del tuo sito web insieme ai segnali di esperienza utente esistenti per valutare l'esperienza complessiva della pagina e la facilità d'uso.

Google prevede di lanciare questo nuovo segnale di ranking nel tentativo di migliorare il modo in cui studia l'esperienza complessiva fornita dalla tua pagina. Il culmine di questi dati verrà raccolto da questo motore di ricerca per classificare il tuo sito Web nella sua SERP.

Più alto è il ranking del tuo sito web, maggiore sarà la sua visibilità. Poiché l'esperienza della pagina diventa un importante elemento di ranking, è inevitabile che tu presti attenzione ad essa. Per controllare i dati di Core Web Vitals del tuo sito web, cerca la sezione "miglioramenti" del tuo account Google Search Console.

Perché Core Web Vitals è importante?

I Core Web Vitals sono segnali di ranking che fanno parte del punteggio di "esperienza della pagina" di Google. È importante perché Google sta rendendo l'esperienza della pagina un fattore di ranking ufficiale su Google.
Fonte immagine: backlinko.com

Ecco alcuni motivi per cui il core web vitals è importante e perché dovrebbe essere importante per te:

• È un'enorme opportunità di posizionamento per i siti Web in arrivo che possono sfruttare appieno questo nuovo cambiamento nella valutazione del posizionamento di Google in fase iniziale.
• Nella guerra tra due siti Web con qualità dei contenuti e ranking del sito Web simili, l'esperienza della pagina può fare la differenza.
• I principali elementi vitali del web stanno diventando più critici ora perché i siti Web che hanno goduto di posizioni ineguagliate nelle SERP di Google ora corrono il rischio di perdere la loro posizione attuale rispetto a siti Web ugualmente competitivi se non soddisfano i nuovi standard di esperienza della pagina.

Tutto considerato, è essenziale ricordare che il punteggio dell'esperienza della tua pagina è solo uno dei circa 200 fattori di ranking che Google utilizza per classificare i siti web.

Per stare al passo e godere di un vantaggio competitivo rispetto agli altri, dovresti continuare a ottimizzare la tua strategia SEO on-page e off-page esistente, ottimizzando contemporaneamente i principali elementi vitali del tuo sito web. Anche se non perderai il tuo posizionamento dall'oggi al domani, puoi sicuramente migliorare le tue possibilità di posizionamento ottimizzando in anticipo i tuoi elementi vitali web core.

Tre segnali di vitali web principali:

Fonte immagine: web.dev

Le prime tre misurazioni della velocità delle pagine e dell'interazione dell'utente considerate da Google nella sua valutazione dei dati vitali principali del Web includono:

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

Segnale 1: Largest Contentful Paint (LCP): verifica le prestazioni di caricamento

LCP è la prima metrica vitale per il web che Google utilizza per calcolare il punteggio di esperienza della tua pagina. Misura le prestazioni di caricamento della tua pagina web.

Il più grande Contentful Paint o LCP può essere definito come la durata necessaria al caricamento di una pagina sul tuo sito Web dal punto di vista di un utente effettivo. In parole semplici, il tempo impiegato dal tuo utente dal fare clic su un collegamento per vedere la maggior parte dei contenuti del tuo sito Web sullo schermo è chiamato LCP.

LCP si concentra su ciò che conta veramente in termini di velocità della pagina, ovvero la capacità di un utente di vedere e interagire con la tua pagina senza ostacoli.

Per controllare il tuo punteggio LCP, utilizza Page Speed ​​Insights di Google. Tutto quello che devi fare è:

• Visita lo strumento di analisi della velocità della pagina di Google .
• Inserisci il tuo sito web nella casella di ricerca.
• Fare clic su Analizza.

Dopo aver fatto clic su "analizza", Google ti mostrerà un rapporto completo della tua pagina corrente. Sfoglialo per conoscere le lacune nel tuo sito web. I risultati ti daranno anche un'idea delle prestazioni della tua pagina web nel mondo reale in base ai dati del browser Chrome.

Puoi anche guardare direttamente i tuoi dati LCP su Search Console (GSC) di Google. Ti consigliamo di utilizzare Page Speed ​​Insights di Google per i seguenti motivi:

• Su PageSpeed ​​Insights, riceverai un rapporto di una singola pagina web che hai inserito nella barra di ricerca per l'analisi. Nella console di ricerca vedrai i dati LCP dell'intero sito web.
• Attraverso la Search Console di Google, otterrai un elenco completo di URL sul tuo sito Web che sono buoni, cattivi o una via di mezzo.
• Le linee guida LCP di Google classificano l'LCP del tuo sito web come "buono", "scarso" e "necessita di miglioramenti".

La misurazione LCP ideale è di 2,5 secondi o più veloce. Più veloce è il caricamento del contenuto principale della tua pagina, migliore sarà il tuo punteggio LCP. Questo può essere difficile per te se hai un sito Web di grandi dimensioni con pagine grandi e funzionalità multiple.

Segnale 2: First Input Delay (FID): verifica l'interattività/reattività

Il First Input Delay è il secondo core web vitale di Google. Misura l'interattività.

In termini semplici, First Input Delay (FID) si riferisce al tempo impiegato da una pagina per diventare interattiva. Puoi dire che misura la durata necessaria affinché un'attività avvenga su una pagina. Più specificamente, misura il tempo impiegato dagli utenti per fare effettivamente qualcosa sulla tua pagina.

La misura FID ideale è inferiore a 100 ms.

Di seguito sono riportati alcuni esempi di interazioni sulla pagina calcolate per il punteggio FID:

• Il tempo impiegato da un utente per scegliere un'opzione dal menu.
• Il tempo impiegato da un utente per inserire la tua email in un campo.
• Il tempo impiegato da un utente per fare clic su un collegamento nella navigazione del sito.

Per i siti Web aziendali che raccolgono dati utente o richiedono dettagli di accesso, il punteggio FID è incredibilmente cruciale.

Segnale 3: Spostamento cumulativo del layout (CLS): verifica la stabilità visiva

Un Cumulative Layout Shift (CLS) è un elemento fondamentale per il web che misura la stabilità visiva. È una metrica che calcola tutte le modifiche al layout che non sono causate dall'interazione dell'utente. In altre parole, possiamo dire che questa metrica tiene conto della stabilità visiva di una pagina durante il caricamento.

Se più elementi sulla tua pagina si spostano durante il caricamento della pagina, maggiore sarebbe il tuo CLS. Se si spostano meno elementi durante il caricamento della pagina web, minore sarà il CLS.

Più basso è il tuo CLS, migliore è il rendimento del punteggio della tua pagina.

Un punteggio CLS inferiore a 0,1 è considerato l'ideale per una pagina Web, quindi assicurati di indirizzarlo mentre ottimizzi il tuo sito Web per un'esperienza di pagina ottimale.

Come ottimizzare i tre Web Vital (LCP, FID, CLS)

L'ottimizzazione dei tre elementi vitali principali del Web è importante per migliorare le prestazioni della pagina e l'esperienza complessiva della pagina web. Ecco alcuni modi in cui puoi migliorarli.
Come ottimizzare il Largest Contentful Paint (LCP):

Ecco un elenco di cosa puoi fare per migliorare l'LCP del tuo sito web:

• Riduci al minimo il tuo CSS: più piccolo è il CSS, più veloce è il tuo LCP.
• Rimuovi elementi di pagina di grandi dimensioni: fortunatamente, Page Speed ​​Insights di Google ti mostrerà se c'è un elemento sul tuo sito web che sta rallentando l'LCP della tua pagina. Una volta identificato di cosa si tratta, puoi risolverlo rapidamente. Ad esempio, un'analisi del punteggio LCP di Techmagnate su Page Speed ​​Insights di Google mostra questo elemento come difettoso:
• Aggiorna il tuo host web: con un hosting migliore si ottengono velocità di caricamento più elevate (incluso LCP).
• Rimuovi gli script di terze parti non necessari: evita il più possibile gli script di terze parti.
• Imposta il caricamento lento: il caricamento lento significa che le immagini vengono caricate solo quando un utente raggiunge quel punto sulla tua pagina web che presenta un'immagine. Impostando il caricamento lento, puoi ottenere LCP più velocemente.

L'esecuzione dei suggerimenti sopra menzionati può aiutarti a migliorare la perfezione LCP necessaria per ottenere un buon punteggio LCP. Migliore è il tuo punteggio LCP, migliori saranno il punteggio dell'esperienza della tua pagina e le possibilità di posizionamento. Quindi ottimizza ora il tuo LCP se non l'hai già fatto.

Come ottimizzare il First Input Delay (FID):

Di seguito sono riportati alcuni passaggi che puoi eseguire per migliorare i punteggi FID del tuo sito:

• Riduci a icona (o posticipa) Javascript: ridurre a icona o rinviare JS sulla tua pagina può aiutarti a migliorare la velocità FID della tua pagina web poiché la necessità per il tuo browser di caricare JS viene ridotta o eliminata.
• Rimuovi gli script di terze parti non critici: gli script di terze parti come Google Analytics e le mappe di calore possono influire negativamente sul FID e sulla velocità di caricamento dei contenuti. Identifica quelli che non sono cruciali per il tuo sito web e rimuovili se non sono fondamentali per la tua pagina web.
• Mantieni i conteggi delle richieste bassi e le dimensioni di trasferimento ridotte: ottimizza il codice per limitare il conteggio delle richieste e ridurre al minimo le dimensioni di trasferimento di file HTML, media, immagini ecc.

Come ottimizzare lo spostamento cumulativo del layout (CLS):

Ecco alcune semplici azioni che puoi intraprendere per migliorare il tuo CLS:

• Assegna agli elementi dell'annuncio uno spazio riservato sulla tua pagina web: eseguire questa semplice attività assicurerà che i tuoi contenuti rimangano dove dovrebbero essere. Le pagine Web che non dispongono di uno spazio pubblicitario designato tendono a incasinare la struttura e il posizionamento del contenuto, a volte spingendolo su e giù per la pagina risultando in un CLS elevato e un punteggio di esperienza della pagina negativo.
• Aggiungi nuovi elementi dell'interfaccia utente below the fold: quando un utente sfoglia una pagina del tuo sito Web, si aspetta che gli elementi rimangano dove si trovano. Aggiungendo elementi dell'interfaccia utente, puoi assicurarti che ciò avvenga e che la struttura del contenuto della pagina rimanga inalterata.
• Utilizza le dimensioni dell'attributo della dimensione impostata per i media: è importante utilizzare una dimensione dell'attributo della dimensione impostata per i media come video, immagini, GIF, infografiche o altri elementi multimediali. In questo modo ti mostrerai quanto spazio occuperà quell'elemento su quella pagina, aiutandoti così a proteggere la tua pagina web da uno smarrimento di contenuti senza precedenti.

I nostri servizi di progettazione e sviluppo di siti Web aiutano a ottimizzare il punteggio dei vitali Web principali.

Come misurare il punteggio di Web Vitals:

Ora che sai quali sono i tre elementi vitali principali del web, ecco alcuni strumenti per aiutarti a misurarli.

• Search Console di Google: un altro strumento potente ed estremamente conveniente per analizzare i tuoi dati vitali web principali è Google Search Console. Viene fornito con un rapporto unico sui dati vitali del web nella sezione dei miglioramenti che puoi controllare ogni volta che conduci un controllo del sito web. La parte migliore: invece di mostrare il rendimento della pagina di una singola pagina web, la console di ricerca ti mostra tutti i dati sul rendimento della pagina web in una volta sola.
• PageSpeed ​​Insight: Google PageSpeed ​​Insight è un potente strumento che ti mostra i principali elementi vitali della tua pagina web insieme a preziosi consigli sui miglioramenti che puoi apportare.
• Lighthouse: Lighthouse è un altro strumento di Google che puoi utilizzare per misurare i tuoi elementi vitali web principali. Precedentemente progettato per controllare le PWA, ora si è trasformato in un potente strumento per monitorare le prestazioni. Dotato di funzionalità extra e controlli SEO, il faro può essere opportunamente descritto come un potente strumento per analizzare la velocità della tua pagina web e i dati sull'esperienza della pagina.
• GT Metrix: GT Metrix è un sito Web di test e monitoraggio delle prestazioni del sito Web. È uno strumento gratuito che puoi utilizzare per valutare le prestazioni di LCP, TBT e CLS.

Come controllare i Core Web Vitals usando Screaming Frog:

Il concetto di auditing degli elementi vitali web principali è relativamente nuovo. Per quelli di voi che vogliono rimanere preparati e ottimizzare i principali elementi vitali del Web del proprio sito Web, l'utilizzo di uno strumento come Screaming Frog può aiutare, soprattutto se si dispone già di un abbonamento al suo abbonamento premium.

Ecco cosa ti servirà:

• Una versione a pagamento di Screaming Frog.
• Una chiave API PageSpeed ​​Insights.
• Il dominio dei siti Web che desideri controllare.

Cominciamo.

Passaggio 1: collega la chiave API di PageSpeed ​​Insights a Screaming Frog

Il passaggio 1 per l'utilizzo di Screaming Frog per ottimizzare i tuoi elementi vitali web principali include il collegamento della tua chiave API PageSpeed ​​Insights con esso. Quando li colleghi, puoi accedere ai dati e ai consigli di PageSpeed ​​Insights pagina per pagina sulla dashboard di Screaming Frog.

Ecco i passaggi da seguire:

• Apri Screaming Frog → Configurazione → Accesso API → PageSpeed ​​Insights.
• Pagina la tua chiave API da PageSpeed ​​Insights nella casella "Chiave segreta".
• Fare clic su ' Connetti '.
• Dopo aver fatto clic su "Connetti", fare clic su " Metriche ".
• Scegli le metriche che desideri controllare e fai clic su " Ok ".

Passaggio 2: eseguire la scansione del sito Web.

Il passaggio successivo include la scansione del tuo sito web.

Tutto quello che devi fare è inserire il nome di dominio del sito web che vuoi scansionare nella casella che dice: "Inserisci URL per spider". Dopo aver inserito la voce, attendi il caricamento della barra di avanzamento "Scansione" e "API".

Una volta caricati al 100%, puoi analizzare i tuoi dati.

Passaggio 3: segnalare il problema alle autorità competenti.

Dopo che lo strumento ha caricato i tuoi dati, otterrai una raccolta di tutte le pagine web del tuo sito web. Qui, è necessario analizzare il numero di pagine Web che non superano le soglie minime dei Core Web Vitals in termini di cifre percentuali.

Ecco alcuni passaggi che puoi seguire:

• Fare clic sulla barra di navigazione in alto.
• Fare clic su Impaginazione .
• Fare clic su Velocità pagina dal menu a discesa.
• Fare clic su Esporta .

Dopo aver esportato i dati, riempi le seguenti colonne:

• Tempo di pittura contenuto più grande (ms): inserisci un filtro per trovare pagine con LCP di 4000 ms o più.
• Tempo di blocco totale (ms): metti un filtro per trovare pagine con 300 ms TBT o più.
• Spostamento cumulativo del layout: inserisci un filtro per trovare pagine con 0,25 CLS o più.

Sulla base di questi dati, puoi creare un rapporto e inviarlo a un cliente. Se stai conducendo questo controllo per i tuoi requisiti di ottimizzazione dell'esperienza della pagina interna, puoi inviare questi dati al team pertinente che può eseguire le ottimizzazioni della pagina di conseguenza.

Passaggio 4: segnala i problemi a livello di pagina con i consigli.

Ora, questo è il passaggio in cui diventa interessante. Ora sei a conoscenza della percentuale di pagine del tuo sito web che non soddisfano gli standard minimi di base di Google Web Vitals. E dopo?

Esegui una raccolta accurata dei problemi rilevanti in base alla metrica che desideri prendere di mira. Ecco cosa puoi fare:

• Sul lato destro della scheda "Panoramica", scorri verso il basso fino a PageSpeed.
• Qui troverai problemi e consigli relativi alla velocità della pagina del tuo sito web, comprese potenziali soluzioni per migliorare i tuoi elementi vitali web principali.
• Il menu a discesa della velocità della pagina includerà varie metriche come:
  • Elimina le risorse che bloccano il rendering (influisce sull'LCP)
  • Minimizza CSS (incide sull'LCP)
  • Minimizza JavaScript (incide sul FID)
  • Rimuovi CSS inutilizzato (influisce sull'LCP)
  • Rimosso Javascript inutilizzato (influisce su FID)
  • (e tanti altri)
• Fare clic su un problema per vedere il numero di pagine interessate ed esportare questi dati nel foglio di lavoro. In questo modo potrai esportare tutti gli URL con i problemi rilevanti.
• Sulla base dei dati, puoi esprimere un giudizio in merito alla rimozione o al differimento di questi elementi dalla tua pagina web.

Ulteriori letture: cos'è la SEO Page Speed

Passaggio 5: dopo l'audit e l'ottimizzazione, eseguire nuovamente la scansione del sito e confrontare.

Dopo aver identificato i fattori che influenzano i tuoi elementi vitali principali di Google Web, puoi apportare le ottimizzazioni. Dopo l'ottimizzazione, il tuo compito è eseguire nuovamente la scansione del tuo sito per valutare i risultati.

Confronta la percentuale di pagine web che non soddisfano i requisiti minimi di base per i dati vitali dopo l'ottimizzazione con i numeri prima dell'ottimizzazione.

Altri fattori di esperienza della pagina che dovresti considerare:

Ecco un elenco dei principali fattori aggiuntivi che Google considera necessari per l'esperienza dell'utente:

• Navigazione sicura: se il tuo sito Web non consente la navigazione sicura, sarà visto come una violazione degli standard di esperienza della pagina e otterrai un punteggio di esperienza della pagina basso. Quindi assicurati che il tuo sito Web non contenga contenuti dannosi o ingannevoli come il malware. Puoi controllare gli standard di conformità alla sicurezza del tuo sito web nel Rapporto sui problemi di sicurezza di Google.
• HTTPS: è più probabile che i siti Web che iniziano con un HTTPS dispongano di una connessione sicura al sito. Se non disponi di un sito Web che inizia con HTTPS, scopri come proteggere il tuo sito Web con HTTPS qui.
• Compatibilità mobile: controlla se la tua pagina web è ottimizzata per i dispositivi mobili utilizzando il test di ottimizzazione mobile di Google. Se la tua pagina web non appare come "mobile-friendly" in questa rapida valutazione, metti in atto strategie per ottimizzare il tuo sito web per telefoni cellulari e tablet. Tra le altre cose, il miglioramento di UX e UI e il perfezionamento della navigazione off-canvas possono aiutare.
• Nessun interstitial invadente: il contenuto della tua pagina web dovrebbe essere facilmente accessibile a un utente. La sua mancanza può farti ottenere un punteggio di esperienza della pagina basso. Ecco le cose principali che dovresti evitare per rendere il contenuto della pagina web più accessibile ai tuoi utenti:
  • Evita di utilizzare i popup che bloccano la maggior parte dei contenuti del tuo sito web.
  • Evita di visualizzare un interstitial autonomo che copre l'intero schermo. Questo è invadente in quanto un utente deve ignorarlo prima di poter accedere al contenuto principale.

Conclusione:

Google è pronto a lanciare i principali dati vitali del web come segnale chiave di ranking nel maggio 2021. La necessità del momento è che le aziende ottimizzino in anticipo i loro siti Web per questi criteri di ranking chiave.

In questo blog, abbiamo illustrato i passaggi tanto necessari che puoi intraprendere per migliorare i tuoi elementi vitali web core. Abbiamo discusso cos'è un core web vitals, le prime tre metriche per core web vitals e cosa puoi fare per ottimizzare la tua pagina web per un buon punteggio SEO di core web vitals.

Abbiamo anche delineato un rapido trucco per analizzare l'esperienza della pagina per coloro che usano Screaming Frog per l'auditing del sito web. Ci auguriamo che le informazioni che abbiamo fornito qui siano state di aiuto. Implementali nella tua strategia di ottimizzazione del sito web per mantenere le tue classifiche su Google.

Fateci sapere nella sezione commenti se avete dubbi o domande.

Ci piacerebbe avere tue notizie.